# 8、打开外部链接
审批里面有很多打开外部链接的场景,有当前容器打开,也有唤起端上打开形式。
# 内部 webview 容器打开
该场景需要使用到基础组件 webview,需要使用请仔细阅读说明文档。
项目中添加一个 app-webview
页面
<template>
<view class="app-container">
<web-view v-if="src" :src="src"></web-view>
<app-loading v-else />
</view>
</template>
<script>
/**
* webview 打开三方网页
*/
export default {
data() {
return {
src: ''
}
},
onLoad(option) {
this.src = `${option.url}`
if (option.title) {
bz.setNavigationBarTitle({ title: option.title })
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
在需要打开三方页面的地方,跳转到该页面路由即可
bz.navigateTo({
url: `/pages/app-webview/index?title=数据导出&url=${encodeURIComponent(thirdLink)}`
})
1
2
3
2
3
注意: web-view 组件的特性,需要配置可信域名,否则将被安全拦截
先前往开发者后台配置网页的可信域名:
注意:web-view 组件打开的容器,与 BossHi 是隔离的,即内部 h5 不能使用 jsSDK 调用端上的能力
# 端上打开形式
为了不受上面束缚,也可以选择使用端上打开的形式。 此时我们需要借助的基础能力是 API
openSchema。
目前该 API
只支持 AppLink
的链接,我们封装好 AppLink url
后,传入 openSchema
, 即可让端上执行 AppLink
的逻辑。
移动端可新开一个 webview
打开该 url
, PC
端可侧边栏打开该 url
;也可以创建一个独立窗口打开该 url
。
具体 AppLink
的能力可参看 applink访问指定URL
注意: pc 端需要区分 qa 环境和正式环境的 applink 域名