微信小程序和webview通信踩坑（表单篇）

背景

为了适配多端小程序，通用的功能一般采用webview的方式引入小程序，这次的移动管理端也不例外。

需求

h5表单的地图选择功能。如下所示：

可行性分析

方案：

1. 引入第三方地图
2. 使用微信sdk的地图选择功能
3. 采用跳转至小程序，使用小程序中的地图

分析：

1. 方案一采用第三方地图在浏览器中没有问题，但是通过小程序的webview打开会出现提示无法打开该页面，大概率和小程序安全业务域名相关，先不考虑该做法。
2. 方案二采用微信sdk直接拉起地图，但是经查询没有选择位置的方法，只有定位自身位置和打开地图的方法，也不考虑该做法。
3. 方案三在小程序中单独写一个地图页面用来选择地图，选择完后进行和h5通信，实现该功能。（适合）

方案定为第三种，主要的难点在小程序和h5如何通信以及保留通信完成后原先填写的表单数据。

具体实现

• webviewH5 --> miniProgram

通过js调用微信JSSDK的wx.miniProgram.navigateTo方法跳转到小程序的指定页面并且把参数当做query带给小程序原生页面。

• miniProgram --> webviewH5

webview组件存在一个src属性, 用于展示指定的h5页面,通过操作当前src的hash值，当前组件上的页面是不会刷新的，webview的h5页面利用hashchange监听事件获取小程序传过来的值。

注意点：

• webview 中的 console 并不会再微信开发者工具的控制台打印，alert才可以，打开了微信开发者工具中的 webview 的调试工具，那么 console和 alert 都不会执行。（大坑，开发效率特别低，建议不使用webview开发调试工具，只通过alert调试）
• hash改变虽然当前组件上的页面是不会刷新的，但是js需要重新调用，也就是说useState会清空，form表单会清空。需要在跳转到小程序页面前保存当前的form所有的状态数据，可以保存在redux或者浏览器本地存储，在小程序跳转回h5的时候取出重新setState。
• h5页面在跳转到小程序的时候将当前页面的完整url传递至小程序，实测获取当前h5页面完整url传递至小程序，query并不会成功，需要单独处理。

具体难点代码层面（Taro+react）

• map页面具体实现

import Taro, {
   
    getCurrentPages, useRouter } from '@tarojs/taro';

const Map = () => {
   
   
  const {
   
    params } = useRouter();
  const {
   
    src, isParty, type, id } = useRouter().params; // 分别获取path以及所有的query
  Taro.getLocation({
   
   
    type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度
    success: ({
    
     latitude, longitude }) => {
   
   
      Taro.chooseLocation({
   
   
        latitude,
        longitude,
        success: (res) => {
   
   
          const pages =