您好,登錄后才能下訂單哦!
這篇“uniapp打開外部鏈接方式有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“uniapp打開外部鏈接方式有哪些”文章吧。
在應(yīng)用中打開一個(gè)外部的html頁面,即完整http鏈接的頁面。h6通過window.open或是內(nèi)嵌iframe基本都沒有問題,本文主要針對(duì)app端的方法進(jìn)行匯總,不涉及到小程序端。
使用uni-app的擴(kuò)展組件 uni-link,使用參考文檔uni-app官網(wǎng)
該組件的行為是在app內(nèi)打開外部瀏覽器,在h6打開新網(wǎng)頁。
方案1app端打開外部瀏覽器,在使用體驗(yàn)上會(huì)有一種割裂感
查看uni-link的源碼,發(fā)現(xiàn)app端調(diào)用的是plus.runtime.openURL方法,
可以在這個(gè)基礎(chǔ)上進(jìn)行優(yōu)化,使用plus.runtime.openWeb替代app打開,這個(gè)方法會(huì)新開內(nèi)置窗口打開頁面,而且自帶標(biāo)題欄和返回,安卓端的隱私協(xié)議文件(androidPrivacy.json)的內(nèi)容中a標(biāo)簽調(diào)用的即是這個(gè)方法
void plus.runtime.openWeb(url);
參數(shù):url: ( String ) 必選 要打開的URL地址 ,僅支持http/https地址
注意標(biāo)題會(huì)讀取載入html的title屬性,如果沒有的話標(biāo)題顯示為空
使用app-plus的webview模塊api進(jìn)行管理,
plus.webview.open( url, id, styles, aniShow, duration, showedCB )或是plus.webview.create( url, id, styles, extras );
這兩個(gè)方法都支持通過style屬性控制標(biāo)題欄的樣式,如果不設(shè)置標(biāo)題文字,則讀取加載的html的title屬性,具體參數(shù)支持比較多,
const wv = plus.webview.open(query.src, 'webview', { titleNView: { autoBackButton: true, titleColor: '#fff', backgroundColor: '#0045c4', titleAlign: 'center', }, }) // wv.show()
該方案存在問題是返回操作在ios和安卓上不太一致,還可能會(huì)清除uni-app的頁面路由管理,不建議使用
使用uni-app的webview組件進(jìn)行加載,及新建一個(gè)路由頁面,/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組件在h6中也是使用iframe實(shí)現(xiàn),但是dom嵌套層級(jí)太多,不方便控制寬高,所以這里就直接按條件編譯,在h6中用iframe。uni-app官方也是推薦h6中使用iframe。
app的標(biāo)題欄需要通過pages.json來控制
{ "path": "webview/index", "style": { "app-plus": { "titleNView": { "backgroundColor": "#0045c4", "titleAlign": "center", "titleSize": "16px", "backButton": { "fontSize": "20px", "fontWeight": "bold" } } } } }
這里titleNView的設(shè)置和方案3api的參數(shù)基本一致。
以上就是關(guān)于“uniapp打開外部鏈接方式有哪些”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。