AtomicServiceEnhancedWeb组件参考

约束与限制

使用AtomicServiceEnhancedWeb组件之前需要完成开发准备，具体请参照开发AtomicServiceEnhancedWeb组件。

模拟器支持情况

从1.0.17版本开始，支持模拟器运行。

需要权限

访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。

AtomicServiceEnhancedWeb

AtomicServiceEnhancedWeb({
  src: ResourceStr,
  controller: AtomicServiceEnhancedWebControll,
  navPathStack?: NavPathStack,
  mixedMode?: MixedMode,
  darkMode?: WebDarkMode,
  forceDarkAccess?: boolean,
  bgColor?: ResourceColor,
  nestedScroll?: NestedScrollOptions | NestedScrollOptionsExt,
  expandSafeAreaTypes: [SafeAreaType.SYSTEM],
  expandSafeAreaEdges: [SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM],
  onMessage?: Callback<OnMessageEvent>,
  onErrorReceive?: Callback<OnErrorReceiveEvent>,
  onHttpErrorReceive?: Callback<OnHttpErrorReceiveEvent>,
  onPageBegin?: Callback<OnPageBeginEvent>,
  onPageEnd?: Callback<OnPageEndEvent>,
  onControllerAttached?: Callback<void>,
  onLoadIntercept?: Callback<OnLoadInterceptEvent, boolean>,
  onProgressChange?: Callback<OnProgressChangeEvent>,
  onTitleReceive?: Callback<OnTitleReceiveEvent>
})

起始版本： 1.0.12

装饰器类型： @Component

参数：

AtomicServiceEnhancedWebController

通过AtomicServiceEnhancedWebController可以控制AtomicServiceEnhancedWeb组件各种行为。一个AtomicServiceEnhancedWebController对象只能控制一个AtomicServiceEnhancedWeb组件，且必须在AtomicServiceEnhancedWeb组件和AtomicServiceEnhancedWebController绑定后，才能调用AtomicServiceEnhancedWebController上的方法。

起始版本： 1.0.12

装饰器类型： @Observed

getUserAgent

getUserAgent(): string

获取当前默认用户代理。

起始版本： 1.0.12

返回值：

错误码：

以下错误码的详细介绍请参见错误码。

getCustomUserAgent

getCustomUserAgent(): string

获取自定义用户代理。

起始版本： 1.0.12

返回值：

错误码：

以下错误码的详细介绍请参见错误码。

setCustomUserAgent

setCustomUserAgent(userAgent: string): void

设置自定义用户代理，会覆盖系统的用户代理。

建议在onControllerAttached回调事件中设置User-Agent，设置方式请参考示例。

不建议将User-Agent设置在onLoadIntercept回调事件中，会概率性出现设置失败。

起始版本： 1.0.12

参数：

错误码：

以下错误码的详细介绍请参见错误码。

refresh

refresh(): void

调用此接口通知AtomicServiceEnhancedWeb组件刷新网页。

起始版本： 1.0.12

错误码：

以下错误码的详细介绍请参见错误码。

forward

forward(): void

按照历史栈，前进一个页面。一般结合accessForward一起使用。

起始版本： 1.0.12

错误码：

以下错误码的详细介绍请参见错误码。

backward

backward(): void

按照历史栈，后退一个页面。一般结合accessBackward一起使用。

起始版本： 1.0.12

错误码：

以下错误码的详细介绍请参见错误码。

accessForward

accessForward(): boolean

当前页面是否可前进，即当前页面是否有前进历史记录。

起始版本： 1.0.12

返回值：

错误码：

以下错误码的详细介绍请参见错误码。

accessBackward

accessBackward(): boolean

当前页面是否可后退，即当前页面是否有返回历史记录。

起始版本： 1.0.12

返回值：

错误码：

以下错误码的详细介绍请参见错误码。

accessStep

accessStep(step: number): boolean

当前页面是否可前进或者后退给定的step步。

起始版本： 1.0.12

参数：

返回值：

错误码：

以下错误码的详细介绍请参见错误码。

loadUrl

loadUrl(url: string | Resource, headers?: Array<WebHeader>): void

加载指定的URL。

起始版本： 1.0.12

参数：

错误码：

以下错误码的详细介绍请参见错误码。

postMessage

postMessage(data: string | object): Promise<void>

向网页发送消息。

