【已失效】解決微信小程式<web-view>元件所在頁面無返回按鈕的問題

小明愛吃瓜發表於2018-02-28
微信小程式WebView元件

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' // 分享出去後開啟的頁面地址
        }
    }
})
複製程式碼

相關文章