小程序-<web-veiw>的使用（歷史頁面返回問題）

小程序官方文檔真是不敢恭維啊，<web-view>的坑很多吧史，而且網(wǎng)上的資料也是少之又少吠各，決定寫一下<web-view>的使用。

<web-view>的基本使用

<web-view>組件的提供的兩個屬性：
1.src屬性 : 向 <web-view> 傳遞鏈接和參數(shù)欠动；
2.bindmessage屬性：頁面通過該屬性向小程序傳遞數(shù)據(jù),從而實(shí)現(xiàn)小程序和網(wǎng)頁的通信永乌；
了解<web-view>更多信息
<web-view>使用時的特性：
1.web-view 組件是一個可以用來承載網(wǎng)頁的容器，每個頁面只能有一個<web-view/>，<web-view/>會自動鋪滿整個頁面翅雏，并覆蓋其他組件（除系統(tǒng)的navigationbar和tabbar）圈驼；
2.如果里邊有使用其他基礎(chǔ)組件，那這些組件將被<web-view>組件覆蓋枚荣；
3.你的主/子域名都需要添加到“微信公眾平臺->設(shè)置->開發(fā)設(shè)置->業(yè)務(wù)域名”里邊（一個賬號下業(yè)務(wù)域名允許添加20個）碗脊；
4.在iOS中，若存在JSSDK接口調(diào)用無響應(yīng)的情況橄妆，可在<web-view/>的src后面加個“#wechat_redirect”解決;
5.個人類型與海外類型的小程序暫不支持使用;
src屬性的使用

// index.wxml 代碼如下：

<web-view src='https://baidu.com'></web-view> // 這里的鏈接也可以改成動態(tài)的

運(yùn)行以上代碼即可查看加載網(wǎng)頁效果衙伶。

注意：在應(yīng)用中我們有時會動態(tài)去綁定參數(shù)，然而坑就有可能出現(xiàn)了害碾。動態(tài)綁定參數(shù)的方法有兩種：

我們一般情況下會想到可以通過url查詢字符串的方式給頁面?zhèn)髦凳妇ⅲ簿褪侵苯邮褂?Mustache 語法（雙大括號）將變量包起來放在src屬性的字符串鏈接后邊直接拼接上，比如我們要傳一個“id”參數(shù)慌随，代碼如下：

<web-view src='https://baidu.com?id={{id}}'></web-view>

然而這樣做芬沉，你可能就掉進(jìn)了坑里，盡管看上去沒什么問題阁猜，但是安卓手機(jī)有很大概率獲取不到我們傳過去的參數(shù)值丸逸，因?yàn)榫W(wǎng)頁加載時src屬性可能是這樣的“https://baidu.com?id=”,導(dǎo)致網(wǎng)頁中js不能通過解析url得到小程序傳過來的“id”。所以剃袍，
2.正確的動態(tài)傳參方法：在index.js文件中黄刚，將想要傳遞的參數(shù)和鏈接拼接完成，然后通過setData()方法更新頁面鏈接民效，達(dá)到動態(tài)傳參的效果憔维，代碼如下：

// index.js
Page({
  data: {
    url: "",
  },
  
  onLoad: fucntion(options) {
    let vId = options.id; // 上個頁面?zhèn)鬟f過來的id
    let tempUrl = `https://baidu.com?id=${vId}`;
    this.setData({
      url: tempUrl,
    });
  },
})

bindmessage屬性的使用
注意：1.該屬性需要與H5頁面中的script配合使用
2.發(fā)送消息時傳參問題：傳參時要選擇下圖中打?號的那種方式，不可以使用打?號的方式畏邢，否則獲取不到數(shù)據(jù)业扒。

屏幕快照 2018-05-23 上午11.06.59.png

// H5頁面中javascript代碼如下：
<!-- 引入小程序提供的JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!-- javascript中調(diào)用小程序提供的api -->
<script>
  // 調(diào)用wx發(fā)送消息方法
  wx.miniProgram.postMessage({ data: {foo: 'bar'} }) // 
</script>

// index.wxml代碼如下：
<web-view src='{{lotsUrl}}' bindmessage='msgHandle'></web-view>