起始版本： 2.0.4

参数：

错误码：

以下错误码的详细介绍请参见错误码。

WebHeader

Web组件返回的请求/响应头对象。

起始版本： 1.0.12

OnMessageEvent

定义网页发送消息时会触发该回调。

起始版本： 1.0.12

OnErrorReceiveEvent

定义网页加载遇到错误时触发该回调。

起始版本： 1.0.12

OnHttpErrorReceiveEvent

定义网页收到加载资源加载HTTP错误时触发。

起始版本： 1.0.12

OnPageBeginEvent

定义网页加载开始时触发的函数。

起始版本： 1.0.12

OnPageEndEvent

定义网页加载结束时触发的函数。

起始版本： 1.0.12

OnLoadInterceptEvent

当资源加载被拦截时，加载拦截事件。

起始版本： 1.0.12

OnProgressChangeEvent

定义网页加载进度变化时触发该回调。

起始版本： 1.0.12

OnTitleReceiveEvent

定义网页document标题更改时触发该回调。

起始版本： 1.0.12

OnLoadInterceptCallback

type OnLoadInterceptCallback = (event: OnLoadInterceptEvent) => boolean

资源加载被拦截时触发该回调。

起始版本： 1.0.12

参数：

返回值：

接口

has.router.pushUrl

pushUrl(options: object): void

保留当前页面，跳转到目标页面。

起始版本： 1.0.12

参数：

示例：

has.router.pushUrl({
  url: 'pages/Index',
  params: { name: 'Peter' },
  mode: 'Single',
  callback: (err, res) => {
  }
});

has.router.replaceUrl

replaceUrl(options: object): void

销毁当前页面，跳转到目标页面。

起始版本： 1.0.12

参数：

示例：

has.router.replaceUrl({
  url: 'pages/Index',
  params: { name: 'Peter' },
  mode: 'Standard',
  callback: (err, res) => {
  }
});

has.router.back

back(options: object): void

返回到之前页面。

起始版本： 1.0.12

参数：

示例：

has.router.back({
  delta: 2,
  params: { name: 'Peter' },
  callback: (err, res) => {
  }
});

has.router.clear

clear(options: object): void

清空所有历史页面，仅保留当前页面。

起始版本： 1.0.12

参数：

示例：

has.router.clear({
  callback: (err, res) => {
  }
});

has.navPathStack.pushPath

pushPath(options: object): void

页面入栈，当前页面保留在栈中。

起始版本： 1.0.12

参数：

OnPopEvent：

示例：

has.navPathStack.pushPath({
  name: 'PageOne',
  param: { name: 'Peter' },
  animated: true,
  onPop: event => {
  },
  callback: (err, res) => {
  }
});

has.navPathStack.replacePath

replacePath(options: object): void

页面入栈，当前栈顶页面退出并销毁。

起始版本： 1.0.12

参数：

OnPopEvent：

示例：

has.navPathStack.replacePath({
  name: 'PageOne',
  param: { name: 'Peter' },
  animated: true,
  onPop: event => {
  },
  callback: (err, res) => {
  }
});

has.navPathStack.pop

pop(options: object): void

回退到之前页面。

起始版本： 1.0.12

参数：

返回值：

示例：

has.navPathStack.pop({
  name: 'PageIndex',
  result: { name: 'Peter' },
  animated: true,
  callback: (err, res) => {
  }
});

has.navPathStack.clear

clear(options: object): void

清空栈中所有页面，保留栈顶页面。

起始版本： 1.0.12

参数：

示例：

has.navPathStack.clear({
  animated: true,
  callback: (err, res) => {
  }
});

has.asWeb.postMessage

postMessage(options: object): void

发送消息，会触发AtomicServiceEnhancedWeb组件的onMessage()方法回调。

起始版本： 1.0.12

参数：

示例：

has.asWeb.postMessage({
  data: { name: 'Peter' },
  callback: (err, res) => {
  }
});

// ArkTS页面
AtomicServiceEnhancedWeb({
  src: $rawfile("Index.html"),
  onMessage: (event) => {
    console.info('onMessage data: ', event.data);
  }
})

has.asWeb.getEnv

getEnv(options: object): void

获取当前环境信息。

起始版本： 1.0.12

参数：

返回值：

示例：

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

has.asWeb.checkJsApi

checkJsApi(options: object): void

