叨叨兩句

昨天爬了一下午坑才出來的我向大家問好??，要說小程序基礎庫都1.9了，但是坑還是很多。一方面是由於小程序的文檔不是太友好，也許某個地方告訴你了，但是不是那麽 容易發現。另一方面，微信大佬手握9億多用戶，覺得不好用？那你愛用不用。。。今天就說說昨天爬的這個坑——

屬性

/*網頁代碼*/

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

<script>
     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) //我是網頁，獲取到來自也頁面的數據
    }
})

避坑指南

接下來就要好好說說我前面碰到的那個坑了，

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

//js

Page({
    data:{
        phone: ‘82901001010‘
    }
})

這樣做，安卓手機有很大概率獲取不到傳過去的電話號碼，因為網頁加載時路徑可能是這樣的https://localhost?phone=,導致網頁中不能通過解析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})
        
     }
})
 

導航相關接口

有時我們在頁面內完成一定動作後，需要引導小程序跳轉到其他頁面，這時就需要在頁面內調用這些接口(引入JSSDK1.3.2)。這些接口作為方法被放在在wx.miniprogram下面。參考官方文檔

WTF小程序之<web-view>