H5与小程序数据交互

 功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。

 采用小程序webview的方式，可以复用大部分H5页面，但H5调用团歼的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ，但不在本文讨论范围内）：

 (1) 获取照片，可通过html的input标签实现；

 (2) 获取经纬度，可通过webview的url拼接参数实现；

  (3) 人脸识别，可通过H5调起刷脸小程序的方式实现。

 下面主要描述下第3种情况的实现方式。

 H5与小程序交互所涉及的数据部分主要包括两块：

 (1)H5如何将数据传给小程序？

   url参数拼接。

 (2)小程序如何将数据传给H5？

   wx.setStorage及wx.getStorage。

 详细流程如图所示。

 webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页档派面无法进行数据共享，导致业务功塌蠢冲能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。

首先每个emoji 表情有保存到服务器，可以通过 URL 访问，如

http://....../em001

1.将带 emoji 标签复合文本字符串（如：你好，em001），分割成纯文本和 emoji 标签文本，并装进数组。方法如下

/**

  根据说说内容，将文本、表情切分为数组

  @param {string} content 说说源内容

*/

function messageContentArray  (content) {

  const reg = /\[em[2-4]+\d{3}\]/g

  const emRegArr = content.match(reg)

  // 没有表情，直接返回罩野世文本内容

  if (!emRegArr) return [{type: 'text', content}]

  const indexArr = []

  const contentArr = []

  // 递增取得所有表情index

  let pos = content.indexOf(emRegArr[0])

  for (let i = 1i <emRegArr.lengthi++) {

    indexArr.push(pos)

    pos = content.indexOf(emRegArr[i], pos + 1)

  }

  indexArr.push(pos)

  indexArr.map((emIndex, i) =>{

    // 首个为表情

    if (emIndex === 0) {

      contentArr.push({type: 'emotion', source: emRegArr[i]})

    } else {

      if (i === 0) {

        // TODO：临时的处理方式，待观察内存占用情况

        for (let index = 0index <emIndexindex++) {

 物肢         contentArr.push({type: 'text', content: content[index]})

        }

        // contentArr.push({type: 'text', content: content.substr(0, emIndex)})

      } else {

        // 两个表情之间夹杂了文本

        const preEmoLocation = indexArr[i - 1] + emRegArr[i - 1].length

        const locationDiff = emIndex - preEmoLocation

        if (locationDiff >0) {

          for (let index = preEmoLocationindex <locationDiffindex++) {

            contentArr.push({type: 'text', content: content[index]})

          }

          // contentArr.push({type: 'text', content: content.substr(preEmoLocation, locationDiff)})

        }

      }

      contentArr.push({type: 'emotion', source: emRegArr[i]})

    }

  })

  const lastLocation = indexArr[indexArr.length - 1] + emRegArr[emRegArr.length - 1].length

 脊纯 if (content.length >lastLocation) {

    // contentArr.push({type: 'text', content: content.substr(lastLocation, content.length - lastLocation)})

    for (let index = lastLocationindex <content.lengthindex++) {

      contentArr.push({type: 'text', content: content[index]})

    }

  }

  return contentArr

}

2.然后在 view 标签，遍历数组

    <View className="talk-content">

            {contentArr.map((Citem, index) =>{

              if (Citem.type === 'emotion') {

              const str = Citem.source.substr(1, Citem.source.length-2)

              return <Image key={`Emotion_${index}`} className="emoji" src={'http://'+str+'.jpg'} />

              }

              const isEnter = Citem.content === '\n'

              if (isEnter) {

              // hack Text 显示单个 \n 时，会有样式问题

              return <View key={`Text_${index}`}  />

              }

              return <Text key={`Text_${index}`} className="txt" >{Citem.content}</Text>

          })}

        </View>

---