检查是否支持指定的js接口。

起始版本： 1.0.12

参数：

返回值：

示例：

has.asWeb.checkJsApi({
  jsApiList: ['router.back', 'navPathStack.clear', 'postMessage'],
  callback: (err, res) => {
  }
});

has.asWeb.onMessage

has.asWeb.onMessage(callback: function): void

监听并接受来自postMessage发送过来的消息。

起始版本： 2.0.4

参数：

示例：

has.asWeb.onMessage((data) => {
});

has.cameraPicker.pick

pick(options: object): void

拍照或录像。

起始版本： 1.0.12

参数：

返回值：

示例：

has.cameraPicker.pick({
  mediaTypes: ['photo', 'video'],
  cameraPosition: 1,
  saveUri: '',
  videoDuration: 30,
  callback: (err, res) => {
  }
});

has.photoViewPicker.select

select(options: object): void

拍照或选择图片。

起始版本： 1.0.12

参数：

返回值：

示例：

has.photoViewPicker.select({
  maxSelectNumber: 9,
  callback: (err, res) => {
  }
});

has.getLocalImgData

getLocalImgData(options: object): void

获取本地图片。

起始版本： 1.0.12

参数：

返回值

示例：

has.getLocalImgData({
  uri: '/data/storage/el2/base/haps/entry/cache/example.jpg',
  compressionRatio: 0.3,
  success: (res) => {
    let localData = res.localData;
  },
  fail: (err) => {
  },
  complete: (res) => {
  }
});

has.filePreview.openPreview

openPreview(options: object): void

预览文件，只支持预览本地文件。

起始版本： 1.0.12

参数：

mimeType支持的类型如下：

示例：

has.filePreview.openPreview({
  title: '图片预览',
  uri: '/data/storage/el2/base/haps/entry/cache/example.jpg',
  mimeType: 'image/jpeg',
  callback: (err, res) => {
  }
});

has.request.uploadFile

uploadFile(options: object): void

上传文件。

起始版本： 1.0.12

需要权限： 在module.json5中声明ohos.permission.INTERNET。

注意事项：在调用此接口前，需要先完成配置服务器域名。

参数：

返回值：

示例：

has.request.uploadFile({
  url: 'https://www.example.com/upload',
  header: { 'Accept': '*/*' },
  method: 'POST',
  files: [{
    filename: 'example.jpg',
    name: 'file',
    uri: '/data/storage/el2/base/haps/entry/cache/example.jpg',
    type: 'jpg'
  }],
  data: [{
    name: 'key1',
    value: 'value1'
  }],
  callback: (err, res) => {
  }
});

has.request.downloadFile

downloadFile(options: object): void

下载文件。

起始版本： 1.0.12

需要权限： 在module.json5中声明ohos.permission.INTERNET。

注意事项：在调用此接口前，需要先完成配置服务器域名。

参数：

返回值：

示例：

has.request.downloadFile({
  url: 'https://www.example.com/test.jpg',
  fileName: 'test.jpg',
  callback: (err, res) => {
  }
});

has.connection.getNetworkType

getNetworkType(options: object): void

获取网络状态。

起始版本： 1.0.12

需要权限： 在module.json5中声明ohos.permission.GET_NETWORK_INFO。

参数：

返回值：

示例：

has.connection.getNetworkType({
  callback: (err, res) => {
  }
});

has.location.getLocation

getLocation(options: object): void

获取当前地理位置。

以下情况使用精确定位：priority传值0x201（精度优先）或scenario传值0x301（导航场景）、0x302（运动轨迹记录场景）、0x303（打车场景）或maxAccuracy传值小于50，其他情况使用模糊定位。

起始版本： 1.0.12

需要权限： 模糊定位需要在module.json5中声明ohos.permission.APPROXIMATELY_LOCATION，精确定位需要在module.json5中声明ohos.permission.LOCATION和ohos.permission.APPROXIMATELY_LOCATION。

参数：

priority取值：

scenario取值：

返回值：

示例：

has.location.getLocation({
  priority: 0x203,
  scenario: 0x300,
  maxAccuracy: 0,
  timeoutMs: 5000,
  callback: (err, res) => {
  }
});

has.authorize

has.authorize(Object object): void

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权元服务使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。

起始版本： 1.0.23

参数：

参数为Object对象，包括以下字段。

