一、目的

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

二、技術(shù)方案

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

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

  • 1.h5引入sdk，通過skd中的方法做頁面跳轉(zhuǎn)并攜帶參數(shù)，因?yàn)槲覀兪堑痛a平臺，表單是動態(tài)的，所以這塊攜帶定位數(shù)據(jù)、組件key（數(shù)據(jù)回填時(shí)能準(zhǔn)確找到）。
  • 2.在小程序做定位結(jié)束之后，重定向到一個h5的中間頁，參數(shù)拼接在url上邊，在中間頁做一下幾個處理。

    • a.獲取到url參數(shù)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，因?yàn)轫撁嬗芯彺?，在頁面回退之后表單值還存在，注意：在這個地方要用 小程序sdk中的回退navigateBack

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

  // 單獨(dú)頁面組件 渲染賦值
    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模式的路由跳轉(zhuǎn)用不著這么麻煩，改變路徑參數(shù)不會觸發(fā)頁面刷新，所以可以通過修改webview的url就能實(shí)現(xiàn)了。

三、總結(jié)

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

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

最新評論