小程序内嵌H5页面，需要在H5页面进行截图保存和转发给朋友的操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序内嵌H5页面，需要在H5页面进行截图保存和转发给朋友的操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

H5项目

首先在H5项目内，你需要下载 weixin-js-sdk 和 html2canvas，weixin-js-sdk是为了在项目内可以使用wx的一些API，html2canvas是通过canves画出你页面的base64位图片。

npm install --save weixin-js-sdk

npm install --save html2canvas

import wx from 'weixin-js-sdk'
import html2canvas from 'html2canvas'

注意，使用weixin-js-sdk应该是要签名的，这个让后端去生成接口去获得

that.$store.dispatch('xxx/xxxxxxxxxx(自己的接口)', { url: `http://mp.weixin.qq.com?params='${process.env.VUE_APP_URL}/h5/'` }).then(res => {
      wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'xxxxxxxxxxxxx', // 必填，唯一标识
        timestamp: res.timestamp, // 必填，生成签名的时间戳    
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: ['checkJsApi', 'updateAppMessageShareData'] // 必填，需要使用的JS接口列表
      });
    })

然后开始截图，把base64位图片传给小程序

    //点击图标或者按钮
    share () {
      let save = this.$refs.allImage //需要截图的DOM对象
      html2canvas(save, { useCORS: true }).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.href = url
        wx.miniProgram.postMessage({
          data: {
            imgBase64: this.href// 要传给小程序的信息
          }
        })

        let baseHttpUrl = `${process.env.VUE_APP_URL}/h5/#/xxxxxxx`
        // 小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息
        //重定向当前页面
        wx.miniProgram.redirectTo({
          url: `/xxxx/xxxx/xxxx`
        })
        //回退上一页
        // wx.miniProgram.navigateBack({ delta: 1 })
      });
    },

特别需要注意小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息，只能在这三种情况下小程序才能获得H5传过来的数据，就很恶心！

小程序项目

小程序使用web-view内嵌H5项目，获取数据调用微信图片分享API去做保存和转发朋友功能

小程序跳转到内嵌的H5页面，然后web-view页面内操作

      const url = `${baseURL}/h5/#/xxxxxx`    
      wx.navigateTo({
          // 跳转到webview页面
          url: `/pages/mine/carbon/carbonCodeDetail?url=${encodeURIComponent(url)}`,
      });

 <web-view src="{{url}}" bindmessage="postMessage"></web-view>

  onLoad: function (options) {
    // console.log(options,'跳转')
    // console.log(decodeURIComponent(options.url));
    let newUrl=decodeURIComponent(options.url)
    // console.log(newUrl)
    this.setData({
      url: newUrl, // 从跳转页面中传过来的url在options中可以拿到
    });
  },
  
    // 接收H5页返回的信息
  postMessage(e) {
    this.setData({
      imgBase64: e.detail.data[0].imgBase64, // 从跳转页面中传过来的url在options中可以拿到
    });
    if (this.data.imgBase64) {
         //把base64位图片转为线上地址
        app.globalData.$http.uploadBase64({baseData:             this.data.imgBase64,dirCode:'1016'}).then(res => {
          if(res) {
            this.toSave(res);
          }
        })
    }
  },
  toSave(filePath) {
    const that = this
    wx.downloadFile({ // wx.downloadFile的作用就是把线上地址转化为临时路径
      url: filePath, 
      success: function(res) {
        console.log(res);
        wx.showShareImageMenu({
          path: res.tempFilePath, //wx.showShareImageMenu必须使用本地路径或者临时路径
          success: function(res) {
            console.log(res);
            
          },
          fail: function(res) {
            console.log(res);
            
          },
        })
      },
      fail: function(res) {
        console.log(res);
      },
    })
  },

不转化为线上地址，使用let filePath: wx.env.USER_DATA_PATH + '/test.png'，应该也可以（没有完全测试过），但模拟器是不行的，真机调试是可以显示的，我这里一开始模拟器出不来，所以以为不行，就让后端写了接口转化为线上地址（注意：线上地址必须是小程序白名单内的地址！！！）。

显示的结果

小程序内嵌H5页面，需要在H5页面进行截图保存和转发给朋友的操作文章来源地址https://www.toymoban.com/news/detail-493236.html