示例：

has.authorize({
  scope: 'scope.camera',
  success: () => {
    console.info('authorize success');
  },
  fail: (err) => {
    console.error('authorize fail', err);
  },
  complete: (res) => {
    console.info('authorize complete', res);
  }
});

has.login

has.login(Object object): void

调用接口获取登录凭证（code）。使用该凭证进一步换取用户登录状态信息，包括用户在当前程序中的唯一标识（openid）、平台账号下的唯一标识（unionid）及本次登录的会话密钥（session_key）等。用户数据的加密与解密通信需要依赖会话密钥来完成。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.login({
  success: (res) => {
    console.info('login success', res);
  },
  fail: (err) => {
    console.error('login fail', err);
  },
  complete: (res) => {
    console.info('login complete', res);
  }
});

has.requestPayment

has.requestPayment(Object object): void

拉起华为支付或跳转三方支付。使用前请参考华为支付服务 - 开发准备。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

拉起华为支付success的返回值为空，跳转三方支付success的返回值包括以下字段。

fail返回值：

示例（拉起华为支付）：

has.requestPayment({
  orderStr: 'xxx',
  success: (res) => {
    console.info(`requestPayment success, res = ${JSON.stringify(res)}`);
  },
  fail: (err) => {
    console.error(`requestPayment fail, err = ${JSON.stringify(err)}`);
  },
  complete: (res) => {
    console.info(`requestPayment complete, res = ${JSON.stringify(res)}`);
  }
});

示例（跳转三方支付）：

has.requestPayment({
  orderStr: '',
  payload: 'AP',
  success: (res) => {
    console.info(`requestPayment success, res = ${JSON.stringify(res)}`);
  },
  fail: (err) => {
    console.error(`requestPayment fail, err = ${JSON.stringify(err)}`);
  },
  complete: (res) => {
    console.info(`requestPayment complete, res = ${JSON.stringify(res)}`);
  }
});

has.cashierPicker

has.cashierPicker(Object object)

拉起通用收银台。

起始版本： 1.0.12

依赖关系： ROM版本 ≥ 5.0.2(14)

参数：

参数为Object对象，包括以下字段。

success返回值：

fail返回值：

示例：

has.cashierPicker({
  tradeSummary: '',
  amount：100,
  currency：'CNY',
  extraInfo: '',
  success: (res) => {
    console.info(`cashierPicker success, res = ${JSON.stringify(res)}`);
  },
  fail: (err) => {
    console.error(`cashierPicker fail, err = ${JSON.stringify(err)}`);
  },
  complete: (res) => {
    console.info(`cashierPicker complete, res = ${JSON.stringify(res)}`);
  }
});

has.requestContract

has.requestContract(Object object)

调起华为支付签约服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

fail返回值：

示例：

has.requestContract({
  contractStr: 'xxx',
  success: (res) => {
    console.info(`requestContract success, res = ${JSON.stringify(res)}`);
  },
  fail: (err) => {
    console.error(`requestContract fail, err = ${JSON.stringify(err)}`);
  },
  complete: (res) => {
    console.info(`requestContract complete, res = ${JSON.stringify(res)}`);
  }
});

has.requestSubscribeMessage

has.requestSubscribeMessage(Object object)

订阅消息。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.requestSubscribeMessage({
  tmplIds: [''],
  success: (res) => {
    console.info('requestSubscribeMessage success', res);
  },
  fail: (err) => {
    console.error('requestSubscribeMessage fail', err);
  },
  complete: (res) => {
    console.info('requestSubscribeMessage complete', res);
  }
});

has.queryIapEnvStatus

has.queryIapEnvStatus(Object object)

查询用户登录的账号服务地是否在IAP Kit支持结算的国家/地区中。当前只支持中国大陆。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

fail返回值：

示例：

has.queryIapEnvStatus({
  success: () => {
    console.info('queryIapEnvStatus success');
  },
  fail: (err) => {
    console.error('queryIapEnvStatus fail', err);
  },
  complete: (res) => {
    console.info('queryIapEnvStatus complete', res);
  }
});

has.createIap

has.createIap(Object object)

发起购买，支持消耗型商品、非消耗型商品和自动续期订阅商品。在AppGallery Connect创建商品后，使用此接口拉起华为应用内支付收银台，显示商品名称、价格等信息。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

fail返回值：

