当前栏目
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的参数基本一致
相关文章
- 谷歌工程师概述了 Angular 的下一步计划
- 共码未来丨行业伙伴畅谈 “多端触达”,展望全球技术生态
- 前端比较简单,不需要架构?
- 看完就知道,你之前的微服务是怎么玩垮的了……
- Spring Boot 实现跨域的五种方式,总有一种适合你
- 在阿里做前端程序员,我是这样规划的
- 系统成功率99.99%+,美团CI/CD流水线引擎演进实践
- 分布式链路追踪Jaeger + 微服务Pig在Rainbond上的实践分享
- React:我们即将和后端 API 告别?
- 驱动页面性能优化的三个有效策略
- HarmonyOS自定义组件之仿微信朋友圈主页
- HDC技术分论坛:HarmonyOS新一代UI框架的全面解读
- 十个 Web 日志安全性分析工具
- 鸿蒙开源第三方组件—SwipeCaptcha_ohos2.0滑动拼图验证组件
- HarmonyOS 基础之 UI组件 (二)
- 微软承认新闻小组件存在 Bug,发布 Windows 10 周二累积更新 KB5006670:包含多项改进
- HarmonyOS自定义权限组件--你真的弄懂了权限控制了吗?
- 经典Windows组件大更新!全新Windows 11记事本曝光
- 解锁Windows 11更新带来的四大办公新姿势
- HarmonyOS基础之PageSlider和PageFlipper