uni-app打开外部链接方式汇总(h5&app)–uniapp在app内打开美团领券链接
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上还是无法正常授权，暂时未解决权限问题，后续若能解决再来补充解决方案
腾讯云开发者
