<noframes id="tfbvr">
<listing id="tfbvr"></listing>

        <track id="tfbvr"></track>

          <th id="tfbvr"></th>

            <th id="tfbvr"></th>

              <form id="tfbvr"></form>

                <form id="tfbvr"><thead id="tfbvr"><menuitem id="tfbvr"></menuitem></thead></form>

                首頁 > 專題 > 微信 > 正文

                微信小程序webview與h5通過postMessage實現實時通訊的實現

                2020-02-25 01:09:27
                字體:
                來源:轉載
                供稿:網友

                在做 React Native 應用時,如果需要在 App 里面內嵌 H5 頁面,那么 H5 與 App 之間可以通過 Webview 的 PostMessage 功能實現實時的通訊,但是在小程序里面,雖然也提供了一個 webview 組件,但是,在進行 postMessage 通訊時,官方文檔里面給出了一條很變態的說明:

                網頁向小程序 postMessage 時,會在特定時機(小程序后退、組件銷毀、分享)觸發并收到消息。e.detail = { data },data 是多次 postMessage 的參數組成的數組
                這里面已經說的很明白了,不管我們從 H5 頁面里面 postMessage 多少次,小程序都是收不到的,除非:

                  用戶做了回退到上一頁的操作 組件銷毀 用戶點擊了分享

                這里面其實我沒有完全說對,官方其實說的是 小程序后退,并沒有說是用戶做回退操作,經過我的實測,確實人家表達得很清楚了,我們通過微信官方的SDK調起的回退也是完全可行的:

                wx.miniProgram.navigateBack()

                大體思路

                從上面的分析和實測中我們可以知道,要實現無需要用戶操作即可完成的通訊,第三種情況我們是完全不需要考慮了的,那么來仔細考慮第 1 和第 2 種場景。

                第 1 種方式:回退

                當我們想通過網頁向小程序發送數據,同時還可以回退到上一個頁面時,我們可以在 wx.miniProgram.postMessage 之后,立馬調用一次 wx.miniProgram.navigateBack(),此時小程序的操作是:

                  處理 postMessage 信息 回退到上一頁

                我們在處理 postMessage 的時候做一些特殊操作,可以將這些數據保存下來

                第 2 種方式:組件銷毀

                這是我感覺最合適的一種方式,可以讓小程序拿到數據,同時還保留在當前頁面,只需要銷毀一次 webview 即可,大概的流程就是:

                  小程序 postMessage 小程序 navigateTo 將小程序頁面導向一個特殊的頁面 小程序的那個特殊頁面立馬回退到 webview 所在的頁面 webview 所在的頁面的 onShow 里面,做一次處理,將 webview 銷毀,然后再次打開 觸發 onMessage 拿到數據 H5 頁面再次被打開

                這種方式雖然變態,但是至少可以做到實時拿到數據,同時還保留在當前 H5 頁面,唯一需要解決的是,在做這整套操作前,H5 頁面需要做好狀態的緩存,要不然,再次打開之后,H5 的數據就清空了。

                第 1 種方式:通過回退,將數據提交給小程序之后傳遞給 webview 的上一頁面

                這種方式實現起來其實是很簡單的,我們現在新建兩個頁面:

                sandbox/canvas-by-webapp/index.js

                const app = getApp();Page({ data: {  url: '',  dimension: null,  mime: '', }, handleSaveTap: function() {  wx.navigateTo({   url: '/apps/browser/index',   events: {    receiveData: data => {     console.log('receiveData from web browser: ', data);     if (typeof data === 'object') {      const { url, mime, dimension } = data;      if (url && mime && dimension) {       this.setData({        url,        dimension,        mime,       });       this.save(data);      }     }    }   }  }) }, save: async function({ url, mime, dimension }) {  try {   await app.saveImages([url]);   app.toast('保存成功!');  } catch (error) {   console.log(error);   app.toast(error.message || error);  } },});            
                
                發表評論 共有條評論
                用戶名: 密碼:
                驗證碼: 匿名發表
                <noframes id="tfbvr">
                <listing id="tfbvr"></listing>

                      <track id="tfbvr"></track>

                        <th id="tfbvr"></th>

                          <th id="tfbvr"></th>

                            <form id="tfbvr"></form>

                              <form id="tfbvr"><thead id="tfbvr"><menuitem id="tfbvr"></menuitem></thead></form>

                              亚洲国产综合无码一区二区BT下... 9420高清完整版在线观看免费 国产CHINESEHDXXXX... 黄 色 免 费 成 人 A片 欧美性受XXXX黑人XYX性爽