[Disabled] Solve the problem that there is no back button on the page where the WeChat applet <web-view> component is located

2018-6-15 update
proposed method belongs to the black technology, the principle is to use a small program api back to the previous page, and then there will be no back history, and then exit the program;
however recently applet should be updated in the api bug, this method And can not be used, if there is no history when going back, it will return to the home page, will not exit the program, as described in the official documentation, but why did it exit before, I think that is a bug.

There was a problem

The <web-view> component is a function supported by WeChat Mini Program version 1.6.4. The container used to host web pages will automatically fill the entire Mini Program page. However, personal programs and overseas programs are not supported.

In order to open up channels in the applet, the project I am working on has created a new applet. This applet has only one page. The code on the page is very simple, it is a <web-view> component, and its src is set to the original h5 Site

The applet can run normally, you can use the original function of h5, but encountered an awkward point- in the ios system, there is no return button in the upper left corner of the applet page ;

You may be wondering, our project also uses the <web-view> component, why do we have it?

In fact, this condition needs to be met:

• The applet home page is the page that contains the <web-view> component

If the applet has only one page, there is no return button in the upper left corner (under the ios system), and the exit applet can only be exited from the "circle" button in the upper right corner, and the Android system can also be exited through the return button of the mobile phone.
If there are multiple pages in the applet, and there has been a jump between each other, then there is a back button in the upper left corner (under the ios system), and there is a back button in your project. It is because a jump has occurred and hosts <web-view > The page of the component must not be the home page of the applet.

Solution strategy

Analyze the reason, in fact, there is no historical jump, there is only one page, the solution is also very simple, is to add an empty page as the home page, when entering the home page, immediately jump to the <web-view> page;
but the code must be done For some processing, it cannot be allowed to always jump . When the user goes back from <web-view>, they should exit the applet;

//app.js代码
App({
    onHide() {
        this.data.webShowed = false;
    },
    data: {
        webShowed: false //标记web-view页面是否已经显示过了
    }
});

<!--首页wxml代码-->
无

//首页js代码
var app = getApp();
Page({
    onShow() {
        //如果已经显示过web-view页了，则执行后退操作，否则就跳到web-view页
        if (!app.data.webShowed) {
            wx.navigateTo({
                url: '/pages/web-view/web-view'
            })
        } else {
            wx.navigateBack({
                delta: 1
            });
        }
    }
})

<!--web-view 页面wxml代码-->
<web-view src="url"></web-view>

//web-view 页面js代码
Page({
    onShow() {
        var app = getApp();
        app.data.webShowed = true;//标记已经显示过web-view页了
    }
})

The above code can solve the problem of no return button in the upper left corner of the applet;

Still have problems

But the problem is only half solved, you can try an operation:

• After opening the applet, trigger the [Forward] operation on the page to forward the applet to any WeChat contact. After successful forwarding, click the WeChat forward message to reopen the applet; at this time you will find, eh! ! How come the back button? ! !

This problem is related to the forwarding of the applet, because our applet has only two pages: the home page and the web-view page. The user can only trigger the forwarding on the web-view page (because the home page will jump or go back and cannot be displayed in the In front of the user), when forwarding, the current page address will be used as the opening address, so after clicking WeChat to forward the message, it will enter the web-view page instead of the home page;
without entering the home page, directly entering the web-view page is equivalent to The web-view page is the home page, and the problem is back to the top, so the solution is to configure the forwarding settings so that the forwarded page address is the home page;

//web-view页 js代码
Page({
    data: {
        src: ''
    },
    onShow() {
        wx.showShareMenu({
            withShareTicket: true
        })

        app.data.webShowed = true;
    },
    onShareAppMessage() {
        return {
            title: '分享标题',
            path: '/pages/index/index' // 分享出去后打开的页面地址
        }
    }
})