鸿蒙6.0应用开发——ArkWeb和应用的跳转与拉起

在HTML页面内使用a标签的href属性自定义跳转链接。

<a class="function_item" href="arkts://pages/toOriginPage">跳转到ArkTS页面</a>

说明

开发者可以根据业务场景自行定义href，此处定义的href并不作为a标签跳转后的地址，而是会在ArkTS侧进行跳转拦截，当检测到该链接时执行自定义逻辑。

然后在Web页面中，需要在

onLoadIntercept()

回调函数中进行跳转拦截，获取跳转的url，如果与自定义的跳转链接一致，那么可以使用路由栈进行页面跳转。

NavDestination() {
Column() {
Web({
src: $rawfile('index.html'),
controller: this.controller
})
.zoomAccess(false)
.onLoadIntercept((event) => {
const url: string = event.data.getRequestUrl();
if (url === 'arkts://pages/toOriginPage') {
this.navPathStack.pop();
}
// …
})
}
}

代码逻辑走读：

在目标方配置module.json5文件，保证entities中包含entity.system.browsable、actions中包含ohos.want.action.viewData，最后再配置uris，用户可以自定义scheme，host，port以及path。具体含义可以参考：

uris标签说明

。

{
"module": {
// …
"abilities": [
{
// …
"skills": [
// …
{
"entities": [
"entity.system.browsable"
],
"actions": [
"ohos.want.action.viewData"
],
"uris": [
{
"scheme": "appScheme",
"host": "www.test.com",
"port": "80",
"path": "path1"
}
]
}
]
}
],
// …
}
}

在调用方的module.json5文件中配置

querySchemes

，标识允许当前应用进行跳转查询的URL schemes。

"querySchemes": [
"app1Scheme"
],

根据目标方的uris配置拼凑出完整的link地址，拼接方式为：scheme://host:port/path，例如上述配置对应的拉起地址为：appScheme://www.test.com:80/path1。

const link: string = "appScheme://www.test.com:80/path1";

通过

canOpenLink()

接口判断link是否可以打开，如不能打开链接开发者可以自定义响应逻辑，此处直接返回。

if (!bundleManager.canOpenLink(link)) {
return true;
}

配置拉起时的启动参数

openLinkOptions

，在该配置中可以进行参数传递以及配置appLinkingOnly属性。代码参考如下：

Navigation(this.navPathStack) {
Column() {
Web({
src: $rawfile('index.html'),
controller: this.controller
})
.zoomAccess(false)
.onLoadIntercept((event) => {
const url: string = event.data.getRequestUrl();
if (url === 'third-party://pages/toThirdApp') {
const link: string = "appScheme://www.test.com:80/path1";
if (!bundleManager.canOpenLink(link)) {
return true;
}
// Configuration parameter.
const openLinkOptions: OpenLinkOptions = {
appLinkingOnly: false,
parameters: {
name: 'test'
}
};
// Open the application using the openLink interface.
this.context.openLink(link, openLinkOptions).then(() => {
console.info('open link success.');
}).catch((err: BusinessError) => {
console.error(`open link failed. Code is ${err.code}, message is ${err.message}`);
})
}
return url !== 'resource://rawfile/index2.html';
})
}
}

代码逻辑走读：

• 构建一个应用scheme的URLconst link: string = "appScheme://www.test.com:80/path1"。
• 使用bundleManager.canOpenLink(link)检查当前应用是否可以打开该链接。如果不能，则直接返回true，表示阻止加载。
• 配置打开链接的选项const openLinkOptions: OpenLinkOptions = {…}。
• 使用this.context.openLink(link, openLinkOptions)尝试打开链接，并处理成功和失败的情况。

在HTML页面中使用a标签规定拉起指定应用的字符串。

<a class="function_item" href="arkts://pullSpeciallyApp">拉起指定类型应用</a>

在Web组件中，当匹配到对应的文本时，执行拉起指定类型的操作。

