css就不放了,drawQrcode 是url绘制convas的方法,百度上有好多就不放出来了。
其实wx官方分享图片的方法上,就自带一个下载功能————尴尬
// pages/successAppointment/index.js
import drawQrcode from '../../utils/qrCode'
import {
scheduleDetail
} from '../../api/com'
const App = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
navHeight: App.globalData.statusBarHeight,
navTop: App.globalData.navTop,
params: {},
info: {},
result: {},
breakImage: '',
showtop: true,
id: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (options.showtop) {
this.setData({
showtop: false,
id: options.id
})
} else {
this.setData({
showtop: true,
id: ''
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if (this.data.showtop) {
this.setData({
params: wx.getStorageSync('request')
})
this.convasFun()
} else {
wx.showLoading({
title: '加载中',
})
scheduleDetail(this.data.id).then((res) => {
if (res.code !== 200) return
this.setData({
params: res.result
})
this.convasFun()
}).finally(() => {
wx.hideLoading()
})
}
},
convasFun() {
let that = this
var query = wx.createSelectorQuery() //创建节点查询器 query
query.select('#canvas').boundingClientRect() //这段代码的意思是选择Id=the-id的节点,获取节点位置信息的查询请求
query.selectViewport().scrollOffset() //这段代码的意思是获取页面滑动位置的查询请求
query.exec(function (res) {
drawQrcode({
width: res[0].width,
height: res[0].height,
canvasId: 'myQrcode',
text: that.data.params.qrCodeUrl,
image: {
imageResource: '../../images/icon.png',
dx: (res[0].width /2 - 30),
dy: (res[0].height /2 - 30),
dWidth: 60,
dHeight: 60
}
})
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '预约码'
})
}, 1000)
})
return {
title: '预约码',
path: '/page/successAppointment/index?id=123',
promise
}
},
btnList() {
wx.showLoading({
title: '保存中',
})
let that = this
var query = wx.createSelectorQuery() //创建节点查询器 query
query.select('#canvas').boundingClientRect() //这段代码的意思是选择Id=the-id的节点,获取节点位置信息的查询请求
query.selectViewport().scrollOffset() //这段代码的意思是获取页面滑动位置的查询请求
query.exec(function (res) {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: res[0].width,
height: res[0].height,
destWidth: res[0].width,
destHeight: res[0].height,
canvasId: 'myQrcode',
success(res) {
wx.showShareImageMenu({
path: res.tempFilePath,
success(res) {
console.log(res, 'res')
},
fail(err) {
console.log(err, 'err')
},
complete() {
wx.hideLoading()
}
})
}
})
})
},
imgDown() {
wx.showLoading({
title: '保存中',
})
let that = this
var query = wx.createSelectorQuery() //创建节点查询器 query
query.select('#canvas').boundingClientRect() //这段代码的意思是选择Id=the-id的节点,获取节点位置信息的查询请求
query.selectViewport().scrollOffset() //这段代码的意思是获取页面滑动位置的查询请求
query.exec(function (res) {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: res[0].width,
height: res[0].height,
destWidth: res[0].width,
destHeight: res[0].height,
canvasId: 'myQrcode',
success(res) {
that.setData({
breakImage: res.tempFilePath
})
wx.saveFile({
tempFilePath: res.tempFilePath,
success(resFile) {
const savedFilePath = resFile.savedFilePath
wx.saveImageToPhotosAlbum({ //保存到本地
filePath: savedFilePath,
success(res1) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '再次点击保存二维码保存到相册',
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else {
wx.showModal({
title: '提示',
content: '无授权无法保存至相册',
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
}
})
}
},
})
}
})
},
complete() {
wx.hideLoading()
}
})
})
}
})
<topBar title="{{showtop?'预约成功': '二维码详情'}}" back="{{true}}" routePath="{{id?'':'/pages/index/index'}}" />
<view class="successAppointment_box" style="padding-top: calc({{navTop+navHeight+5}}px + 26rpx) !important">
<view class="successAppointment">
<block >
<image class="successAppointment_icon" src="../../images/qrSuccess.png"></image>
<view class="successAppointment_textTop">
<view class="successAppointment_textTop_bold">恭喜您,预约成功!</view>
<view>档期已为您锁定{{(params.studio.lockTime || 0) * 60}}分钟,请使用微信扫码支付</view>
</view>
</block>
<view class="successAppointment_textBto">
{{params.reserveNo}}
</view>
<!-- <canvas class="qrCode" canvas-id="myQrcode"></canvas> -->
<canvas id="canvas" class="qrCode" style="width: 480rpx; height: 480rpx;" canvas-id="myQrcode"></canvas>
<!-- <image src="{{params.qrCodeUrl}}" alt="" /> -->
<view class="successAppointment_btnList">
<button class="successAppointment_btnList_button" bindtap="imgDown">保存二维码</button>
<button class="successAppointment_btnList_button" bindtap="btnList">分享好友</button>
</view>
</view>
</view>