WTF小程序之

叨叨兩句

昨天爬了一下午坑纔出來的我向你們問好😶，要說小程序基礎庫都1.9了，可是坑仍是不少。一方面是因爲小程序的文檔不是太友好，也許某個地方告訴你了，可是不是那麼 容易發現。另外一方面，微信大佬手握9億多用戶，以爲很差用？那你愛用不用。。。今天就說說昨天爬的這個坑——

web-view的兩個屬性

web-view 有兩個src,bindmessage兩個屬性，src用來告訴web-view顯示的網頁地址，bindmessage用來監聽頁面發送給小程序的消息。換句話說就是，小程序能夠經過src屬性藉助url向web-view中的頁面傳遞參數，而頁面能夠經過bindmessage向小程序傳遞數據,從而實現小程序和網頁的通訊。舉個 bindmessage的例子：

傳值的時候有個要注意的地方，好比咱們想傳一個對象，假設叫obj，給小程序,那在調用postMessage方法時參數應該寫成{data: obj},而不能直接傳obj,不然小程序拿不到網頁上傳的數據，參看下面的例子:

/*網頁代碼*/

//在頁面內引入JSSDK1.32
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

<script>
     wx.miniProgram.postMessage({ data: {msg: '我是網頁' }})//第一層應該是data,不能寫成wx.miniProgram.postMessage({msg: '我是網頁' })
</script>


/*小程序代碼*/
//wxml

<web-view src="https://mp.weixin.qq.com/" bindmessage="msgHandler"></web-view>

//js
Page({
    ...
    msgHandler(e){
        console.log(e.detail.data) //我是網頁，獲取到來自也頁面的數據
    }
})

bindmessge的回調函數也不是實時觸發的，根據官方文檔，回調函數會在特定的時機執行，特定的時機包括（小程序後退、組件銷燬、分享）。。。因此不要覺得函數沒有觸發，多是時機未到啊

src屬性避坑指南

接下來就要好好說說我前面碰到的那個坑了，這個坑跟src屬性有關。在實際應用中，web-view不免要動態綁定頁面路徑，這樣能夠經過url查詢字符串的方式給頁面傳值。舉個例子，假設頁面須要從小程序裏面獲取電話號碼，那代碼可能像下面這樣：

<web-view src="https://localhost?phone={{phone}}"></web-view>

//js
Page({
    data:{
        phone: '82901001010'
    }
})

然而這樣作，你可能就掉進了坑裏，儘管看上去沒設麼問題，可是安卓手機有很大機率獲取不到傳過去的電話號碼，由於網頁加載時src屬性多是這樣的https://localhost?phone=,致使網頁中js不能經過解析url獲得小程序傳過來的電話號碼。因此，

正確作法是在js中完成字符串的拼接，而後調用setData方法：

//wxml
<web-view src="{{url}}"></web-view>

//js
Page({
    data:{
        url: ''
     }
    ...
    onLoad(options){
           let phone = options.phone;//獲取到小程序其餘頁面傳來的電話號碼；

           let url = `http://localhost?phone=${phone}`;

           this.setData({url : url})
        
     }
})

吞查詢字符串

假設你的小程序有一個webview，這個web-view打開什麼頁面是徹底由別的頁面指定的：

//web-view頁面
<web-view src="{{src}}">

// js

onLoad(options){
    this.setData({src: options.src})
}

在頁面B中有個navigator，須要導航到web-view並打開一個帶查詢字符串的網頁:

<navigator url="/web-view/web-view?src=http://www.baidu.com?wd=1"></navigator>

這裏，你但願傳遞的url是http://www.baidu.com?wd=1，結果傳過去倒是http://www.baidu.com，也就是查詢字符串被吞掉了，解決辦法是首先encodeURIComponent，而後在web-view中再decodeURIComponent

encodeURIComponent('http://www.baidu.com?wd=1')  // "http%3A%2F%2Fwww.baidu.com%3Fwd%3D1" 2018-7-7更新

導航相關接口

有時咱們在頁面內完成必定動做後，須要引導小程序跳轉到其餘頁面，這時就須要在頁面內調用這些接口(引入JSSDK1.3.2)。這些接口做爲方法被放在在wx.miniProgram下面。下面的這個圖給出了微信的JSSDK所建立的wx命名空間下的一些方法名，這些方法的具體用法請參考官方文檔，這裏就不介紹了。

最後的最後，web-view裏面儘可能減小和小程序的通訊，儘可能不要跑單頁面（服務器可能會重定向的微信受權頁面，這時候單頁面就要哭了），不說了，我要去用wxml重寫vue的頁面了