# 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

在需要打开三方页面的地方,跳转到该页面路由即可

  bz.navigateTo({
    url: `/pages/app-webview/index?title=数据导出&url=${encodeURIComponent(thirdLink)}`
  })
1
2
3

注意: web-view 组件的特性,需要配置可信域名,否则将被安全拦截

先前往开发者后台配置网页的可信域名:

image.png

注意:web-view 组件打开的容器,与 BossHi 是隔离的,即内部 h5 不能使用 jsSDK 调用端上的能力

# 端上打开形式

为了不受上面束缚,也可以选择使用端上打开的形式。 此时我们需要借助的基础能力是 API openSchema

目前该 API 只支持 AppLink 的链接,我们封装好 AppLink url 后,传入 openSchema , 即可让端上执行 AppLink 的逻辑。

移动端可新开一个 webview 打开该 url , PC 端可侧边栏打开该 url;也可以创建一个独立窗口打开该 url

具体 AppLink 的能力可参看 applink访问指定URL

注意: pc 端需要区分 qa 环境和正式环境的 applink 域名

最后更新于 : 7/20/2023, 9:03:05 PM