小程式webview跳轉頁面後沒有返回按鈕完美解決方案

TSY發表於2018-09-22
WebView

隨著小程式越來越火爆，使一個產品如果只有公眾號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跳轉頁面後沒有返回按鈕的問題。

轉載請註明出處：www.jianshu.com/p/a7bb1a826… 作者：TSY

喜歡的話，可以關注下我的微信公眾號

微信公眾號

相關文章