小程式與webview通信傳參

在小程式中，隻要每次修改代碼或者增加新的内容都是需要發版才行，常常用到與一些活動頁面，這個時候小程式提供的

webview

就可以解決這個問題，通過調用

H5

頁面，傳參完成一些常用的功能。以後每次更改的時候，隻需要修改H5頁面就行。

• 小程式webview元件對嵌入的H5頁面有要求、必須在小程式管理背景配置為合法的業務域名。

H5端

• H5頁面需要引用微信提供的官方sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>           

• 通過綁定一個點選事件去觸發一個方法給小程式通信,data就是我們需要傳的參數給小程式

wx.miniProgram.postMessage({
          data: {
            value,
            name,
            phone,
            address,
          },
        })           

小程式端

• 頁面中添加

  webview

  元件、并添加監聽事件

<web-view src="{{src}}" bindmessage='receivePostMsg'></web-view>             

• js裡面添加監聽事件,e裡面可以看到傳遞的參數，根據收到的資訊進行相應操作

receivePostMsg(e) {
    console.log(e)
  },           

通信之間的坑

• 網頁向小程式 postMessage 時，會在特定時機（小程式後退、元件銷毀、分享）觸發并收到消息。是以想收到消息的時候，就要做下上面的操作才可以。比如發消息之後，在執行個頁面回退等。
• 是以這個小程式隻能在特定的時機去觸發，需要調用一個微信發方法

  wx.miniProgram.navigateBack()

  傳回上一級頁面，然後就可以列印東西

if (name || phone || address || value) {
        wx.miniProgram.postMessage({
          data: {
            value,
            name,
            phone,
            address,
          },
        })
        wx.miniProgram.navigateBack()
      }           

• 這樣就可以解決傳參的問題。