示例：

has.createIap({
  // 替换为实际的商品id。
  productId: 'product_id',
  productType: 0,
  developerPayload: '',
  reservedInfo: JSON.stringify({ key1: 'value1' }),
  promotionalOfferId: '',
  applicationUserName: '',
  jwsRepresentation: '',
  success: (res) => {
    console.info('createIap success', res);
  },
  fail: (err) => {
    console.error('createIap fail', err);
  },
  complete: (res) => {
    console.info('createIap complete', res);
  }
});

has.finishIap

has.finishIap(Object object)

应用完成已购商品的发货后，调用此接口确认发货，指明此次购买流程结束。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

fail返回值：

示例：

has.finishIap({
  productType: 0,
  // 替换为实际的purchaseToken。
  purchaseToken: '***',
  // 替换为实际的purchaseOrderId。
  purchaseOrderId: '***',
  success: () => {
    console.info('finishIap success');
  },
  fail: (err) => {
    console.error('finishIap fail', err);
  },
  complete: (res) => {
    console.info('finishIap complete', res);
  }
});

has.queryIap

has.queryIap(Object object)

查询用户已订购商品的购买数据，包括消耗型商品和非消耗型商品，一次请求只能查询一种类型的商品。

• 若查询消耗型商品，IAP仅返回用户已购未消耗的购买数据。若有购买数据返回，说明可能存在因某些异常而导致未进行发货的情况，需要应用判断是否已发货，未发货则需要进行补发货处理。

• 若查询非消耗型商品，IAP返回用户所有已订购商品的购买数据。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

fail返回值：

示例：

has.queryIap({
  productType: 0,
  queryType: 1,
  success: (res) => {
    console.info('queryIap success', res);
  },
  fail: (err) => {
    console.error('queryIap fail', err);
  },
  complete: (res) => {
    console.info('queryIap complete', res);
  }
});

has.queryIapProducts

has.queryIapProducts(Object object)

获取在AppGallery Connect上配置的商品的详情信息。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

返回Product数组。

fail返回值：

示例：

has.queryIapProducts({
  productType: 0,
  productIds: ['xxx-1', 'xxx-2'],
  success: (res) => {
    console.info('queryIapProducts success', res);
  },
  fail: (err) => {
    console.error('queryIapProducts fail', err);
  },
  complete: (res) => {
    console.info('queryIapProducts complete', res);
  }
});

has.isIapSandboxActivated

has.isIapSandboxActivated(Object object)

检查沙盒测试能力是否生效。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

返回boolean，代表沙盒测试能力是否生效。

fail返回值：

示例：

has.isIapSandboxActivated({
  success: (res) => {
    console.info('isIapSandboxActivated success', res);
  },
  fail: (err) => {
    console.error('isIapSandboxActivated fail', err);
  },
  complete: (res) => {
    console.info('isIapSandboxActivated complete', res);
  }
});

has.showIapManagedSubscriptions

has.showIapManagedSubscriptions(Object object)

跳转到订阅页或订阅详情页。

需要权限： 开发前需要配置Client ID、配置签名证书指纹、开通商户服务、开启和激活应用内购买服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

fail返回值：

示例：

has.showIapManagedSubscriptions({
  uiParameter: {
    windowScreenMode: 1
  },
  groupId: 'xxx',
  success: () => {
    console.info('showIapManagedSubscriptions success');
  },
  fail: (err) => {
    console.error('showIapManagedSubscriptions fail', err);
  },
  complete: (res) => {
    console.info('showIapManagedSubscriptions complete', res);
  }
});

has.getPhoneNumber

has.getPhoneNumber(Object object):void

拉起获取手机号的功能页。使用前请参考开发前提-获取手机号。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.getPhoneNumber({
  success: (res) => {
    console.info('getPhoneNumber success', res);
  },
  fail: (err) => {
    console.error('getPhoneNumber fail', err);
  },
  complete: (res) => {
    console.info('getPhoneNumber complete', res);
  }
});

体验示意图如下：

has.getAvatarInfo

has.getAvatarInfo(Object object): void

拉起获取用户头像的功能页。使用前请参考配置Client-id。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.getAvatarInfo({
  success: (res) => {
    console.info('getAvatarInfo success', res);
  },
  fail: (err) => {
    console.error('getAvatarInfo fail', err);
  },
  complete: (res) => {
    console.info('getAvatarInfo complete', res);
  }
});

