目录

Developing the AtomicServiceEnhancedWeb Component

AtomicServiceEnhancedWeb is a container that directly integrates the content of a web page into the UI of the atomic service, so that a user can browse this web page without leaving the service, thereby providing seamless browsing experience for the user. AtomicServiceEnhancedWeb can run without being injected into ASCF. For details about how to configure and develop this component, see the following relevant guides:

Environment Setup

  1. Add the dependency to the oh-package.json5 file of the entry module.

    "dependencies": {
  "@atomicservice/ascfapi": "^1.0.12"
}

  2. Add the dependency and network permission declaration to the module.json5 file of the entry module.

    "requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

  3. Add the dependency to the hvigor/hvigor-config.json5 file.

    "dependencies": {
  "@atomicservice/ascf-toolkit-hvigor-plugin": "~1.0.8-alpha.0 ||~1.0.8-beta.0 || ~1.0.8"
}

  4. Add the plugin configuration to the hvigorfile.ts file.

    import { appTasks } from '@ohos/hvigor-ohos-plugin';
import { ascfHspPlugin } from '@atomicservice/ascf-toolkit-hvigor-plugin';
export default {
  system: appTasks,
  plugins:[
    ascfHspPlugin(),
  ]
}

Preparations

  1. Before development, ensure that you have configured business domain names.

  2. Install the JavaScript SDK in the HTML5 project to call related APIs.

JavaScript SDK

How to Obtain

Integrate the JavaScript SDK to your project in NPM mode.

How to Install

Open the cmd window in the target path and run the following npm command to obtain the corresponding JavaScript file:

npm install @atomicservice/aseweb-sdk

Usage

es6

import has from '@atomicservice/aseweb-sdk';

has.asWeb.getEnv({
  callback: (err, res) => {
    console.log('success: ', res);
  }
});

umd

<script src="../dist/aseweb-sdk.umd.js"></script>
<script>
  has.asWeb.getEnv({
    callback: (err, res) => {
      console.log('success: ', res);
    }
  });
</script>

A success message displayed in the command output indicates that the SDK has been successfully installed and you can use the AtomicServiceEnhancedWeb component.

Copy the aseweb-sdk.umd.js file in the npm installation package to the static resource directory of the project, and change the value of script src in the preceding example to the corresponding path.