【已失效】解決微信小程序組件所在頁面無返回按鈕的問題

2018-6-15 更新
文中方法屬於黑科技，原理在於利用小程序api後退到上一頁面，而再後退就沒有歷史了，進而退出程序；
可是最近小程序應該更新了api中的bug，此方法以及不能使用，後退時若是沒有歷史了，就會退到首頁，不會退出程序，如官方文檔中所述的，可是爲何以前會退出，我想那是個bug吧。

問題出現

<web-view>組件是微信小程序1.6.4版本開始支持的功能，用以承載網頁的容器，會自動鋪滿整個小程序頁面。可是我的類型與海外類型的小程序暫不支持使用。

我所在的項目爲了在小程序上開闢渠道，新建了一個小程序，這個小程序只有一個頁面，頁面中的代碼很簡單，就是一個<web-view>組件，將其src設置爲原有的h5站點；

小程序是能夠正常跑起來，可使用h5的原有功能，可是卻遇到了一個尷尬點——在ios系統中，小程序頁面左上角沒有返回按鈕；

你可能在納悶，咱們項目也用了<web-view>組件啊，咱們的怎麼就有呢？

其實出現這個狀況，須要知足這個條件：

• 小程序首頁就是包含<web-view>組件的頁面

若是小程序只有一個頁面，那它的左上角是沒有返回按鈕的（ios系統下），退出小程序只能從右上角的「圓圈」按鈕退出，安卓系統也能夠經過手機的返回按鈕退出。
若是小程序存在多個頁面，互相之間發生過跳轉，那左上角是有返回按鈕的（ios系統下），大家的項目中有返回按鈕，就是由於發生過跳轉，承載<web-view>組件的頁面必定不是小程序首頁。

解決策略

分析其緣由，其實就是無歷史跳轉，只有一個頁面，解決方式也很簡單，就是加一個空頁面做爲首頁，當進入首頁時，立刻跳轉到<web-view>頁；
可是代碼上要作些處理，不能讓它總跳轉，當用戶從<web-view>後退時，應該退出小程序；

//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頁了
    }
})

上述代碼能夠解決小程序左上角無返回按鈕的問題；

還有問題

可是問題只解決了一半，你能夠嘗試一個操做：

• 打開小程序後，觸發頁面中的【轉發】操做，將小程序轉發給任意微信聯繫人，轉發成功後，點擊微信轉發消息會從新打開小程序；此時你會發現，誒！！返回按鈕怎麼有沒有了？！！

這個問題跟小程序的轉發有關係，由於咱們小程序只有兩個頁面：首頁，web-view頁，用戶觸發轉發只可能在web-view頁（由於首頁進入就會跳轉或者後退，沒法呈如今用戶面前），轉發出去時，會拿當前頁面地址做爲打開地址，故點擊微信轉發消息後會進入web-view頁，而非首頁；
沒有進首頁，直接進入了web-view頁，也就等同於web-view頁就是首頁了，問題又回到最上面的狀況了，因此，解決方法就是配置轉發設置，讓轉發出去的頁面地址是首頁便可；

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

        app.data.webShowed = true;
    },
    onShareAppMessage() {
        return {
            title: '分享標題',
            path: '/pages/index/index' // 分享出去後打開的頁面地址
        }
    }
})