小程序 转发、分享商品功能:分享商品的实时信息
程序员文章站
2022-06-15 16:00:07
...
小程序 转发、分享商品功能:分享商品的实时信息
需求
在商品页面点击【分享】按钮时,在弹出的分享提示框中,显示商品的名字,并在展示的图片中显示对应的商品实时信息,已售剩余等等
实现思路
这个功能需要前端和后台配合实现。
【后台】:商品图片添加对应商品的详情数据,生成后添加到 oss 上,后台添加一个接口,返回生成的图片地址链接
【前端】:向后台请求该商品的调用小程序分享接口,将得到的图片地址插入到分享的信息中
效果如图:
实现流程
小程序中的转发分享是这样实现的:
- 在
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
}
},