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标签调用的即是这个方法
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属性，具体参数支持比较多，参考文档HTML5+ API Reference
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组件在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的参数基本一致
总结
到此这篇关于uni-app打开外部链接方式(h5和app)的文章就介绍到这了,更多相关uni-app打开外部链接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS仿百度自动下拉框模糊匹配提示 的相关资料,需要的朋友可以参考下2016-07-07
这两天看书看到了函数式编程那节，感觉学到了挺多东西，之前看别人代码都写的挺漂亮，现在我写的代码是有点乱，所以还是要学习下别人的编程模式2017-03-03
javascript使用location.search的示例
本文介绍javascript 使用location.search获取当前地址栏参数的实例2013-11-11
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧2015-11-11
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，有各人总结也有网上热心网友的方法，这里简单地总结一下。2015-08-08
本文主要介绍了webpack之基础打包优化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<BR>2022-02-02
这篇文章主要介绍了一篇文章搞定JavaScript类型转换(面试常见)，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
ArrayBuffer Uint8Array Blob与文本字符相互转换示例
这篇文章主要为大家介绍了ArrayBuffer Uint8Array Blob与文本字符相互转换示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
先来看一下几个常用浏览器的拦截设置2010-02-02
这篇文章主要介绍了TypeScript中的类型保护，对类型保护感兴趣的同学，可以参考下2021-04-04
最新评论