小程序内嵌h5，生成海报以及分享问题

一、h5调用小程序分享存在的问题

1. 内嵌h5页面，小程序只支持默认导航栏（透明导航不支持）

2. 内嵌h5页面，无法点击唤起分享功能，可通过引导用户右上角分享

（仅小程序 button按钮<button opentype="share">可以分享）
官网说明

3. 需要配置业务域名，在域名根目录下添加校验文件

4. h5需要引入sdk和小程序进行交互

文档说明：https://developers.weixin.qq.com/miniprogram/dev/component/we...

小程序内嵌h5通信，只能通过特定时机，触发message事件：小程序后退、组件销毁、分享、复制链接。

生成海报方案：

h5端，点击生成海报按钮，然后主动调用 小程序后退事件，小程序端就可以接收到触发事件，拿到图片信息。

、、、wxml
<web-view id="mywebview" src="{{h5Url}}" bindmessage="bindmessageFUN" />

、、、js

  // 接收H5传过来的值，此业务场景中分享触发
  bindmessageFUN (Data) {
    console.log('data=======', Data);
    if (Data && Data.detail && Data.detail.data) {
      const h5Data = Data.detail.data
      const imgData = h5Data[0]
      this.setData({
        h5Data
      })
      if (imgData?.type === "downloadImage") {
        this.savePic(imgData.data.base64) 
      }
    }
  },

  savePic (imgData) {
    console.log('imgData11', imgData);
    var imgSrc = imgData.replace('data:image/png;base64,', '')
    console.log('imgSrc', imgSrc);

    var save = wx.getFileSystemManager(); // 获取文件管理器对象
    var number = Math.random();
    save.writeFile({
      filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png', // 表示生成一个临时文件名
      data: imgSrc,
      encoding: 'base64',
      success: res => {
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
          success: function (res) {
            wx.showToast({
              title: '保存成功',
            })
          },
          fail: function (err) {
            console.log(err)
          }
        })
        console.log(res)
      }, fail: err => {
        console.log(err)
      }
    })

  }

分享方案
只能引导用户右上角分享，但是需要接收h5传递的封面图数据，所以需要使用异步分享方案！
触发事件流程：

1. 分享触发h5传递过来的数据
2. 根据接收的base64数据，保存图片，生成临时文件地址
3. onShareAppMessage 等待图片生成后，然后调用分享功能

const reportUrl = 'xxx.html'
Page({
  data: {
    navTitle: '学习报告',
    showH5: false,
    h5Url: 'xxx.html',
    reportId: ''
  },
  onLoad(options) {
    console.log('report', options.reportId);
    const isShare = options.isShare || 0
    this.setData({
      reportId: options.reportId,
      // h5Url: 'https://aha.aixuexi.com/home/',
      h5Url: `${reportUrl}?reportId=${options.reportId}&isShare=${isShare}&time=${Date.now()}`
    })

    console.log('h5 Url: ', this.data.h5Url)
    // this.backNavigate()
  },
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
    return new Promise( (resolve, reject) =>{
      // do request 
      if (this.data.h5Data.type === "reportShare") {
        this.savePic(this.data.h5Data.data.base64).then(imgurl => {
          console.log('imgurl.....', imgurl);
          resolve({
            title: '学习报告',
            path: `/pages/report/index?reportId=${this.data.reportId}&isShare=1`,
            imageUrl: imgurl
          })
          
        })
  
      }
   }) 
  },
  // 接收H5传过来的值，此业务场景中分享触发
  bindmessageFUN(Data) {
    // console.log('dddddd', Data);
    if (Data && Data.detail && Data.detail.data) {
      const h5Data = Data.detail.data[0]
      this.setData({
        h5Data
      })
    }
  },
  savePic(imgData) {
    // console.log('imgData11', imgData);
    return new Promise((resolve, reject) => {
      var imgSrc = imgData.replace('data:image/png;base64,', '')
      var save = wx.getFileSystemManager(); // 获取文件管理器对象
      var number = Math.random();
      const tempFilePath = wx.env.USER_DATA_PATH + '/pic' + number + '.png'

      save.writeFile({
        filePath: tempFilePath, // 表示生成一个临时文件名
        data: imgSrc,
        encoding: 'base64',
        success: res => {
          // console.log('base64===', res)
          resolve(tempFilePath)
        }, fail: err => {
          console.log(err)
        }
      })
    })

  }

})