快捷導(dǎo)航

小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案詳解

更新時(shí)間：2024年09月27日 09:56:02 作者：霹靂桃

這篇文章主要介紹了小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案,為實(shí)現(xiàn)H5頁(yè)面到小程序的無(wú)縫切換,技術(shù)方案包含使用webview交互,特別是低碼C端表單頁(yè)面的處理,需要的朋友可以參考下

一、目的

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

二、技術(shù)方案

小程序針對(duì)webview其實(shí)是出了一套數(shù)據(jù)交互的方案(postMessage)，具體可以參考官網(wǎng)web-view
但是它只有在 小程序后退、組件銷毀、分享、復(fù)制鏈接 這幾種特定情況下小程序webview中才能接收到。結(jié)果多方面研究調(diào)查，最終確定了下面的方法。
- 1.h5引入sdk，通過(guò)skd中的方法做頁(yè)面跳轉(zhuǎn)并攜帶參數(shù)，因?yàn)槲覀兪堑痛a平臺(tái)，表單是動(dòng)態(tài)的，所以這塊攜帶定位數(shù)據(jù)、組件key（數(shù)據(jù)回填時(shí)能準(zhǔn)確找到）。
- 2.在小程序做定位結(jié)束之后，重定向到一個(gè)h5的中間頁(yè)，參數(shù)拼接在url上邊，在中間頁(yè)做一下幾個(gè)處理。
  - a.獲取到url參數(shù)key和val，將key和val緩存到localStorage（分別存分兩個(gè)）
```
    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)轫?yè)面有緩存，在頁(yè)面回退之后表單值還存在，注意：在這個(gè)地方要用小程序sdk中的回退navigateBack
- 3.在表單頁(yè)監(jiān)聽localStorage，獲取localStorage中的表單值，做表單回填。
```
// 單獨(dú)頁(yè)面組件 渲染賦值
  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ù)不會(huì)觸發(fā)頁(yè)面刷新，所以可以通過(guò)修改webview的url就能實(shí)現(xiàn)了。

三、總結(jié)

1、需要三個(gè)頁(yè)面 h5、h5中間頁(yè)、小程序
2、h5->小程序通過(guò)sdk的方法跳轉(zhuǎn) 攜帶參數(shù) 小程序在 onload 中獲取參數(shù)
3、小程序->h5中間頁(yè) 通過(guò)sdk的方法重定向攜帶路徑參數(shù) 存到story
4、h5中間頁(yè)->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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: