Codewords are not easy, and helpful students hope to pay attention to my WeChat public account: Code program life, thank you! The code is self-used and fetched.
In the development of WeChat applets, there are many business scenarios where there is a need to generate a QR code, and then scan the QR code to enter the specified page.
I haven't encountered this kind of demand before. I recently took a private job and there is this kind of demand. After checking the information, I found that the official API is provided. Let's take a look.
This is the introduction of the official document, I use cloud call here.
First, create a new cloud function named QrCode in the cloud function folder. Write the following.
const cloud = require('wx-server-sdk')
cloud.init({
env: '云环境ID',
})
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.wxacode.createQRCode({
path: '要跳转的页面路径',
width: 430
})
return result
} catch (err) {
return err
}
}
This is an example of the official document, you can modify it according to your situation.
Then we call this cloud function on the client.
wx.cloud.callFunction({
name:'QrCode',
success(res){
console.log(res);
},
fail(res){
console.log(res);
}
})
Take a look at what res output here.
res.result.buffer is what we want, because it is image data, so it is converted to buffer type data for us. We need to perform a conversion. Then put it into our cloud storage space.
Here is the complete code:
wx.cloud.callFunction({
name:'QrCode',
success(res){
console.log(res);
const filePath = `${
wx.env.USER_DATA_PATH}/test.jpg`;
wx.getFileSystemManager().writeFile({
filePath,
data:res.result.buffer,
encoding:'binary',
success:() => {
wx.cloud.uploadFile({
cloudPath:'QrCode1.png',
filePath,
success(Res){
console.log('success',Res);
},
fail(Res){
console.log('fail',Res);
}
})
}
})
},
fail(res){
console.log(res);
}
})
Let's look at the output again: after the conversion, the last thing we want is the fileID, which is the address where the QR code is stored in the cloud storage.
In this way, we have truly generated the QR code of the specified page, and you can enter by scanning it.
One thing to mention here, this thing needs to be synchronized with the online version. For example, I am debugging this function on the development tool. The generated QR code will jump to pages/index/index. If you scan this QR code, it will jump to your current online version. The content of the page may be inconsistent with the one on your editor. If you have any questions, you can add my contact information to communicate.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible Number, please pay attention, thank you
After paying attention to the official account , reply to the front-end interview questions and receive a large number of front-end interview questions summary pdf data
