小程序云开发之二维码生成器
该功能主要是将你输入的文字或者网站亦或者上传的图片生成二维码，别人通过扫描二维码就可访问你输入的内容或者打开对应的网站亦或者图片。页面的模板和样式这里就不赘述了，直奔主题。如何通过js实现这些功能呢？ 一、监听用户输入 输入的文本或者网址/* 小程序端 js */
// 监听用户输入的文本
bindText: function (e) {
this.setData({
textVal: e.detail.value
})
},
// 监听用户输入的网站
bindWebsite: function (e) {
this.setData({
websiteVal: e.detail.value.replace(/[\u4e00-\u9fa5]/g, '')
})
},
上传图片/* 小程序端 js */
// 上传图片
uploadImg: function() {
const that = this
dbUpload({
name: 'album',
data: {
openid: wx.getStorageSync('openid'),
time: util.formatDate(new Date()) + ' ' + util.formatTime(new Date())
}
}).then( async res=>{
if (res.url) {
success('上传成功')
that.setData({
uploadedImg: res.url,
showImg: false
})
} else {
fail('上传失败！')
}
})
},
图片生成二维码的思路：将图片传给后台，返回该图片的url及地址，然后将这个地址生成二维码使用。 textVal文本，websiteVal网址，uploadedImg图片地址 其中 dbUpload() 方法进行了封装，封装代码如下，这个小程序是云开发，小程序端可直接操作云开发后台数据库wx.cloud.uploadFile() /* 小程序端 util.js封装 */
//添加或者更新数据
export const dbAdd = (param) => {
if (param.loading) {
wx.showLoading({
title: '正在处理...'
})
}
const promise = new Promise((resolve, reject) => {
let control ={};
if (param.where){
//数据替换
control = db.collection(param.name).doc(param.where).update({
data: param.data
})
}else{
//直接添加
control = db.collection(param.name).add({
data:param.data
})
}
control.then(res => {
resolve(res)
// tip('操作成功！')
})
.catch(err=>{
tip('操作失败，请重试！')
})
})
return promise
}
//上传图片
export const dbUpload = (param) => {
const promise = new Promise((resolve, reject) => {
// 待插入的集合名字
let nameStr = param.name
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '正在上传...'
})
//文件名称
let filePath = res.tempFilePaths[0];
const name = parseInt(Math.random() * 1000000000);
const cloudPath = nameStr + name + filePath.match(/\.[^.]+?$/)[0]
if (param.fileId){
//更新文件得情况则先删除文件
wx.cloud.deleteFile({
fileList: [param.fileId]
})
}
//上传文件到服务器
wx.cloud.uploadFile({
cloudPath,//云存储图片名字
filePath//临时路径
}).then( async res=>{
const uploadedImg = await wx.cloud.getTempFileURL({
fileList: [{
fileID: res.fileID,
}]
}).then(res => {
return res.fileList[0].tempFileURL
})
if (param.data) {
param.data['fileID'] = res.fileID;
param.data['url'] = uploadedImg;
//存储或者更新数据
const data = await dbAdd({
name: nameStr,
where: param.where || null,
data: param.data
});
data['fileID'] = res.fileID;
data['url'] = uploadedImg;
return data
} else {
return uploadedImg
}
}).then(res=>{
resolve(res)
});
}
})
})
return promise
}
在数据库中新建集合 album ，我这里已经新建好了。 [图片] 二、设置画布大小（及二维码容器） // 设置画布大小
setCanvasSize: function () {
const size = {};
try {
const res = wx.getSystemInfoSync();
const scale = 750 / 370;
const width = res.windowWidth / scale;
const height = width;//canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
三、生成二维码 在生成二维码时，引入了一个js库，需要的请关注公众号留言哦！ const QR = require("../../../../utils/qrcode.js");
//调用插件中的draw方法，绘制二维码图片
createQrCode: function (str, canvasId, cavW, cavH) {
QR.api.draw(str, canvasId, cavW, cavH);
},
// 生成二维码
makeQrcode: function () {
const active = this.data.active;
const textVal = this.data.textVal.trim();
const websiteVal = this.data.websiteVal.trim();
if (active==0) {
if (!textVal) return false;
this.createQrCode(this.data.textVal, "qrcCanvas", this.size.w, this.size.h);
} else if (active == 1) {
if (!websiteVal) return false;
this.createQrCode(this.data.websiteVal, "qrcCanvas", this.size.w, this.size.h);
} else if(active == 2) {
if (this.data.showImg) return false;
this.createQrCode(this.data.uploadedImg, "qrcCanvas", this.size.w, this.size.h);
}
this.setData({
canvasHidden: false,
})
},
四、保存二维码至相册 通过画布 wx.canvasToTempFilePath() 生成图片 小程序api：wx.saveImageToPhotosAlbum()保存图片（需用户授权） // 保存二维码
save: function () {
const that = this;
if (!that.data.canvasHidden) {
wx.canvasToTempFilePath({
canvasId: 'qrcCanvas',
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
success('保存成功')
},
fail: (err) => {
if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
wx.showModal({
title: '提示',
content: '您未授权，请点击底部按钮打开授权！',
showCancel: false
})
that.setData({
openSettingBtnHidden: false
})
}
}
})
},
fail: (err) => {
console.log(err)
}
}, that)
}
},
[图片] [图片] 识别小程序二维码体验功能
