需求效果如圖
微信圖片_20190129175413.png
- 點(diǎn)擊【分享單品】按鈕進(jìn)入海報生成頁面
微信圖片_20190129175453.png
- 小程序海報頁面渲染單品信息逮刨、用戶頭像和昵稱和小程序碼（這是小程序頁面按元素渲染不是一整張圖片）溶诞，所以點(diǎn)擊【生成圖片保存到相冊】生成圖片保存到本地進(jìn)行蔫巩，再進(jìn)行海報圖片分享傳播
方案關(guān)鍵點(diǎn)
海報圖片基本是后端生成纤勒，前端渲染頁面外加將生成的圖片下載保存到本地相冊赋朦，讓用戶自行分享辉川。
小程序關(guān)鍵代碼
- 點(diǎn)擊【單品分享】
首先按鈕綁定跳轉(zhuǎn)海報頁面的事件，按鈕上綁上dataset（事件源組件上由data-開頭的自定義屬性組成的集合）寒锚，用wx.navigateTo{(...)} 跳轉(zhuǎn)海報頁面的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,
})
}
- 進(jìn)入海報頁
獲得參數(shù)呻粹，傳參發(fā)送請求，獲取商品信息和小程序碼的圖片地址苏研，然后數(shù)據(jù)綁定渲染到頁面上等浊。
點(diǎn)擊生成海報按鈕，首先傳參發(fā)送請求摹蘑，成功請求后筹燕，獲取后端生成的海報頁圖片的地址，wx.downloadFile,wx.saveImageToPhotosAlbum將圖片保存到本地衅鹿。
var imgSrc = "..."http://(請求成功接受到從后端生成的海報頁圖片的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("用戶一開始拒絕了撒踪，我們想再次發(fā)起授權(quán)")
console.log('打開設(shè)置窗口')
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('獲取權(quán)限成功，給出再次點(diǎn)擊圖片保存到相冊的提示大渤。')
} else {
console.log('獲取權(quán)限失敗制妄，給出不給權(quán)限就無法正常使用的提示')
}
}
})
}
},
complete: function() {
wx.hideLoading();
}
})
}
})
- 掃海報圖上的小程序碼進(jìn)入顯示具體單品信息
前面第二步里提交參數(shù)獲取小程序碼渲染顯示到小程序頁面的時候有個參數(shù)是用戶的id。
識別海報上小程序碼進(jìn)入頁面的時候泵三，在onload里options的scene耕捞，獲取到二維碼中的 scene 值，傳scene給接口發(fā)送請求烫幕，解析里面的各項參數(shù)俺抽，從而跳轉(zhuǎn)到具體商品頁面，渲染呈現(xiàn)较曼。
