微信小程序分享
目标
开发者在自有微信小程序中通过嵌入燃豆积分商城并实现自定义分享（转发），用户在点击他人转发出来的分享卡片后直接打开积分商城中的被分享页面。
实现逻辑
开发者通过微信小程序的web-view组件接入燃豆积分商城的页面后，通过web-view组件提供的bindmessage属性来接收当前H5页面的信息（包括图片，链接，说明等）；然后通过这些信息来实现自定义的分享内容。
H5推送的消息如下所示：
wx.miniProgram.postMessage({
data: {
title: '页面内容',
// 该redirect是用于打开当前积分商城H5页面的地址，把该地址通过免登接口的redirect参数传递给燃豆服务端，即可实现打开积分商城后直接抵达该页面
redirect: '%2Fgoods%3Fgoods_id%3Dce115952-45ff-402f-8d23-33d13b0be134',
// imageUrl为页面的图片，当前仅分享商品详情页时有值，其他页面都为空，建议直接使用微信小程序默认的图片展示方式即可
imageUrl: 'https://static.randou-tech.com/goods/2023/11/e725f129c58cbdbe6ddaf3a17473c88d_thumb.png',
},
});
开发者可通过bindmessage属性接收上述商城页面推送的信息，关于该属性，请查看微信小程序官方开发文档。
注意事项
- 关于推送中的redirect参数：该参数用于打开燃豆积分商城指定页面，需要配合免登接口中的redirect参数一起使用才能实现打开积分商城中指定页面，请注意推送中的redirect参数是使用了url编码后的值；
- 关于imageUrl参数：该参数当前仅商品详情页中会返回商品图的第一张图片地址，其他页面都为空，为空的情况下，建议直接使用微信小程序提供的默认方式，默认方式请查看微信小程序官方开发文档中关于图片参数为空的处理方式；
- 请开发者注意转发过程中微信小程序关于各个API或者组件的版本支持情况，进行全面测试。
小程序关键代码示例
wxml文件示例
<!-- pages/mall/mall.wxml -->
<!-- listenMsg用来监听由H5传递的信息 -->
<web-view src="{{url}}" bindmessage="listenMsg" />
js文件示例
// pages/mall/mall.js
Page({
/**
* 页面的初始数据
*/
data: {
url: '', // 燃豆积分商城的打开地址
shareParam: {
title: '默认title',
imageUrl: '默认图片',
path: '/pages/mall/mall', // 非真实地址，请开发者自行替换
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.showLoading({
title: '打开中',
})
const p = {};
if ('redirect' in options) {
// 接收到的redirect经过了url编码处理，传给开发者服务端时请注意编码问题
p['redirect'] = decodeURIComponent(options.redirect);
}
// console.log(p);
var that = this;
wx.request({
url: 'https://a.com/rd-mall/entry', // 仅为示例，并非真实的接口地址
method: 'GET',
data: p,
success(res) {
// console.log(res);
that.setData({
url: res.data.dst, // 写入可打开的地址
})
wx.hideLoading();
},
fail(err) {
console.log(err)
wx.hideLoading();
}
})
},
/**
* 监听webview推送的消息
*/
listenMsg(e) {
console.log('listenMsg', e);
const {
data
} = e.detail;
// 由于消息会多次推送，因此请使用最后一次推送的消息
this.setData({
shareParam: {
title: data[data.length - 1].title,
imageUrl: data[data.length - 1].imageUrl,
// path地址请自行修改为真实地址，请注意，data中推送的redirect经过了url编码处理，
// path的redirect参数需要在分享内容被打开后获取到，通过免登接口传递给燃豆服务端以打开对应页面
path: '/pages/mall/mall?redirect=' + data[data.length - 1].redirect,
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage(e) {
console.log('onShareAppMessage:', e, this.data.shareParam);
return this.data.shareParam;
}
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
})