体验示意图如下：

has.getInvoiceTitle

has.getInvoiceTitle(Object object): void

拉起获取发票抬头的功能页。使用前请参考配置Client-id。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.getInvoiceTitle({
  success: () => {
    console.info('getInvoiceTitle success');
  },
  fail: (err) => {
    console.error('getInvoiceTitle fail', err);
  },
  complete: (res) => {
    console.info('getInvoiceTitle complete', res);
  }
});

体验示意图如下：

has.getDeliveryAddress

has.getDeliveryAddress(Object object): void

拉起获取收货地址的功能页。使用前请参考配置Client-id。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.getDeliveryAddress({
  success: (res) => {
    console.info('getDeliveryAddress success', res);
  },
  fail: (err) => {
    console.error('getDeliveryAddress fail', err);
  },
  complete: (res) => {
    console.info('getDeliveryAddress complete', res);
  }
});

体验示意图如下：

has.getServiceSubscription

has.getServiceSubscription(Object object): void

拉起订阅服务的功能页。使用前请参考开通推送服务。

起始版本： 1.0.12

参数：

参数为Object对象，包括以下字段。

success返回值：

示例：

has.getServiceSubscription({
  tmplIds: [''],
  success: (res) => {
    console.info('getServiceSubscription success', res);
  },
  fail: (err) => {
    console.error('getServiceSubscription fail', err);
  },
  complete: (res) => {
    console.info('getServiceSubscription complete', res);
  }
});

体验示意图如下：

UploadFile

上传的文件信息。

起始版本： 1.0.12

UploadRequestData

上传的表单数据。

起始版本： 1.0.12

UploadFileTaskState

上传任务的任务信息。

起始版本： 1.0.12

PurchaseData

包含jws格式的订单信息、订阅状态信息。

起始版本： 1.0.12

PurchaseOrderPayload

订单信息模型，支持消耗型商品、非消耗型商品和自动续期订阅商品。

起始版本： 1.0.12

SubGroupStatusPayload

订阅组相关的订阅状态信息。

起始版本： 1.0.12

SubscriptionStatus

订阅状态信息。

起始版本： 1.0.12

SubRenewalInfo

订阅的扣费计划信息。

起始版本： 1.0.12

UIWindowParameter

界面窗口参数。

起始版本： 1.0.12

Product

包含单个商品详细信息。

起始版本： 1.0.12

SubscriptionInfo

订阅信息。

起始版本： 1.0.12

SubscriptionOffer

促销信息。

起始版本： 1.0.12

PromotionalOffer

订阅商品支持的自定义优惠信息。

起始版本： 1.0.12

示例

示例1

加载本地网页。

// xxx.ets
import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    Column() {
      AtomicServiceEnhancedWeb({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

示例2

加载在线网页。

// xxx.ets
import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    Column() {
      AtomicServiceEnhancedWeb({ src: 'https://www.example.com', controller: this.controller })
    }
  }
}

示例3

NavDestination容器中加载网页。

// xxx.ets
import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';
@Builder
export function WebComponentBuilder(name: string, param: Object) {
  WebComponent()
}
@Component
struct WebComponent {
  navPathStack: NavPathStack = new NavPathStack();
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    NavDestination() {
      AtomicServiceEnhancedWeb({
        src: $rawfile("index.html"),
        controller: this.controller,
        navPathStack: this.navPathStack
      })
    }
    .onReady((context: NavDestinationContext) => {
      this.navPathStack = context.pathStack;
    })
  }
}

示例4

设置onMessage()事件回调。

// xxx.ets
import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController, OnMessageEvent } from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    Column() {
      AtomicServiceEnhancedWeb({
        src: $rawfile("index.html"),
        controller: this.controller,
        // H5页面点击“发送消息”后，再点击“返回上一页”，触发该回调
        onMessage: (event: OnMessageEvent) => {
          console.info(`onMessage data = ${JSON.stringify(event.data)}`);
        }
      })
    }
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- 引入JS SDK文件 -->
<script src="../js/aseweb-sdk.umd.js" type="text/javascript"></script>
<body>
<h1>JS SDK - postMessage()</h1>
<br/>
<button type="button" onclick="postMessage({ name: 'Jerry', age: 18 });">发送消息</button>
<br/>
<button type="button" onclick="back();">返回上一页</button>
</body>
<script type="text/javascript">
    function postMessage(data) {
        // JS SDK提供的发送消息接口
        has.asWeb.postMessage({
            data: data,
            callback: (err, res) => {
                if (err) {
                    console.error(`postMessage error err. Code: ${err.code}, message: ${err.message}`);
                } else {
                    console.info(`postMessage success res = ${JSON.stringify(res)}`);
                }
            }
        });
    }
    function back() {
        // JS SDK提供的Router路由回退接口
        has.router.back({
            delta: 1
        });
    }
