一、目的

• 我們要就將h5切換到小程序，由于時間問題，一些頁面不得不通過webvie承接，所以這就涉及到h5和webview交互的問題。（后期把大部分需要交互的頁面遷移到小程序了，這都小問題。）
• 最重要的就是低碼c端填報頁（表單）由于技術問題無法遷移到小程序，必須通過webview承接，里邊有一個地圖定位組件需要在小程序中實現(xiàn)，最后攜帶定位數據到表單中回填，這里面有幾個關鍵點
  • 小程序定位結束，攜帶數據到表單回填的時候不刷新表單，需要保留表單已經填的內容
  • h5與小程序的數據傳遞。

二、技術方案

• 小程序針對webview其實是出了一套數據交互的方案(postMessage)，具體可以參考官網web-view

• 但是它只有在 小程序后退、組件銷毀、分享、復制鏈接 這幾種特定情況下小程序webview中才能接收到。結果多方面研究調查，最終確定了下面的方法。

  • 1.h5引入sdk，通過skd中的方法做頁面跳轉并攜帶參數，因為我們是低碼平臺，表單是動態(tài)的，所以這塊攜帶定位數據、組件key（數據回填時能準確找到）。
  • 2.在小程序做定位結束之后，重定向到一個h5的中間頁，參數拼接在url上邊，在中間頁做一下幾個處理。

    • a.獲取到url參數key和val，將key和val緩存到localStorage（分別存分兩個）

          if (route.query.key) {
            window.localStorage.setItem(loactionComponentKey, `${route.query.key}`)
            window.localStorage.setItem(
              `${loactionComponentValuePrefix}${route.query.key}`,
              `${route.query.value}`
            )
          }
      

    • b.然后做goback，因為頁面有緩存，在頁面回退之后表單值還存在，注意：在這個地方要用 小程序sdk中的回退navigateBack

  • 3.在表單頁監(jiān)聽localStorage，獲取localStorage中的表單值，做表單回填。

  // 單獨頁面組件 渲染賦值
    window.addEventListener('storage', function (e) {
      const locKey = window.localStorage.getItem(loactionComponentKey)
  
      if (!locKey) return
  
      const value = window.localStorage.getItem(`${loactionComponentValuePrefix}${locKey}`)
  
      if (locKey && value) {
        // setValue
        window.localStorage.removeItem(`${loactionComponentValuePrefix}${locKey}`)
        window.localStorage.removeItem(loactionComponentKey)
      }
    })
  

• 如果是hash模式的路由跳轉用不著這么麻煩，改變路徑參數不會觸發(fā)頁面刷新，所以可以通過修改webview的url就能實現(xiàn)了。

三、總結

• 1、需要三個頁面 h5、h5中間頁、小程序
• 2、h5->小程序 通過sdk的方法跳轉 攜帶參數 小程序在 onload 中獲取參數
• 3、小程序->h5中間頁 通過sdk的方法重定向 攜帶路徑參數 存到story
• 4、h5中間頁->h5 使用sdk方法回退
• 5、h5 監(jiān)聽story，做數據處理

到此這篇關于小程序與內嵌webview的數據交互的文章就介紹到這了,更多相關小程序與內嵌webview數據交互內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！