uni-app打开外部链接方式汇总(h5&app)–uniapp在app内打开美团领券链接

本文主要针对app端的方法进行汇总，不涉及到小程序端。

方案1
使用uni-app的扩展组件 uni-link，或者使用plus.runtime.openUR，参考文档uni-app官网

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

查看uni-link的源码，发现app端调用的是plus.runtime.openURL方法，

也可直接使用plus.runtime.openURL方法 ，或跳转到默认浏览器打开

权限问题：app上无需授权也可以正常使用，打开的链接上可自行处理权限

方案2

方案1 打开外部浏览器，在使用体验上会有一种割裂感

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

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

这个方法大部分网页都可以，但是实测发现有部分页面的布局不正常，页面比例变大失调了，暂时没找到解决方法

权限问题：app上无需授权也可以正常使用，打开的链接上可自行处理权限

方案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

const wv = plus.webview.open(query.src, 'webview', {
titleNView: {
autoBackButton: true,
titleColor: '#fff',
backgroundColor: '#0045c4',
titleAlign: 'center',
},
})

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

其实就是需要自己处理物理返回键的逻辑，处理起来也简单，在uniapp的onBackPress事件中处理返回逻辑即可

代码示例

onBackPress(e) {
                var that = this
                if(Object.keys(this.wv).length > 0){//webview对象存在了
                    this.wv.canBack(function(e) {
                        that.canBack = e.canBack;
                    });
                    console.log('返回666'+that.canBack)
                    if ( this.canBack) {
                        this.wv.back();
                    } else {
                        // 没有可返回的页面了--关闭webview
                        this.wv.close();
                    }
                }
                return true;
            }

权限问题：app上无需授权也可以正常使用，打开的链接上可自行处理权限

备注：若不嫌处理返回逻辑麻烦，这个方案是相当完美的，能免去app授权，又能在app内部正常打开一个三方页面，推荐此法

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

<template>
<view v-if="src">
<!-- #ifdef H5 -->
<iframe width="100%" height="100%" :src="src" :title="title" />
<!-- #endif -->
<!-- #ifndef H5 -->
<web-view :webview-styles="wbStyles" :src="src" :fullscreen="false" />
<!-- #endif -->
</view>
</template>

<script>
export default {
data() {
return {
title: '',
src: '',
wbStyles: {
width: '100%',
height: '100%',
},
}
},
onLoad(option) {
this.title = option?.title
this.src = option?.src
},
}
</script>

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

{
    "path": "webview/index",
    "style": {
      "app-plus": {
        "titleNView": {
          "backgroundColor": "#0045c4",
          "titleAlign": "center",
          "titleSize": "16px",
          "backButton": {
            "fontSize": "20px",
            "fontWeight": "bold"
          }
        }
      }
    }
  }

这里titleNView的设置和方案3api的参数基本一致
权限问题： app上正常授权后，h5上还是无法正常授权，暂时未解决权限问题，后续若能解决再来补充解决方案