</script>
</html>

示例5

设置网页加载事件回调。

// xxx.ets
import {
  AtomicServiceEnhancedWeb,
  AtomicServiceEnhancedWebController,
  OnErrorReceiveEvent,
  OnHttpErrorReceiveEvent,
  OnPageBeginEvent,
  OnPageEndEvent
} from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    Column() {
      AtomicServiceEnhancedWeb({
        src: $rawfile('index.html'),
        controller: this.controller,
        // 网页加载遇到错误时触发该回调
        onErrorReceive: (event: OnErrorReceiveEvent) => {
          console.info(`onErrorReceive event=${JSON.stringify({
            requestUrl: event.request?.getRequestUrl(),
            requestMethod: event.request?.getRequestMethod(),
            errorCode: event.error?.getErrorCode(),
            errorInfo: event.error?.getErrorInfo()
          })}`);
        },
        // 网页加载遇到HTTP资源加载错误时触发该回调
        onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => {
          console.info(`onHttpErrorReceive event=${JSON.stringify({
            requestUrl: event.request?.getRequestUrl(),
            requestMethod: event.request?.getRequestMethod(),
            responseCode: event.response?.getResponseCode(),
            responseData: event.response?.getResponseData(),
          })}`);
        },
        // 页面开始加载，触发该回调
        onPageBegin: (event: OnPageBeginEvent) => {
          console.info(`onPageBegin event=${JSON.stringify({
            url: event.url
          })}`);
        },
        // 页面加载完成，触发该回调
        onPageEnd: (event: OnPageEndEvent) => {
          console.info(`onPageEnd event=${JSON.stringify({
            url: event.url
          })}`);
        }
      })
    }
  }
}

示例6

AtomicServiceEnhancedWeb跟AtomicServiceEnhancedWebController的使用示例。

// xxx.ets
import {
  AtomicServiceEnhancedWeb,
  AtomicServiceEnhancedWebController,
  OnErrorReceiveEvent,
  OnHttpErrorReceiveEvent,
  OnPageBeginEvent,
  OnPageEndEvent,
  OnMessageEvent,
  OnLoadInterceptEvent,
  OnProgressChangeEvent
} from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State darkMode: WebDarkMode = WebDarkMode.On;
  @State forceDarkAccess: boolean = true;
  @State mixedMode: MixedMode = MixedMode.None;
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  @State num: number = 1;
  build() {
    Column() {
      Button('accessForward').onClick(() => {
        console.info(`accessForward = ${this.controller.accessForward()}`);
      })
      Button('accessBackward').onClick(() => {
        console.info(`accessBackward = ${this.controller.accessBackward()}`);
      })
      Button('accessStep').onClick(() => {
        console.info(`accessStep = ${this.controller.accessStep(1)}`);
      })
      Button('forward').onClick(() => {
        this.controller.forward();
        console.info('forward success');
      })
      Button('backward').onClick(() => {
        this.controller.backward();
        console.info('backward success');
      })
      Button('refresh').onClick(() => {
        this.controller.refresh();
        console.info('refresh success');
      })
      Button('loadUrl').onClick(() => {
        this.controller.loadUrl('https://www.baidu.com/');
        console.info('loadUrl success');
      })
      Button('深色模式').onClick(() => {
        this.forceDarkAccess = !this.forceDarkAccess;
      })
      Button('mixedMode').onClick(() => {
        this.mixedMode = this.mixedMode == MixedMode.None ? MixedMode.All : MixedMode.None;
      })
      Button('点击').onClick(() => {
        console.info(`getUserAgent = ${this.controller.getUserAgent()}`);
        console.info(`getCustomUserAgent = ${this.controller.getCustomUserAgent()}`);
        this.controller.setCustomUserAgent('test' + this.num++);
        console.info(`getUserAgent after set = ${this.controller.getUserAgent()}`);
        console.info(`getCustomUserAgent after set = ${this.controller.getCustomUserAgent()}`);
      })
      AtomicServiceEnhancedWeb({
        src: 'https://www.example.com',
        mixedMode: this.mixedMode,
        darkMode: this.darkMode,
        forceDarkAccess: this.forceDarkAccess,
        controller: this.controller,
        onControllerAttached: () => {
          console.info("onControllerAttached call back success");
        },
        onLoadIntercept: (event: OnLoadInterceptEvent) => {
          console.info("onLoadIntercept call back success " + JSON.stringify({
            getRequestUrl: event.data.getRequestUrl(),
            getRequestMethod: event.data.getRequestMethod(),
            getRequestHeader: event.data.getRequestHeader(),
            isRequestGesture: event.data.isRequestGesture(),
            isMainFrame: event.data.isMainFrame(),
            isRedirect: event.data.isRedirect(),
          }))
          return false;
        },
        onProgressChange: (event: OnProgressChangeEvent) => {
          console.info("onProgressChange call back success " + JSON.stringify(event));
        },
        onMessage: (event: OnMessageEvent) => {
          console.info("onMessage call back success " + JSON.stringify(event));
        },
        onPageBegin: (event: OnPageBeginEvent) => {
          console.info("onPageBegin call back success " + JSON.stringify(event));
        },
        onPageEnd: (event: OnPageEndEvent) => {
          console.info("onPageEnd call back success " + JSON.stringify(event));
        },
        onHttpErrorReceive: (event: OnHttpErrorReceiveEvent) => {
          console.info("onHttpErrorReceive call back success " + JSON.stringify(event));
        },
        onErrorReceive: (event: OnErrorReceiveEvent) => {
          console.info("onErrorReceive call back success " + JSON.stringify(event));
        }
      })
    }
  }
}

