小贴士:案例以云函数的形式进行实现🏆
作用:生成一个二维码,当扫描二维码之后跳转到相应的页面.
🥇方法一:使用 createQRCode 生成二维码
永久有效,但有数量限制
效果图及目录组织结构:
页面部分
js:
// index.js
Page({
data: {
},
getQrCode(){//这是一个生成二维码的事件回调
wx.showLoading({
title: '生成中。。。',
});
var that = this;
// 小程序码
wx.cloud.callFunction({
name:'createQRCode',//小程序二维码云函数名称
data:{//云函数参数-可选是否需要传参
openid:'参数1',
freshId:'参数2'
},
success(res) {//云函数回调
let fileManager = wx.getFileSystemManager();
let filePath = wx.env.USER_DATA_PATH + '/qr.jpg';
fileManager.writeFile({
filePath:filePath,
encoding:"binary",
data:res.result.buffer,
success:res=>{
that.setData({
filePath:filePath
})
wx.hideLoading({})
}
})
}
})
}
})
wxml:
使用点击按钮的形式进行测试~~
<button type="primary" bindtap="getQrCode"> 生成小程序码</button>
<view class="img-wrap">
<image class="img" src="{{filePath}}"></image>
</view>
wxss:
设置一定的样式~~
.img{
width: 400rpx;
height: 400rpx;
}
.img-wrap{
text-align: center;
}
云函数部分
🐷千万不要把云函数名称搞错~~
js:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数 参数可按实际情况选择是否使用
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.wxacode.createQRCode({
path:'pages/index/index?freshid='+event.freshId + '&openid' + event.openid,//目标页面
width:300,
})
return result
} catch (error) {
return error
}
}
json:
{
"permissions": {
"openapi": [
"wxacode.createQRCode"
]
}
}
使用云函数:上传后记得重新点击编译~~
🥈方法二:使用get生成小程序码
永久有效,但有数量限制
待补充~~~~
🥉方法三:使用getUnlimited生成小程序码
永久有效,无数量限制
待补充~~~~
🥓将生成的二维码路径上传的云存储(可选用)
上传功能的方法:
可根据实际需要选择将路径保存在什么地方~~
uploadImages(filePath){//将生成的二维码路径上传到云存储
var that = this;
wx.cloud.uploadFile({
cloudPath:`codeImg/${Math.random()}.${Date.now()}.${filePath.match(/\.(\w+)$/)[1]}`,
filePath:filePath,
success(res){
that.setData({
cloudImg:res.fileID
})
}
})
}
合一起后的完整js:
// index.js
Page({
data: {},
getQrCode(){
wx.showLoading({
title: '生成中。。。',
});
var that = this;
// 小程序码
wx.cloud.callFunction({
name:'createQRCode',
data:{//云函数参数
openid:'参数1',
freshId:'参数2'
},
success(res) {//云函数回调
let fileManager = wx.getFileSystemManager();
let filePath = wx.env.USER_DATA_PATH + '/qr.jpg';
fileManager.writeFile({
filePath:filePath,
encoding:"binary",
data:res.result.buffer,
success:res=>{
that.setData({
filePath:filePath
})
that.uploadImages(filePath)//上传方法的调用,传入路径
wx.hideLoading({})
}
})
}
})
},
uploadImages(filePath){//将生成的二维码路径上传到云存储
var that = this;
wx.cloud.uploadFile({
cloudPath:`codeImg/${Math.random()}.${Date.now()}.${filePath.match(/\.(\w+)$/)[1]}`,
filePath:filePath,
success(res){
that.setData({
cloudImg:res.fileID
})
}
})
}
})
wxml:
🙃测试测试~~
<button type="primary" bindtap="getQrCode"> 生成小程序码</button>
<!-- 本地二维码 -->
<view class="img-wrap">
<image class="img" src="{{filePath}}"></image>
</view>
<!-- 来自云存储的二维码 -->
<view class="img-wrap">
<image class="img" src="{{cloudImg}}"></image>
</view>
效果图:
关于如何获取参数
🛴可以通过生命周期中的onLoad进行获取~~~
🛵参数即是来自扫描者附带的信息
onLoad(e){
console.log(e.freshId)
console.log(e.openid)
},
🍻实现将生成的二维码保存到本地(手机相册)
🥣保存二维码到相册的事件回调拉出来单独看~~
saveQRcode(){//保存二维码到相册
wx.saveImageToPhotosAlbum({
filePath: this.data.filePath,
success(res){
console.log(res)
wx.showToast({
title:'保存成功',
})
}
})
}
🍚合在一起咯~~
// index.js
Page({
data: {},
getQrCode(){
wx.showLoading({
title: '生成中。。。',
});
var that = this;
// 小程序码
wx.cloud.callFunction({
name:'createQRCode',
data:{//云函数参数
openid:'参数1',
freshId:'参数2'
},
success(res) {//云函数回调
let fileManager = wx.getFileSystemManager();
let filePath = wx.env.USER_DATA_PATH + '/qr.jpg';
fileManager.writeFile({
filePath:filePath,
encoding:"binary",
data:res.result.buffer,
success:res=>{
that.setData({
filePath:filePath
})
that.uploadImages(filePath)//上传方法的调用,传入路径
wx.hideLoading({})
}
})
}
})
},
uploadImages(filePath){//将生成的二维码路径上传到云存储
var that = this;
wx.cloud.uploadFile({
cloudPath:`codeImg/${Math.random()}.${Date.now()}.${filePath.match(/\.(\w+)$/)[1]}`,
filePath:filePath,
success(res){
that.setData({
cloudImg:res.fileID
})
}
})
},
saveQRcode(){//保存二维码到相册
wx.saveImageToPhotosAlbum({
filePath: this.data.filePath,
success(res){
console.log(res)
wx.showToast({
title:'保存成功',
})
}
})
}
})
🍄点击全屏大图查看二维码
🍒查看大图的事件回调~~
FOW(e){
wx.previewImage({//全屏查看大图的API
urls: [e.currentTarget.dataset.img],
})
}
🥘给二维码绑定事件及传参~~
<view class="img-wrap">
<image class="img" src="{{filePath}}" bindtap="FOW" data-img="{{filePath}}"></image>
</view>
效果图:
结束结束👺👺👺
🐱🏍祝看到的每一位朋友武运昌隆~~