Applet webview page after the jump button does not return perfect solution

With more and more popular applet, if only to make a product 公众号H5页面and APPappear less perfect, always feel this tour program to catch small car traffic, what will was lacking, and my heart is very awkward. In this drive, the company also decided where I got in the car.

However, if you want to follow routine procedures to re-write a small word, but also feel the time to pay the cost is too great, very worthwhile. Ever since, his mind a flash, remembered the applet looks like a younger brother called webview, webviewis what, literally meaning page view (from Baidu translation). The official definition is so:

web-view component is a container can be used to carry the page, the applet is automatically covered the entire page. Personal type with overseas applet does not support the type of use.

Simply say that we can put in a small program <web-view>components to link our HTMLpage of. In other words, the public micro-channel already written numbers H5页面can be directly moved to a small program. One line of code to complete the transfer of a small number of public programs, one line of code we let one more traffic entrance, one line of code to solve the re-development of a small program code problems. It really is exciting thought dead.

When I interest rushing into the link webview, the real project like this :( link address with your own domain name instead of ^ _ ^)

<!--微信小程序index.wxml-->
<web-view src="https://www.hxkj.vip/"></web-view>

But when the jump page, click. Aigo, I went, I was really shocked, and no upper left corner of the page! ! Back button! ! Cause not go back, can only be kept down point, there is no turning back, this is not funny it. . .

It was like a scheme, that is, each H5页面will add a navigation bar button with the return, but thought for a moment, this solution is not desirable, because the head of a small program has a navigation bar, plus a word it is very uncoordinated, you can use one word to describe - to burst [ugly]. Decisively abandoned!

Looked at other small programs, if it is found that the page jump two small programs, then top left corner of the second page there will be the return button. Then we can think of, if the second page also put a webviewcomponent used to display links after the jump, is not it the perfect solution yet? So the question is, how the home page click on the link spread to the second page of it?

We can H5页面use jssdkthe H5page to jump to the page method applet wx.miniProgram.navigateTo, and then carry a weburlparameter:

//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);
               }
          })
      }
}

Then in the second page of the applet webview.jsreception weburlparameters, pay attention to the configuration page links to share:

// pages/webview/webview.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url:''
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      url: options.weburl //获取H5页面传递过来的weburl
    });
  },

  /**
   * 用户点击右上角分享***【特别注意这里，配置分享链接一定要给首页链接，要不然别人点进来又是没有返回按钮的哦】***
   */
  onShareAppMessage: function () {
    return {
      path: '/pages/index/index'
    }
  }
})

And assigned to webview.wxmlthe srcproperty

<!--pages/webview/webview.wxml-->
<web-view src="{{ url }}"></web-view>

Okay, so, on the applet perfect solution to `webview`the problem is not the return button after the jump page.

Please indicate the source: https://www.jianshu.com/p/a7bb1a826548
Author: TSY
personal space: https://www.hxkj.vip

Like, you can look at my micro-channel public number

Micro-channel public number