微信小程序点击弹窗分享图片长按图片保存失败则弹出授权

时间:2024-03-06 13:33:24

知识点:

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;
}