Home > WeChat Applet > Mini Program Development > A brief discussion on how to create page QR codes in mini programs

A brief discussion on how to create page QR codes in mini programs

青灯夜游
Release: 2021-10-28 10:49:44
forward
3483 people have browsed it

How to create a page QR code in the mini program? The following article will introduce to you how to generate the QR code of the current page in WeChat Mini Program. I hope it will be helpful to everyone!

A brief discussion on how to create page QR codes in mini programs

In the development of WeChat mini programs, in many business scenarios there is a need to generate a QR code and then scan the QR code to enter the specified page. [Related learning recommendations: 小program development tutorial]

I have never encountered this kind of demand before. I recently took on a private job and had this kind of demand. After checking the information, I found that the official one provides API, let’s do it below.

A brief discussion on how to create page QR codes in mini programs

This is the introduction of the official document. I use cloud calling 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
  }
}
Copy after login

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 side.

wx.cloud.callFunction({
  name:'QrCode',
  success(res){
    console.log(res);
  },
  fail(res){
    console.log(res);
  }
})
Copy after login

Look at what the res output here is.

A brief discussion on how to create page QR codes in mini programs

res.result.buffer is what we want, because it is image data, so it is converted to buffertype of data. We need to do a conversion. Then put it into our cloud storage space.

The following 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:'QrCodeA brief discussion on how to create page QR codes in mini programs',
              filePath,
              success(Res){
                console.log('success',Res);
              },
              fail(Res){
                console.log('fail',Res);
              }
            })
          }
        })
      },
      fail(res){
        console.log(res);
      }
    })
Copy after login

Look at the output again:

A brief discussion on how to create page QR codes in mini programs

##We pass the conversion, and the last thing we want is this

fileID, this is the address where this QR code is stored in the cloud storage.

A brief discussion on how to create page QR codes in mini programs

In this way, we actually generate the QR code of the specified page, and you can enter by scanning it. \

One thing to mention here is that this thing must be synchronized with the online version. For example, I am debugging this function on the development tool. The generated QR code will jump to the page

pages/index/index. If you scan this QR code now, the page will jump. The content of the page in your current online version may be inconsistent with that in your editor. If you have any questions, you can add my contact information to communicate.

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of A brief discussion on how to create page QR codes in mini programs. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template