Navigation(this.navPathStack) {
Column() {
Web({
src: $rawfile('index.html'),
controller: this.controller
})
.zoomAccess(false)
.onLoadIntercept((event) => {
const url: string = event.data.getRequestUrl();
if (url === 'arkts://pullSpeciallyApp') {
const wantParam: Record<string, Object> = {
'sceneType': 1,
'destinationLatitude': 32.060844,
'destinationLongitude': 118.78315,
'destinationName': 'xx市xx路xx号',
'destinationPoiIds': {
1: '111111111111',
2: '222222222222'
} as Record<number, string>,
'originName': 'xx市xx公园',
'originLatitude': 31.060844,
'originLongitude': 120.78315,
'originPoiIds': {
1: '333333333333',
2: '444444444444'
} as Record<number, string>,
'vehicleType': 0
};
const abilityStartCallback: common.AbilityStartCallback = {
onError: (code: number, name: string, message: string) => {
hilog.error(0x0000, 'Sample', '%{public}s', 'onError code ' + code + 'name: ' + name + 'message: ' + message);
},
onResult: (result:ESObject) => {
hilog.error(0x0000, 'Sample', '%{public}s', 'onResult result: ' + JSON.stringify(result));
}
};
this.context.startAbilityByType('navigation', wantParam, abilityStartCallback);
}
return url !== 'resource://rawfile/index.html';
})
}
}

代码逻辑走读：

导航组件初始化：使用Navigation组件初始化导航路径栈this.navPathStack。

布局结构：在Navigation内部使用Column布局组件来组织子组件。

Web视图嵌入：在Column中嵌入一个Web组件，该组件加载本地HTML文件index.html，并使用this.controller控制Web视图。

缩放权限设置：通过.zoomAccess(false)禁用Web视图的缩放功能。

加载拦截：

通过.onLoadIntercept((event) => {…})监听Web视图的加载事件。

• 获取加载的URL并存储在url变量中。
• 检查url是否等于arkts://pullSpeciallyApp。
  • 如果是，构造一个导航参数对象wantParam，包含目的地、起点、车辆类型等信息。
  • 定义一个abilityStartCallback回调对象，用于处理导航启动后的错误和结果。
  • 调用this.context.startAbilityByType('navigation', wantParam, abilityStartCallback)启动导航功能。
• 返回url是否不等于resource://rawfile/index.html，决定是否继续加载其他资源。

在Web页面内配置跳转的链接地址。此处使用a标签并不意味着上传的HTML元素就是a标签，而是以它为例，理论上开发者可以用任何HTML元素绑定点击事件，通过设置window.location.href属性进行页面跳转。

<a class="function_item" href="photo://pages/selectPhoto">拉起系统应用</a>

使用系统提供的照片选择Picker进行图片的选择以及后续逻辑的开发。

Navigation(this.navPathStack) {
Column() {
Web({
src: $rawfile('index.html'),
controller: this.controller
})
.zoomAccess(false)
.onLoadIntercept((event) => {
const url: string = event.data.getRequestUrl();
if (url === 'photo://pages/selectPhoto') {
const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // Filter and select the media file type as IMAGE
photoSelectOptions.maxSelectNumber = 5; // Select the maximum number of media files
let uris: Array<string> = [];
const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
photoViewPicker.select(photoSelectOptions)
.then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
uris = photoSelectResult.photoUris;
console.info('photoViewPicker.select to file succeed and uris are:' + uris);
})
.catch((err: BusinessError) => {
console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
}
return url !== 'resource://rawfile/index3.html';
})
}
}
.hideTitleBar(true)
.navDestination(this.PageMap)

• 如果URL等于'photo://pages/selectPhoto'，则创建PhotoSelectOptions对象，设置MIME类型为图片类型，最大选择数量为5，并使用PhotoViewPicker来选择照片。
• 成功选择照片后，将照片的URI存储在uris数组中，并在控制台输出成功信息。
• 如果选择失败，则在控制台输出错误信息。