微信小程序-webview分享

项目背景

最近有个讨论区项目需要补充分享功能，希望可以支持在微信小程序进行分享，讨论区是基于react的h5项目，在小程序中是使用web-view进行承载的

可行性

目标是在打开web-view的页面进行分享，那就需要涉及h5和小程序的通讯问题，查看官方文档：

1. 网页向小程序 postMessage 时，可以通过bindmessage获取post的信息
2. 只有在特定的场景下才会触发bindmessage，例如小程序后退、组件销毁、分享、复制链接等，刚好满足分享的场景
   
3. h5端如何post信息
   

基于postMessage和bindmessage进行开发

h5代码

注意：我这里是为了方便演示，所以点击按钮才post内容，可以结合自身需求，也可以在加载成功就post数据

1. 环境区分：通过判断是否在小程序环境navigator.userAgent.includes(“miniProgram”)
2. 动态判断是否有miniProgram：if (!window[“wx”] || !window[“wx”].miniProgram) { return }
3. post信息

import React from "react"
import "./WebView.less"

const shareData = {
   
   
  title: "测试h5分享",
  path: "https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html",
  imageUrl: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
}

const WebView = () => {
   
   

  const handleSetShareOptions = () => {
   
   
    // 判断是否再微信小程序环境
    const userAgent = navigator.userAgent
    const isInMiniProgram =  userAgent.includes("miniProgram")
    if (!isInMiniProgram) {
   
    return }
    if (!