示例7

设置嵌套滚动。

import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';
@Entry
@Component
struct AtomicServiceNestedScroll {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  @State mode: string = 'PARALLEL模式（点击切换）';
  @State nestedScroll: NestedScrollOptions | NestedScrollOptionsExt = {
    scrollForward: NestedScrollMode.PARALLEL,
    scrollBackward: NestedScrollMode.PARALLEL
  };
  build() {
    Scroll() {
      Column() {
        Text("嵌套AsWeb-头部")
          .height("15%")
          .width("100%")
          .fontSize(30)
          .backgroundColor(Color.Yellow)
        Button(this.mode)
          .margin({ top: 10, bottom: 10 })
          .onClick(() => {
            if (!(this.nestedScroll as NestedScrollOptions).scrollForward) {
              this.mode = 'SELF_FIRST模式（点击切换）';
              this.nestedScroll = {
                scrollForward: NestedScrollMode.SELF_FIRST,
                scrollBackward: NestedScrollMode.SELF_FIRST
              }
            } else {
              this.mode = 'PARENT_FIRST模式（点击切换）';
              this.nestedScroll = {
                scrollUp: NestedScrollMode.PARENT_FIRST,
                scrollDown: NestedScrollMode.PARENT_FIRST
              }
            }
          })
        AtomicServiceEnhancedWeb({
          src: 'https://www.example.com',
          controller: this.controller,
          nestedScroll: this.nestedScroll
        })
        Text("嵌套AsWeb-尾部")
          .height("15%")
          .width("100%")
          .fontSize(30)
          .backgroundColor(Color.Yellow)
      }
    }
  }
}

示例8

向网页发送消息。

import { AtomicServiceEnhancedWeb, AtomicServiceEnhancedWebController } from '@atomicservice/ascfapi';
@Entry
@Component
struct WebComponent {
  @State controller: AtomicServiceEnhancedWebController = new AtomicServiceEnhancedWebController();
  build() {
    Column() {
      Button('postMessage').onClick(() => {
        this.controller.postMessage('string to H5');
      })
    }
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- 引入JS SDK文件 -->
<script src="../js/aseweb-sdk.umd.js" type="text/javascript"></script>
<body>
<h1>JS SDK - onMessage()</h1>
<script type="text/javascript">
  has.asWeb.onMessage((data) => {
    console.info('[H5] asweb H5收到消息:', data);
  });
</script>
</html>