小程序 转发、分享商品功能：分享商品的实时信息 |
您所在的位置：网站首页 › 京东商品分享链接怎么弄 › 小程序 转发、分享商品功能：分享商品的实时信息 |
小程序 转发、分享商品功能：分享商品的实时信息
|
小程序 转发、分享商品功能：分享商品的实时信息
需求
在商品页面点击【分享】按钮时，在弹出的分享提示框中，显示商品的名字，并在展示的图片中显示对应的商品实时信息，已售剩余等等 实现思路这个功能需要前端和后台配合实现。 【后台】：商品图片添加对应商品的详情数据，生成后添加到 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 } }, |
【本文地址】
今日新闻 |
推荐新闻 |