小程序内嵌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 = urlwx.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)}`,});

  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 = thiswx.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'，应该也可以（没有完全测试过），但模拟器是不行的，真机调试是可以显示的，我这里一开始模拟器出不来，所以以为不行，就让后端写了接口转化为线上地址（注意：线上地址必须是小程序白名单内的地址！！！）。

显示的结果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！