uni-app打开外部链接方式汇总(h5&app)

问题描述

在应用中打开一个外部的html页面，即完整http链接的页面。h5通过window.open或是内嵌iframe基本都没有问题，本文主要针对app端的方法进行汇总，不涉及到小程序端。

方案1

使用uni-app的扩展组件 uni-link，使用参考文档uni-app官网

该组件的行为是在app内打开外部浏览器，在h5打开新网页。

方案2

方案1app端打开外部浏览器，在使用体验上会有一种割裂感
查看uni-link的源码，发现app端调用的是plus.runtime.openURL方法，

可以在这个基础上进行优化，使用plus.runtime.openWeb替代app打开,这个方法会新开内置窗口打开页面，而且自带标题栏和返回，安卓端的隐私协议文件(androidPrivacy.json)的内容中a标签调用的即是这个方法

参数：url: ( String ) 必选 要打开的URL地址 ，仅支持http/https地址
注意标题会读取载入html的title属性，如果没有的话标题显示为空

方案3

使用app-plus的webview模块api进行管理，
plus.webview.open( url, id, styles, aniShow, duration, showedCB )或是plus.webview.create( url, id, styles, extras );

这两个方法都支持通过style属性控制标题栏的样式，如果不设置标题文字，则读取加载的html的title属性，具体参数支持比较多，参考文档​​​​​​​​​​​​​​​​​​​​​​​​​​​​HTML5+ API Reference

1. const wv = plus.webview.open(query.src, 'webview', {
2. titleNView: {
3. autoBackButton: true,
4. titleColor: '#fff',
5. backgroundColor: '#0045c4',
6. titleAlign: 'center',
7. },
8. })
9. // wv.show()

该方案存在问题是返回操作在ios和安卓上不太一致，还可能会清除uni-app的页面路由管理​​​​​​​，不建议使用

方案4

使用uni-app的webview组件进行加载，及新建一个路由页面，/pages/webview，内容只放一个webview

3. <script>
4. export default {
5. data() {
6. return {
7. title: '',
8. src: '',
9. wbStyles: {
10. width: '100%',
11. height: '100%',
12. },
13. }
14. },
15. onLoad(option) {
16. this.title = option?.title
17. this.src = option?.src
18. },
19. }
20. script>

webview组件在h5中也是使用iframe实现，但是dom嵌套层级太多，不方便控制宽高，所以这里就直接按条件编译，在h5中用iframe。uni-app官方也是推荐h5中使用iframe。
app的标题栏需要通过pages.json来控制，如下参考，具体文档见​​​​​​​uni-app官网

1. {
2. "path": "webview/index",
3. "style": {
4. "app-plus": {
5. "titleNView": {
6. "backgroundColor": "#0045c4",
7. "titleAlign": "center",
8. "titleSize": "16px",
9. "backButton": {
10. "fontSize": "20px",
11. "fontWeight": "bold"
12. }
13. }
14. }
15. }
16. }

这里titleNView的设置和方案3api的参数基本一致