知识点：
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;
}
