uni-app打開(kāi)外部鏈接方式總結(jié)(h5和app)
目錄
- 問(wèn)題描述
- 方案1
- 方案2
- 方案3
- 方案4
- 總結(jié)
問(wèn)題描述
在應(yīng)用中打開(kāi)一個(gè)外部的html頁(yè)面,即完整http鏈接的頁(yè)面。h5通過(guò)window.open或是內(nèi)嵌iframe基本都沒(méi)有問(wèn)題,本文主要針對(duì)app端的方法進(jìn)行匯總,不涉及到小程序端。
方案1
使用uni-app的擴(kuò)展組件 uni-link,使用參考文檔uni-app官網(wǎng)
該組件的行為是在app內(nèi)打開(kāi)外部瀏覽器,在h5打開(kāi)新網(wǎng)頁(yè)。
方案2
方案1app端打開(kāi)外部瀏覽器,在使用體驗(yàn)上會(huì)有一種割裂感
查看uni-link的源碼,發(fā)現(xiàn)app端調(diào)用的是plus.runtime.openURL方法,
可以在這個(gè)基礎(chǔ)上進(jìn)行優(yōu)化,使用plus.runtime.openWeb替代app打開(kāi),這個(gè)方法會(huì)新開(kāi)內(nèi)置窗口打開(kāi)頁(yè)面,而且自帶標(biāo)題欄和返回,安卓端的隱私協(xié)議文件(androidPrivacy.json)的內(nèi)容中a標(biāo)簽調(diào)用的即是這個(gè)方法
void plus.runtime.openWeb(url);
參數(shù):url: ( String ) 必選 要打開(kāi)的URL地址 ,僅支持http/https地址
注意標(biāo)題會(huì)讀取載入html的title屬性,如果沒(méi)有的話標(biāo)題顯示為空
方案3
使用app-plus的webview模塊api進(jìn)行管理,
plus.webview.open( url, id, styles, aniShow, duration, showedCB )或是plus.webview.create( url, id, styles, extras );
這兩個(gè)方法都支持通過(guò)style屬性控制標(biāo)題欄的樣式,如果不設(shè)置標(biāo)題文字,則讀取加載的html的title屬性,具體參數(shù)支持比較多,參考文檔??????????????HTML5+ API Reference
const wv = plus.webview.open(query.src, "webview", {
titleNView: {
autoBackButton: true,
titleColor: "#fff",
backgroundColor: "#0045c4",
titleAlign: "center",
},
})
// wv.show()
該方案存在問(wèn)題是返回操作在ios和安卓上不太一致,還可能會(huì)清除uni-app的頁(yè)面路由管理???????,不建議使用
方案4
使用uni-app的webview組件進(jìn)行加載,及新建一個(gè)路由頁(yè)面,/pages/webview,內(nèi)容只放一個(gè)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實(shí)現(xiàn),但是dom嵌套層級(jí)太多,不方便控制寬高,所以這里就直接按條件編譯,在h5中用iframe。uni-app官方也是推薦h5中使用iframe。
app的標(biāo)題欄需要通過(guò)pages.json來(lái)控制,如下參考,具體文檔見(jiàn)???????uni-app官網(wǎng)
{
"path": "webview/index",
"style": {
"app-plus": {
"titleNView": {
"backgroundColor": "#0045c4",
"titleAlign": "center",
"titleSize": "16px",
"backButton": {
"fontSize": "20px",
"fontWeight": "bold"
}
}
}
}
}
這里titleNView的設(shè)置和方案3api的參數(shù)基本一致
總結(jié)
到此這篇關(guān)于uni-app打開(kāi)外部鏈接方式(h5和app)的文章就介紹到這了,更多相關(guān)uni-app打開(kāi)外部鏈接內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!

網(wǎng)公網(wǎng)安備