H5 project
First of all, in the H5 project, you need to download weixin-js-sdk and html2canvas. weixin-js-sdk is to use some APIs of wx in the project, and html2canvas is to draw the base64-bit image of your page through canvas.
npm install --save weixin-js-sdk
npm install --save html2canvas
import wx from 'weixin-js-sdk'
import html2canvas from 'html2canvas'Note that using weixin-js-sdk should be signed, which allows the backend to generate interfaces to obtain
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接口列表
});
})Then start taking screenshots, and pass the base64 bit image to the applet
//点击图标或者按钮
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 })
});
},Special attention should be paid to the postMessage of the applet, which will trigger and receive the message at a specific time (backup of the applet, component destruction, sharing). Only in these three cases can the applet get the data sent by H5, which is disgusting!
applet project
The applet uses the web-view to embed the H5 project to obtain data and call the WeChat picture sharing API to save and forward friends.
The applet jumps to the embedded H5 page, and then operates in the web-view page
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);
},
})
},
Do not convert it to an online address, use let filePath: wx.env.USER_DATA_PATH + '/test.png', it should work (not fully tested), but the simulator is not working, real machine debugging can be displayed, I At the beginning, the emulator could not come out, so I thought it would not work, so I asked the backend to write the interface and convert it into an online address (note: the online address must be the address in the whitelist of the applet!!!).
displayed results
