叨叨兩句
昨天爬了一下午坑才出來的我向大家問好😶，要說小程序基礎庫都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的頁面了