// index.js代碼如下：
Page({
  // 消息接收處理方法
  msgHandle: function(e) {

  }
}

<web-view>頁面導(dǎo)航問題（歷史頁面返回）

小程序中web頁面導(dǎo)航返回按鈕問題的解決方案有兩種，第一種是通過系統(tǒng)的NavigationBar自身的返回按妞舒萎，這種是小程序自帶的返回歷史頁面的方式程储，第二種是使用JSSDK 1.3.2提供的接口返回。這里只講一下第一種方法臂寝，第二種方法暫時未實(shí)現(xiàn)虱肄。

通過系統(tǒng)的NavigationBar自身的返回按妞，實(shí)現(xiàn)網(wǎng)頁返回歷史頁面功能
需要在加載<web-view>頁面時交煞，前面還有一個頁面【這個頁面可以是一個空白頁面（想象成一個虛擬頁面）咏窿，或者是一個實(shí)際存在頁面】，此頁面用于push出<web-view>頁面素征，只有這樣才能使用NavigationBar自身的返回按妞集嵌，實(shí)現(xiàn)網(wǎng)頁返回歷史頁面功能萝挤，否則這種方法不適用你的項(xiàng)目。

前一個頁面是一個實(shí)實(shí)在在的有內(nèi)容的頁面根欧，通過其中某個按鈕push出要加載的<web-view>頁面怜珍。只需要在按鈕的事件方法里面執(zhí)行如下代碼即可：

let vId = '123'; // 這里是獲取到的id信息
wx.navigateTo({
  url: "../lots/lots?id=" + vId, // 拼接傳參到下個頁面
});

如果要加載的<web-view>頁面就是首頁，那么需要添加一個空頁面（虛擬頁面）來充當(dāng)?shù)讓邮醉摲锎郑缓筮M(jìn)來首頁立馬push出<web-view>頁面酥泛，代碼如下：

假設(shè)index頁面為首頁（空白頁/虛擬首頁），lots頁面為<web-view>頁（實(shí)際上的首頁）

// app.js 代碼如下：
App({
  data: {
    webviewIsShowed: false // 用來標(biāo)記lots頁面是否已經(jīng)顯示過了
  },
  onHide() {
    this.data.webviewIsShowed = false;  // 小程序退出時嫌拣，將變量置為初始值
  },
})

// index.js 代碼如下：

// 獲取實(shí)例變量
var app = getApp();

Page({
    onShow() {
        // 如果已經(jīng)顯示過lots頁了柔袁，則執(zhí)行后退操作，否則就跳到lots頁异逐。（后退到lots頁最后一級再點(diǎn)后退按鈕將退出小程序）
        if (!app.data.webviewIsShowed) {
            wx.navigateTo({
                url: '../lots/lots'
            })
        } else {
            wx.navigateBack({
                delta: 1
            });
        }
    }
})

// lots.wxml 代碼如下： 
<web-view src="https://baidu.com"></web-view>

// lots.js 代碼如下：

// 獲取實(shí)例變量
var app = getApp();

Page({
    onShow() {
        app.data.webviewIsShowed = true; // 修改webviewIsShowed的值捶索，標(biāo)記已經(jīng)顯示過web-view頁了
    }
})

通過以上各頁代碼的設(shè)置就可以實(shí)現(xiàn)歷史頁面返回的功能。

<web-view>頁面設(shè)置了分享功能注意事項(xiàng)
注意：（切記）如果你在<web-view>頁面設(shè)置了分享功能灰瞻，那么你需要在轉(zhuǎn)發(fā)給朋友的時候腥例，將轉(zhuǎn)發(fā)頁面的地址改為首頁，而不是默認(rèn)當(dāng)前頁的地址酝润；如果不更改燎竖，你的好友打開的時候?qū)]有返回按鈕和返回歷史頁面的功能，因?yàn)樗麄兇蜷_的是lots頁面而不是index頁面要销。

// lots.js 代碼如下：

// 獲取實(shí)例變量
var app = getApp();

Page({
    onShow() {
        // 顯示轉(zhuǎn)發(fā)菜單
        wx.showShareMenu({
            withShareTicket: true
        });

        app.data.webviewIsShowed = true; // 修改webviewIsShowed的值底瓣，標(biāo)記已經(jīng)顯示過web-view頁了
    },
    onShareAppMessage() {
        return {
            title: '分享標(biāo)題',
            path: '/pages/index/index' // 分享出去后打開的頁面地址
        }
    },
})

參考文章：
微信小程序-<web-view>
WTF小程序之<web-view>
解決微信小程序<web-view>組件所在頁面無返回按鈕的問題