您當前位置>首頁 » 新聞資訊 » 小(xiǎo)程序相(xiàng)關 >
小(xiǎo)程序webview跳(tiào)轉頁面後₩♠♠沒有(yǒu)返回按鈕完美(měi)解決方案
發表時(shí)間(jiān)：2021-1-6
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：217
随著(zhe)小(xiǎo)程序越來(lái)越火(huǒ)爆∑∑♥，使一(yī)個(gè)産品如(rú)果隻有(yǒu)公衆号H5頁面和(hé)APP顯得(de)不(bù)怎麽完美(měi)，總感覺不(bù)搭上(shà≤✔σng)小(xiǎo)程序這(zhè)趟流量車(chē)，就(jiù)會∞×≈®(huì)少(shǎo)了(le)點什(shén)麽，心裡(lǐ)别扭地(dì)很(hěn)。在此±β驅動下(xià)，我所在公司也(yě)決定趕緊上(shàng)車(chē)。
但(dàn)是(shì)，如(rú)果要(yào)按照(¶↑zhào)小(xiǎo)程序的(de)套路(lù)重新寫一(yī)份的(de)話(huà)，又↑₹±∞(yòu)感覺付出的(de)時(shí)間(jiān)成本太大(dà)了(le)，非常的(d÷Ωα₽e)不(bù)劃算(suàn)。于是(shì)乎，腦(nǎo)子(zǐ)靈光(guāng)一(yī¥ ¶)閃，想起了(le)小(xiǎo)程序貌似有(yǒu)個(gè)小(xiǎo)•₹弟(dì)叫webview，webview是(shì)啥，按字面意思就(jiù)是(shì)網頁視Ω↕(shì)圖（來(lái)自(zì)百度翻譯）。官方是(shì)這(zhè)麽定義的(de)：φ&∞≤
web-view 組件(jiàn)是(shì)一(yī)個(gè)可(kě)以用(yò≈₹φ★ng)來(lái)承載網頁的(de)容器(qì)，會(huì)自(zì)動鋪滿整個(g↑₩≥™è)小(xiǎo)程序頁面。個(gè)人(rén)類型與海(hǎi)外(wài)類型的(d↑☆λe)小(xiǎo)程序暫不(bù)支持使用(yòng)。
簡單的(de)講就(jiù)是(shì)我們可(kě)以在小(xiǎo)>♥∏☆程序內(nèi)放(fàng)置一(yī)個(gè)<web-view>組件(jiàn)來(lái)鏈接我們的(de)HTML頁面了(le)。也(yě)就(jiù)是(shì)說(shuō)，已經寫好(hΩ₽₽©ǎo)的(de)微(wēi)信公衆号H5頁面可(kě)以直接挪到(dào)小(xiǎo)程序了(le)。一(yī)行(xíng•)代碼就(jiù)完成公衆号到(dào)小(xiǎo)程序的(de)轉移，一(yī$↓☆♦)行(xíng)代碼就(jiù)讓我們多(duō)了(le)一(y"♣®ī)個(gè)流量入口，一(yī)行(xíng)代碼就(jiù)解決了(le)重新開↔÷ε(kāi)發一(yī)套小(xiǎo)程序代碼的(de)難題。想"£✔到(dào)這(zhè)真的(de)是(shì)激動死了(le)。
當我興緻沖沖的(de)把鏈接放(fàng)進webview中，就(jiù)像這(zhè)樣：
但(dàn)是(shì)點擊跳(tiào)轉頁面的(deαδ )時(shí)候。唉喲，我去(qù)，我當時(shí)就(jiù)真的(de)楞了• ↔(le)一(yī)下(xià)，頁面左上(shàng)角沒有(yǒu)！！返回按鈕！！導緻回不(€¶≥®bù)去(qù)了(le)，隻能(néng)不(bù)停的(de)往下(xià)點•✔δ→，沒有(yǒu)回頭路(lù)，這(zhè)不(bù)是(shì)搞笑(xiào)的(de)'©嗎(ma)。。。
當時(shí)想了(le)一(yī)種方案，就(jiù)是(shì)在×↑每個(gè)H5頁面都(dōu)加上(shàng)一(yī)個(gè)帶返回按鈕的(βπ↕de)導航欄，但(dàn)是(shì)想了(le)一(yī)下(xià)，£±©這(zhè)種方案不(bù)可(kě)取，因為(wèi)小(xiǎoβ ¥)程序的(de)頭部已經有(yǒu)個(gè)導航欄了(le)，再加一(φ£♥yī)個(gè)的(de)話(huà)就(jiù)顯得¶ ≥•(de)非常的(de)不(bù)協調，可(kě)以用(yòng)一(yī)個(gè)字來δ<(lái)形容——【醜到(dào)爆】。果斷棄用(yòng)！
看(kàn)了(le)下(xià)其他(tā)的(de)小(∑σxiǎo)程序，發現(xiàn)如(rú)果是(shì)兩個(gè¥÷≈$)小(xiǎo)程序頁面跳(tiào)轉的(de)話(huà)，第二δ≠₹→個(gè)頁面的(de)左上(shàng)角是(shì↓λδ)會(huì)有(yǒu)返回按鈕的(de)。那(nà)我們可(kě)以想到≤π(dào)，如(rú)果在第二個(gè)頁面也(yě)放(fàng)個(gè)webview組件(jiàn)，用(yòng)來(lái)顯示跳(tiào)轉之後的(de)鏈接，不(bù)就(∏$≤jiù)完美(měi)解決了(le)嗎(ma)？那(n₹↓↑à)麽問(wèn)題來(lái)了(le)，怎麽把主頁點擊的(de)鏈接傳到φ≈(dào)第二個(gè)頁面呢(ne)？
我們可(kě)以在H5頁面使用(yòng)jssdk中H5頁面跳(tiào)轉到(dào)小(xiǎo)程序頁面的(γ÷©de)方法wx.miniProgram.navigateTo，然後再攜帶一(yī)個(gè)weburl參數(shù)：
//H5頁面js
navigate(modelName) { //控制(zhì)頁面跳(tiào)轉---小(xiǎo)程序、公衆号、非微(wēi)信跳(tià↔ ®βo)轉方式 【modelName---vue路(lù)由名字】
this.isMiniProgram((res)=>{//判斷是(shì)否是(shì)小(xiǎo)程序頁面的(dπ♥φφe)回調函數(shù)
if (res) {//小(xiǎo)程序頁面
wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.h∏ ♣xkj.vip/#/' + modelName});
} else {
this.$router.push({name: modelName});//非小(xiǎo)程序頁面使用(yòng)vue路(lù)♠♥★¶由跳(tiào)轉
}
})
},
isMiniProgram(callback) { //是(shì)否為(wèi)小(xiǎo)程序環境
//是(shì)否在微(wēi)信環境
if (!isWeixin()) {
callback(false);
} else {
//微(wēi)信API獲取當前運行(xíng)環境
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {//小(xiǎo)程序環境
callback(true);
} else {
callback(false);
}
})
}
}webview.js中接收weburl參數(shù)，注意配置分(fēn)享的(de)頁面鏈接：
并賦值給webview.wxml中的(de)src屬性
<!--pages/webview/webview.wxml-->
<web-view src="{{ url }}"></web-view>
好(hǎo)了(le)，這(zhè)樣的(de)話(huà)，就(jiù)完美(měi±€&)解決了(le)小(xiǎo)程序webview跳(tiào)轉π→→∞頁面後沒有(yǒu)返回按鈕的(de)問(wèn)題。
作(zuò)者：HashTang
來(lái)源：簡書(shū)
著作(zuò)權歸作(zuò)者所有(yǒu)。商業(yè)轉載請(q≈Ω ǐng)聯系作(zuò)者獲得(de)授權，非商業(yè)轉載請✔™(qǐng)注明(míng)出處。
來(lái)源：簡書(shū)
著作(zuò)權歸作(zuò)者所有(yǒu)。商業(yè)轉載請(q≈Ω ǐng)聯系作(zuò)者獲得(de)授權，非商業(yè)轉載請✔™(qǐng)注明(míng)出處。
