Update method in the article belongs to black technology, the principle is to use small program API back to the previous page, and then back there is no history, and then exit the program; But recently the small program should update the BUG in the API, this method and can not be used, back if there is no history, will be back to the home page, will not exit the program, as described in the official document, but why before the exit, I think it is a bug.

Problems arise

The Web-View component is a function supported by wechat applet version 1.6.4, which is used to host the container of web pages, and will automatically spread the whole applet page. However, personal and overseas types of small programs are temporarily not supported.

The project I worked on created a new applet in order to open up channels on the applet. This applet has only one page. The code in the page is very simple, which is a Web-View component with its SRC set to the original H5 site.

The applet can run normally and can use the original functions of H5, but there is an awkward point — in the ios system, there is no back button in the upper left corner of the applet page;

You may be wondering, our project also uses a Web-View component, why does ours have one?

In fact, this situation needs to meet the following conditions:

  • The applet home page is the page that contains the Web-View component

If the applittle has only one page, there is no back button in the top left corner (on ios). To exit the applittle, you can only exit from the “circle” button in the top right corner. On Android, you can exit from the applittle via the back button on your phone. If there are multiple pages of a small program that jump to each other, there is a back button in the upper left corner (under ios system). Your project has a back button, because of the jump, the page hosting the Web-View component must not be the home page of the small program.

Resolution strategy

Analysis of the reason, in fact, is no history jump, only one page, the solution is very simple, is to add a blank page as the home page, when entering the home page, immediately jump to the Web-View page; But you have to do something in the code, you can’t make it jump all the time, when the user goes back from the Web-view, you should exit the applittle;

/ / app. Js code
App({
    onHide() {
        this.data.webShowed = false;
    },
    data: {
        webShowed: false // Mark whether the web-view page has already been displayed}});Copy the code
<! -- home WXML code -->
无
Copy the code
// Home page js code
var app = getApp();
Page({
    onShow() {
        // If the web-view page is already displayed, go back, otherwise go to the Web-view page
        if(! app.data.webShowed) { wx.navigateTo({url: '/pages/web-view/web-view'})}else {
            wx.navigateBack({
                delta: 1}); }}})Copy the code
<! -- webview page WXML code -->
<web-view src="url"></web-view>
Copy the code
// Web-view page js code
Page({
    onShow() {
        var app = getApp();
        app.data.webShowed = true;// The tag has already displayed the Web-view page}})Copy the code

The above code can solve the small program upper left corner no back button problem;

Do you have any questions

But the problem is only half solved. Here’s what you can do:

  • After opening the small program, trigger the [forward] operation on the page, and forward the small program to any wechat contact. After successful forwarding, click the wechat forward message to reopen the small program; At this point you will find, ah!! Why is there a back button? !!!!!

This problem is related to applets forwarding, because our applets only have two pages: Home page, web-view page, the user triggered forwarding can only be in the Web-view page (because the home page will jump or go back when entering, and cannot be presented in front of the user), forwarding out, will take the address of the current page as the open address, so click wechat to forward the message will enter the Web-View page, but not the home page; Instead of entering the home page, it directly enters the Web-View page, which is equivalent to that the Web-View page is the home page, and the problem is back to the top. Therefore, the solution is to configure forwarding Settings, so that the address of the forwarded page is the home page.

// Web-view page js code
Page({
    data: {
        src: ' '
    },
    onShow() {
        wx.showShareMenu({
            withShareTicket: true
        })

        app.data.webShowed = true;
    },
    onShareAppMessage() {
        return {
            title: 'Share title'.path: '/pages/index/index' // The address of the page opened after sharing}}})Copy the code