知识点:
1、点击按钮弹出遮罩层
2、两个图片重叠(分享码与背景图合并)
3、长按保存图片到相册
4、点击按钮开关访问相册权限
图片准备
sharemain.png --分享主图,中间挖空,放小程序码用,底部显示长按小程序码保存图片的按钮图样
sharemain_noshouquan.png --分享主图,中间挖空,放小程序码用,底部放空
close.png --一个打叉关闭按钮
wxml
<button bindtap="share" size="mini"> 分享 </buttom>
<view class="b1" hidden="{{flag}}"> <view class="b2"> <image src="/images/sharemain.png" style="height: 390px;position: absolute;width: 302px;" wx:if="{{is_shouquan}}"/> <image src="/images/sharemain_noshouquan.png" style="height: 390px;position: absolute;width: 302px;" wx:else /> <image src="{{url}}" bindlongpress="saveImg" style="width: 195px;height: 195px;margin: 100px 54px 54px 59px;"/> </view> <button wx:if="{{!is_shouquan}}" type=\'primary\' size=\'mini\' style="z-index:9999;margin-top:40rpx" open-type="openSetting" bindopensetting=\'handleSetting\'>去授权</button> <view class="t_w" wx:if="{{!is_shouquan}}" style="margin-top:128rpx"> <cover-view class="t_image" bindtap="closeMask"> <cover-image src="/images/icons/close.png"></cover-image> </cover-view> </view> <view class="t_w" wx:else> <cover-view class="t_image" bindtap="closeMask"> <cover-image src="/images/icons/close.png"></cover-image> </cover-view> </view> </view> </view>
js
flag: true,
share(){ var c=this; c.setData({ is_shouquan:1 }) wx.showLoading({ title: \'正在生成分享码,请稍后...\', mask:true }) wx.cloud.callFunction({ // 要调用的云函数名称 name: \'getUnlimited\', data: { shop_id: c.data.shop_id} }).then(res => { c.setData({ url: res[\'result\'][0][\'fileID\'], flag: false }); wx.hideLoading(); //c.showMask(); }).catch(err => { // handle error console.log(err); wx.hideLoading(); }) }, showMask: function () { var c=this; wx.cloud.callFunction({ // 要调用的云函数名称 name: \'getUnlimited\', data: { shop_id: c.data.shop_id } }).then(res => { console.log(res); this.setData({ flag: false }) }).catch(err => { // handle error console.log(err); }) }, closeMask: function () { this.setData({ flag: true }) }, saveImg() { let url = this.data.url; var c=this; //用户需要授权 wx.getSetting({ success: (res) => { if (!res.authSetting[\'scope.writePhotosAlbum\']) { wx.authorize({ scope: \'scope.writePhotosAlbum\', success: () => { // 同意授权 this.saveImg1(url); }, fail: (res) => { //authorize:fail auth deny" 用户首次点拒绝 //authorize:fail 系统错误,错误码:-12006,auth deny 用户点了拒绝后除非清缓存(用户删小程序),否则会默认这个选项 //上述两个都要弹出引导说要授权相册 var string = res.errMsg; if (string.indexOf("auth deny")>0) { //用户点了拒绝后,以后都会出现这个错误 //c.handleSetting(c); wx.showModal({ title: \'提示\', content: \'保存图片失败,请点击下方去授权按钮开启相册访问权限再点击保存\', showCancel:false, success(res) { if (res.confirm) { c.setData({ is_shouquan:0 }) } } }) } } }) } else { // 已经授权了 this.saveImg1(url); } }, fail: (res) => { console.log(res); } }) }, saveImg1(url){ wx.getImageInfo({ src: url, success: (res) => { let path = res.path; wx.saveImageToPhotosAlbum({ filePath: path, success: function (res) { wx.showToast({ title: \'保存成功\', image: "../images/nologo.png", duration: 1500, }) }, fail: function (res) { } }) }, fail: (res) => { } }) }, handleSetting: function (e) { let that = this; wx.getSetting({ success(res) { // 对用户的设置进行判断,如果没有授权,即使用户返回到保存页面,显示的也是“去授权”按钮;同意授权之后才显示保存按钮 if (!res.authSetting[\'scope.writePhotosAlbum\']) { wx.showModal({ title: \'警告\', content: \'授权失败,请点击下方去授权按钮开启相册访问权限再点击保存!\', showCancel: false }) that.setData({ saveImgBtnHidden: false, openSettingBtnHidden: true }) } else { wx.showModal({ title: \'提示\', content: \'您已授权,请长按小程序码保存图片!\', showCancel: false }) that.setData({ saveImgBtnHidden: true, openSettingBtnHidden: false, is_shouquan: 1 }) } } }) },
云函数
函数名:getUnlimited
// 云调用~生成小程序二维码 const cloud = require(\'wx-server-sdk\') cloud.init() exports.main = async (event, context) => { var shop_id = event.shop_id; try { // 1、通过云调用生成二维码 const result = await cloud.openapi.wxacode.getUnlimited({ page:\'pages/页面地址/页面地址\', scene: shop_id }) console.log(result) // 2、上传图片到云存储 const upload = await cloud.uploadFile({ cloudPath: \'shopInfo.jpg\', fileContent: result.buffer, }) console.log(upload) // 3、返回图片地址 var fileID = upload.fileID; console.log("fileId=" + fileID); const fileList = [fileID]; const imgList = await cloud.getTempFileURL({ fileList: fileList, }) return imgList.fileList } catch (err) { console.log(err) return err } }
wxss
/*弹出分享遮罩层*/ /* 设置背景遮罩层样式 */ .b1 { position: fixed; width: 100%; height: 100%; top: 0; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; flex-direction: column; } /* 设置展示图片大小 */ .b2 { width: 300px; height: 300px; } /* 设置展示图片与关闭按钮图片的距离 */ .t_w { margin-top: 226rpx; } /* 设置关闭按钮图片显示的大小 */ .b2 image { width: 100%; height: 100%; z-index:9999; } /* 设置关闭按钮宽高 */ .t_image { width: 80rpx; height: 80rpx; }
请发表评论