小程序 转发、分享商品功能：分享商品的实时信息
需求
在商品页面点击【分享】按钮时，在弹出的分享提示框中，显示商品的名字，并在展示的图片中显示对应的商品实时信息，已售剩余等等
实现思路
这个功能需要前端和后台配合实现。
【后台】：商品图片添加对应商品的详情数据，生成后添加到 oss 上，后台添加一个接口，返回生成的图片地址链接
【前端】：向后台请求该商品的调用小程序分享接口，将得到的图片地址插入到分享的信息中
效果如图：
实现流程
官方转发说明：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
小程序中的转发分享是这样实现的：
- 在
wxml 中的button 按钮上 添加open-type="share" 属性 - 用户点击的时候，触发页面中的
onShareAppMessage 方法 - 在该方法中返回一个对象
{
title: '', // 分享后的信息显示标题 | 默认是当前小程序名称
path: '/pages/mine/mine', // 用户点击分享后的信息时，进入的小程序页面路径：绝对路径 | 默认是当前页面
imageUrl: '' // 分享的信息中显示的图片，可以是程序内的图片，也可以是网络图片 | 默认是当前页面的前半部分
}对应如下：
出现的问题
按理说正常的实现方法和过程是这样的：
- 用户点击分享
- 调用 onShareAppMessage() 方法
- 在这方法里请求服务器的分享图片
- 返回得到的分享图片链接等信息即可
但这里面有个问题：如图：
这段代码是有问题的，按上面的圆圈依次执行，结束的时候 onShareAppMessage 并没有拿到需要的分享相关的参数对象。
因为小程序中的 wx.request() 请求方法是异步，并且没有设置同步的功能，该方法没有等到网络数据返回就已经执行完了。
也就是说在小程序看来，我们并没有给它传任何的参数对象，那么 title path imageUrl 这三个值就全取了默认值
效果是这样的：
解决办法
竟然无法同步执行，我们就需要想其它办法了，办法总是比困难多。
竟然无法在点击的时候去访问并请求数据，我们就需要提交把图片取到。
- 在商品详情页载入的时候，请求后台获取到分享图片链接，并存起来。
- 在用户点分享的时候直接返回对应数据即可，就是上面看到的效果。
需要思考的
- 服务器对于分享图片的存储是否会出现过多占用磁盘的情况：
- 因为分享的图片里面有实时的商品数据信息，已卖和剩余等等，就需要一直生成
- 生成的图片需要有唯一的路径信息，就需要存储起来，用户一多就会很占用磁盘
万幸的是我们使用的的阿里云oss 服务，oss 的特点是只有在用户读取图片的时候才会计费，并且没有空间限制，也就是说，你尽管去生成并上传图片，计费只有在用户分享的时候才会出现。
这样也就不用考虑磁盘占用过多的问题了
/**
* 商品分享
*/
onShareAppMessage: function () {
let that = this;
let product = this.data.product;
let productInfo = `${product.name}\n￥${product.price}`;
util.request(api.GoodsShare, {
id: that.data.product.id
}, "POST").then(res => {
return {
title: productInfo,
imageUrl: res
}
})
},// 页面载入的时候执行这个方法获取分享用的图片地址
// 获取转发商品用的图片
getSharePic(id){
let that = this;
util.request(api.GoodsShare, {
id: id
}, "POST").then(res => {
that.setData({
shareImageUrl: res
})
})
},
/**
* 商品分享
*/
onShareAppMessage: function () {
let that = this;
let product = this.data.product;
let productInfo = `${product.name}\n￥${product.price}`;
return {
title: productInfo,
imageUrl: that.data.shareImageUrl
}
},
