uni-app打开外部链接方式汇总

2024好事发生

这里推荐一篇实用的文章： uni-app打开外部链接方式汇总(h5&app)。

该文章详细介绍了 uniapp 打开外部链接的多种方式， 写的很不错，小编在此推荐给大家，希望能对uniapp开发的小伙伴有所帮助！。

引言

uniapp开发过程中，有时候需要能从应用内打开外部链接，因为uniapp可以打包为多端，因此打开外部链接的方式也不同，效果也不同（可能会遇到外部链接打开后权限不足等问题），如何选择适合自己的打开方式呢，本文就来详细盘点一下。

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

一、使用uni-app的扩展组件 uni-link

使用uni-app的扩展组件 uni-link， 该组件的行为是在app内打开外部浏览器，在h5打开新网页。

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

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

权限问题：app上无需授权也可以正常使用，打开的链接使用的是浏览器环境，此时的权限和在浏览器上相同，可以正常获得

使用 plus.runtime.openWeb(url); 方法可以在app中打开手机自带的默认浏览器，但在使用体验上会有一种割裂感。

好处是，能获得完整的浏览器环境。

二、使用plus.runtime.openWeb替代app打开

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

参数：url: ( String ) 必选 要打开的URL地址 ，仅支持http/https地址

注意标题会读取载入html的title属性，如果没有的话标题显示为空

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

权限问题：app上无需授权也可以正常使用，此时的权限和在浏览器上相同，可以正常获得

三、 使用plus.webview.open打开

使用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',
},
})

该方案存在问题是返回操作可能会清除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内部正常打开一个三方页面，推荐此法

​

四、 使用使用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来控制，如下参考

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

​

权限问题： app上正常授权后，h5上还是无法正常授权 ，此法可使用与一些不涉及权限的页面

​

八、总结

uniapp打开外部链接具体看使用场景来选择，推荐使用第三步的plus.webview.open打开外部链接，这个方式兼容性最强，不需要app上授权，h5上可自行完成授权。

​

​

​