小程序跳轉H5頁面沒有返回按鈕解決方案

公司做了一個小程序，使用webview搭建；頁面全部開發完畢后，領導說這個我們得嵌入某某H5活動頁。一想，這不很簡單。直接把h5頁面地址給我不就好了嗎。然而問題來了，發現下圖的問題了嗎？？？缺少返回按鈕

 

 

 想要返回首頁，只能叉掉。重新進入。。。

后來想到的辦法是這樣的，在h5頁面增加判斷，如果是小程序跳轉過來，都要增加一個返回按鈕。完美解決~開心。然后頁面變成了這樣

 

 

 這。。。無力吐槽了。接着找解決辦法吧。

后來一想，我可以在h5端判斷是否是小程序環境，如果是在小程序環境下，就調用小程序的接口跳轉到小程序二級頁面通過webview顯示h5頁面，否則還是走vue-router的跳轉，使用wx.miniProgram.navigateTot跳轉到小程序。傳輸一個weburl的參數，？號之前的是跳轉小程序頁面地址，之后是小程序需要跳轉到H5的地址

　　　　isWeixin() { var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        },
        isMiniProgram(callback) { //是否為小程序環境
            //是否在微信環境
            if (!this.isWeixin()) {
                callback(false);
            } else {
                //微信API獲取當前運行環境
                wx.miniProgram.getEnv((res) => {
                    if (res.miniprogram) { //小程序環境
                        callback(true);
                    } else {
                        callback(false);
                    }
                })
            }
        },
        //點擊跳轉
        openOrder(){
            this.isMiniProgram((res) => { //判斷是否是小程序頁面的回調函數
                if (res) { //小程序頁面
                    wx.miniProgram.navigateTo({
                        url: `../page/login/login?weburl=${this.$_config.URL.member}&type=1&source=a`
                    });
                } else {
                    window.location.href = `${this.$_config.URL.member}?type=1&source=a`
                }
            })
        },

在小程序端接收這個地址

// index.js
// 獲取應用實例
const app = getApp()

Page({
  data: {
    arrurl:['https://www.baidu.com'],
    url:'',
    arr:[]
  },
  onLoad(options){
    if(options.weburl){
      for(var index in options){
        if(index == 'weburl'){
          this.setData({
            arrurl:[...this.data.arrurl,`${options[index]}?`]
          })
        }else{
          this.setData({
            arr:[...this.data.arr,`${index}=${options[index]}&`]
          })
        }
      }
      var strurl = ''
      var str = ''
      for(var i=0;i<this.data.arrurl.length;i++){
        strurl += this.data.arrurl[i]
      }
      for(var i=0;i<this.data.arr.length;i++){
        str += this.data.arr[i]
      }
      this.setData({
        url:strurl.concat(str)
      })
    }
  },
   /**
  * 用戶點擊右上角分享【配置分享鏈接一定要給首頁鏈接，要不然別人點進來沒有返回按鈕】
  */
  onShareAppMessage: function () {
  　　return {path: '/pages/index/index'}
  }
})

 

在跳轉小程序的頁面中設置../pages/login/login

<web-view src="{{url}}"></web-view>

 

小程序項目結構

 

 

 

 

好了，小程序跳轉H5頁面沒有返回按鈕的問題解決完了（這個方法還解決了一個跳轉的時候有空白頁的問題）