需求效果如图
微信图片_20190129175413.png
- 点击【分享单品】按钮进入海报生成页面
微信图片_20190129175453.png
- 小程序海报页面渲染单品信息、用户头像和昵称和小程序码（这是小程序页面按元素渲染不是一整张图片），所以点击【生成图片保存到相册】生成图片保存到本地进行，再进行海报图片分享传播
方案关键点
海报图片基本是后端生成，前端渲染页面外加将生成的图片下载保存到本地相册，让用户自行分享。
小程序关键代码
- 点击【单品分享】
首先按钮绑定跳转海报页面的事件，按钮上绑上dataset（事件源组件上由data-开头的自定义属性组成的集合），用wx.navigateTo{(...)} 跳转海报页面的url后面带上这些自定义属性的值传过去。
<view style='display:flex;flex-direction:column;justify-content:center;align-items:center;width:164rpx;' bindtap='sharePro' data-goodId='{{item.goodsId}}' data-brandId='{{item.brandId}}' data-goodsSource='{{item.goodsSource}}'>
<image src="..." style='width:40rpx;height:40rpx'></image>
<text style='font-size:22rpx;color:#777676;line-height:26rpx'>分享单品</text>
</view>
sharePro: function (event) {
var brandid = event.currentTarget.dataset.brandid;
var goodid = event.currentTarget.dataset.goodid;
var goodssource = event.currentTarget.dataset.goodssource;
wx.navigateTo({
url: '/pages/poster/poster?brandid=' + brandid + '&goodid=' + goodid + '&goodssource=' + goodssource,
})
}
- 进入海报页
获得参数，传参发送请求，获取商品信息和小程序码的图片地址，然后数据绑定渲染到页面上。
点击生成海报按钮，首先传参发送请求，成功请求后，获取后端生成的海报页图片的地址，wx.downloadFile,wx.saveImageToPhotosAlbum将图片保存到本地。
var imgSrc = "..."//(请求成功接受到从后端生成的海报页图片的url地址);
//下载文件资源到本地
wx.downloadFile({
url: imgSrc,
success: function(res) {
console.log(res);
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(data) {
console.log(data);
},
fail: function(err) {
console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("用户一开始拒绝了，我们想再次发起授权")
console.log('打开设置窗口')
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败，给出不给权限就无法正常使用的提示')
}
}
})
}
},
complete: function() {
wx.hideLoading();
}
})
}
})
- 扫海报图上的小程序码进入显示具体单品信息
前面第二步里提交参数获取小程序码渲染显示到小程序页面的时候有个参数是用户的id。
识别海报上小程序码进入页面的时候，在onload里options的scene，获取到二维码中的 scene 值，传scene给接口发送请求，解析里面的各项参数，从而跳转到具体商品页面，渲染呈现。
