隨着小程序越來越火爆，使一個產品如果只有公眾號H5頁面和APP顯得不怎么完美，總感覺不搭上小程序這趟流量車，就會少了點什么，心里別扭地很。在此驅動下，我所在公司也決定趕緊上車。
但是，如果要按照小程序的套路重新寫一份的話，又感覺付出的時間成本太大了，非常的不划算。於是乎，腦子靈光一閃，想起了小程序貌似有個小弟叫webview，webview是啥，按字面意思就是網頁視圖（來自百度翻譯）。官方是這么定義的：
web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面。個人類型與海外類型的小程序暫不支持使用。
簡單的講就是我們可以在小程序內放置一個<web-view>組件來鏈接我們的HTML頁面了。也就是說，已經寫好的微信公眾號H5頁面可以直接挪到小程序了。一行代碼就完成公眾號到小程序的轉移，一行代碼就讓我們多了一個流量入口，一行代碼就解決了重新開發一套小程序代碼的難題。想到這真的是激動死了。
當我興致沖沖的把鏈接放進webview中，就像這樣：（真實項目鏈接地址，用自己的域名代替了^_^）
<!--微信小程序index.wxml-->
<web-view src="https://www.hxkj.vip/"></web-view>
但是點擊跳轉頁面的時候。唉喲，我去，我當時就真的楞了一下，頁面左上角沒有！！返回按鈕！！導致回不去了，只能不停的往下點，沒有回頭路，這不是搞笑的嗎。。。
當時想了一種方案，就是在每個H5頁面都加上一個帶返回按鈕的導航欄，但是想了一下，這種方案不可取，因為小程序的頭部已經有個導航欄了，再加一個的話就顯得非常的不協調，可以用一個字來形容——【丑到爆】。果斷棄用！
看了下其他的小程序，發現如果是兩個小程序頁面跳轉的話，第二個頁面的左上角是會有返回按鈕的。那我們可以想到，如果在第二個頁面也放個webview組件，用來顯示跳轉之后的鏈接，不就完美解決了嗎？那么問題來了，怎么把主頁點擊的鏈接傳到第二個頁面呢？
我們可以在H5頁面使用jssdk中H5頁面跳轉到小程序頁面的方法wx.miniProgram.navigateTo，然后再攜帶一個weburl參數：
//H5頁面js
navigate(modelName) { //控制頁面跳轉---小程序、公眾號、非微信跳轉方式 【modelName---vue路由名字】
this.isMiniProgram((res)=>{//判斷是否是小程序頁面的回調函數
if (res) {//小程序頁面
wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName});
} else {
this.$router.push({name: modelName});//非小程序頁面使用vue路由跳轉
}
})
},
isMiniProgram(callback) { //是否為小程序環境
//是否在微信環境
if (!isWeixin()) {
callback(false);
} else {
//微信API獲取當前運行環境
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {//小程序環境
callback(true);
} else {
callback(false);
}
})
}
}
接着在小程序第二個頁面webview.js中接收weburl參數，注意配置分享的頁面鏈接：
// pages/webview/webview.js
Page({
/**
* 頁面的初始數據
*/
data: {
url:''
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
this.setData({
url: options.weburl //獲取H5頁面傳遞過來的weburl
});
},
/**
* 用戶點擊右上角分享***【特別注意這里，配置分享鏈接一定要給首頁鏈接，要不然別人點進來又是沒有返回按鈕的哦】***
*/
onShareAppMessage: function () {
return {
path: '/pages/index/index'
}
}
})
並賦值給webview.wxml中的src屬性
<!--pages/webview/webview.wxml-->
<web-view src="{{ url }}"></web-view>
好了，這樣的話，就完美解決了小程序webview跳轉頁面后沒有返回按鈕的問題。
轉載請注明出處：https://www.jianshu.com/p/a7bb1a826548
作者：TSY
個人空間：https://www.hxkj.vip
喜歡的話，可以關注下我的微信公眾號
