wxml:
<view class="input"> <input placeholder="请输入员工编号" bindinput="inputChange" value="{{inputVal}}"></input> <!-- <view class="icon-box" wx:if="{{true}}" catchtap="clearInput" > <van-icon name="close" class="close-icon" size="36rpx" /> </view> --> <van-icon name="close" class="close-icon" size="36rpx" wx:if="{{show}}" /> <button bindtap="createQrcode">生成二维码</button> </view> <view class="code" wx:if="{{codeShow}}"> <canvas class="canvas" style=" 300rpx; height: 300rpx;" canvas-id="myQrcode"></canvas> <view class="down" bindtap="savePic">保存到手机相册</view> </view>
/* pages/generate/
// import QRcode from '../../miniprogram_npm/weapp-qrcode/index'
import QRcode from '../../utils/weapp-qrcode';
let userInfo = null;
let params = null;
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.isLogin()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (options) {
// const that = this;
// // 设置转发内容
// const shareObj = {
// title: '来吧',
// path: '/pages/index/index.wxml',
// success: function(res) {
// if(res.errMsg === 'shareAppMessage:ok') {
// }
// }
// };
// return shareObj;
},
// 是否登录
isLogin() {
wx.getStorage({
key: 'userInfo',
success: res => {
},
fail: () => {
wx.navigateTo({
url: '/pages/login/index',
})
}
})
},
// 生成二维码
createQrcode() {
const {inputVal} = this.data;
const that = this;
if(inputVal) {
this.setData({
codeShow: true
})
const text = `/page/index/index?code=${inputVal}`;
QRcode({
this.rpx2px(300),
height: this.rpx2px(300),
canvasId: 'myQrcode',
text,
_this: this,
callback: res => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
this.rpx2px(300),
height: this.rpx2px(300),
destWidth: this.rpx2px(300),
destHeight: this.rpx2px(300),
canvasId: 'myQrcode',
success: function(res) {
let path = res.tempFilePath
that.setData({
filePath: path,
})
},
})
}
});
} else {
wx.showToast({
title: '请输入员工编号',
icon: 'none'
})
}
},
inputChange(e) {
if(e.detail.value.length) {
this.setData({
show: true
})
} else {
this.setData({
show: false
})
}
this.setData({
inputVal: e.detail.value,
})
},
clearInput() {
this.setData({
inputVal: '',
})
},
rpx2px(rpx) {
const A = wx.getSystemInfoSync().windowWidth;
const px = rpx * A / 750;
return px;
},
// 保存图片
savePic() {
const that = this;
wx.getSetting({
success:(res)=>{
if (!res.authSetting['scope.writePhotosAlbum']){
wx.authorize({
scope:'scope.writePhotosAlbum',
success:(res)=>{
this.save()
},
fail: err => {
if(err.errMsg.includes('authorize:fail')) {
// 重新打开相册权限
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
// 获取权限成功，给出再次点击图片保存到相册的提示
this.save()
}else {
// 获取权限失败，给出不给权限就无法正常使用的提示
}
}
})
}
}
})
} else {
this.save();
}
}
})
},
// save
save() {
const that = this;
wx.saveImageToPhotosAlbum({
filePath: that.data.filePath,
success: (res) => {
wx.showToast({
title: '图片保存成功',
icon: 'none',
})
},
fail:(res)=>{
wx.showToast({
title: '图片保存失败',
icon: 'none',
})
},
complete:(res)=>{}
})
},
})
.wxss */ .input { height: 100rpx; line-height: 100rpx; display: flex; margin-top: 40rpx; position: relative; } .input > input { 70%; height: 100rpx; line-height: 100rpx; border: 1rpx solid #ccc; background-color: #fff; padding-left: 20rpx; } .input > button { 30%; height: 100rpx; line-height: 100rpx; font-size: 24rpx; background-color: #f00; border: 1rpx solid #f00; color: #fff; border-radius: 0; } .code { text-align: center; text-decoration: underline; font-size: 26rpx; color: orange; } .code .canvas { margin: 40rpx auto 40rpx; } /* .icon-box { height: 100rpx; 68rpx; position: relative; } */ .close-icon { position: absolute; right: 30%; top: 50%; transform: translateY(-50%); z-index: 999; }
效果：
