这篇“uniapp打开外部链接方式有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“uniapp打开外部链接方式有哪些”文章吧。
问题描述
在应用中打开一个外部的html页面，即完整http链接的页面。h6通过window.open或是内嵌iframe基本都没有问题，本文主要针对app端的方法进行汇总，不涉及到小程序端。
方案1
使用uni-app的扩展组件 uni-link，使用参考文档uni-app官网
该组件的行为是在app内打开外部浏览器，在h6打开新网页。
方案2
方案1app端打开外部浏览器，在使用体验上会有一种割裂感
查看uni-link的源码，发现app端调用的是plus.runtime.openURL方法，
可以在这个基础上进行优化，使用plus.runtime.openWeb替代app打开,这个方法会新开内置窗口打开页面，而且自带标题栏和返回，安卓端的隐私协议文件(androidPrivacy.json)的内容中a标签调用的即是这个方法
void plus.runtime.openWeb(url);参数：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属性，具体参数支持比较多，
const wv = plus.webview.open(query.src, 'webview', { titleNView: { autoBackButton: true, titleColor: '#fff', backgroundColor: '#0045c4', titleAlign: 'center', }, }) // wv.show()该方案存在问题是返回操作在ios和安卓上不太一致，还可能会清除uni-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组件在h6中也是使用iframe实现，但是dom嵌套层级太多，不方便控制宽高，所以这里就直接按条件编译，在h6中用iframe。uni-app官方也是推荐h6中使用iframe。
app的标题栏需要通过pages.json来控制
{ "path": "webview/index", "style": { "app-plus": { "titleNView": { "backgroundColor": "#0045c4", "titleAlign": "center", "titleSize": "16px", "backButton": { "fontSize": "20px", "fontWeight": "bold" } } } } }这里titleNView的设置和方案3api的参数基本一致。
以上就是关于“uniapp打开外部链接方式有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
