How to generate applet code in applet

Introduction:

A mini program is an application that can be used without downloading and installation. It realizes the dream of "within reach" of applications. Users can open the app by scanning or searching. It also embodies the concept of "use and go", and users do not need to worry about installing too many applications. Applications will be everywhere and available at any time, but there will be no need to install or uninstall them.

(Learning video sharing: Introduction to Programming)

So in the mini program, how to generate the mini program code? Although the mini program can currently be shared to the circle of friends, However, the dissemination of mini program codes, whether shared directly with friends, shared as pictures, or used as an entrance to offline code scanning, is an important entrance to attract traffic.

Example effect:

Specific implementation:

The applet code, in the view element Bind events

<view bindtap="onViewTap">小程序码</view>

Logic code on the applet

Page({
  data: {},
  // 绑定的点击事件函数
  onViewTap() {
    this.createQrCode(); // 调用生成小程序码
  },

  // 生成小程序码
  createQrCode() {
    this.showLoading();
    wx.cloud
      .callFunction({
        // 请求云函数
        // 云函数getQrCode
        name: 'getQrCode',
      })
      .then((res) => {
        console.log(res);
        const fileId = res.result;
        wx.previewImage({
          // 小程序码,生成后直接预览,前台展示
          urls: [fileId],
          current: fileId,
        });
        this.hideLoading();
      });
  },

  // toast生成中
  showLoading() {
    wx.showLoading({
      title: '正在生成中...',
      icon: 'none',
    });
  },

  hideLoading() {
    wx.hideLoading();
  },
});

Just the above lines of code on the applet

Cloud function implementation code

Creating the getQrCode cloud function in the cloudFunctions folder will create three files: config.json, index.js, and package.json by default.

Among them, config.json contains the

{
  "permissions": {
    "openapi": [
      "wxacode.getUnlimited"
    ]
  }
}

above. It is a configuration that uses wxacode.getUnlimited to generate a small program code. This configuration is fixed

And the following code in index.js

// 云函数入口文件
const cloud = require('wx-server-sdk');

cloud.init();

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext(); // 获取上下文
  const result = await cloud.openapi.wxacode.getUnlimited({
    // 调用生成小程序码的接口，携带一些参数,例如:scene
    scene: wxContext.OPENID,
  });
  // console.log(result)
  const upload = await cloud.uploadFile({
    // 生成的小程序码上传到云存储中
    cloudPath: 'qrcode/' + Date.now() + '-' + Math.random() + '.png', // 生成的小程序码存储到云存储当中去，路径
    fileContent: result.buffer,
  });
  return upload.fileID; // 返回文件的fileID,也就是该图片
};

generates a small program code which is the simple cloud function code above. It can be realized, mainly by using the wxacode.getUnlimited interface

to obtain the mini program code, which is suitable for business scenarios that require a large number of codes. The mini program codes generated through this interface are permanently valid and the quantity is temporarily unlimited

Related documents

wxacode.getUnlimited Mini program code generation interface documentation

cloud.uploadFile Upload local resources to cloud storage

Conclusion

There are two ways to generate small program code in a small program. One is https calling, the other is It is a cloud call. In this article, the cloud call is the simplest, eliminating the need to obtain access_token and authentication.

Initiate a cloud function request to generate the applet code on the mini program side. The cloud function side borrows the cloud function Call the wxcode.getUnlimited interface to generate the mini program code, then upload it to cloud storage, return the file ID of the image in the cloud storage, and get the file ID returned by the cloud function on the mini program side, and display the mini program code based on this file ID Come out.

Related recommendations: Mini Program Development Tutorial

The above is the detailed content of How to generate applet code in applet. For more information, please follow other related articles on the PHP Chinese website!