Steps to build a template applet

Time:2021-11-15

Steps to build a template applet

Project Description: build applet with uni app and build background framework with Vue + element.

Principle:Wechat open platformThe third-party platform service provider can be bound, and the development applet can be bound in the details > development configuration of the third-party service provider. The code uploaded through this applet can become an applet template, and the applet can be generated in batch through a template in the applet template library.

When generating applets in batch, you need to first fill in the project name, applet appid and oemid. After filling in, you need the authorization of the applet manager. After successful authorization, you can generate the applet of the corresponding template according to the filled data. At this time, the filled values and applet information will be written into the applet template, and then the corresponding applet will be generated. Therefore, the corresponding value can be obtained through ext.json inside the applet.

The first step is to create two branches

Branch 1: save the original code for future debugging.
Two thirds: save the built code for branch 1, and merge the new code of branch 2 every time in the future

Step 2: modify the applet configuration of the manifest.json file

Change the manifest.json file

"mp-weixin": {
    /*Applet specific correlation*/
    "usingComponents": true,
    "Appid": "", // it has been bound to the development applet of the third-party platform of wechat open platform, which needs to be filled in here
    "setting": {
      "urlCheck": false,
      "es6": true
    }
  }

Step 3: define ext.json and store the file in the root directory of the project to facilitate copying the file to the root directory of the packaged project after each packaging

Ext.json file

{
  "extEnable": true,
  "Extappid": "", // a development applet bound to the third-party platform of wechat open platform. You can upload the template code to the draft box of the applet template library through this applet. You need to fill in here
  "directCommit": false,
  "ext": {
    "Oem_id": 0, // the user ID of the OEM project, which is left blank here
    "AppName": "", // the name of the generated applet. Leave it blank here
    "Logo": "" // generate the logo of the applet. Leave it blank here
  }
}

Step 4: receive the value of ext.json file and save it to the warehouse

App.vue file

import { IExt } from "@/api/types";
import { LoginModule } from "@/store/modules/login";

console.log(uni.getExtConfigSync());
if (uni.getExtConfigSync()) {
  LoginModule.setExt(uni.getExtConfigSync() as IExt);
}

Login.ts file

ext = {
oem_id: 0,
appname: '',
logo: '',
}

@Mutation
public setExt(ext: IExt) {
this.ext = ext
uni.setNavigationBarTitle({
  title: ext.appname,
})
}

Step 5 modify the public project name, project logo, copyright and other identifiers in the project

Step 6: the header of the request carries the OEM parameter

Api.ts file

import { LoginModule } from "@/store/modules/login";

const oem = LoginModule.ext.oem_id
config.header['oem'] = oem

Step 7 package and upload

yarn run build:mp-weixin
  • Copy ext.json to the root directory of the package
  • Open the wechat open platform, find the corresponding template and click Add to the template library
  • Add a project template in the batch applet background, fill in the templateid (found in the template library), and fill in the request address (remember to write on the line). Then it is created successfully

Note: the user’s request address will be used as the service address and directly filled in the applet after the user scans the code for authorization. If it is not filled in correctly during authorization, the domain name will change after the applet template is regenerated. You need to log in to the applet background directly to change it, or authorize it again to change it.

Step 8 batch applet background (used after development) operation instructions

  1. Get authorization
  • It is necessary to inform the scanner of the authorized applet
  • Applets without basic information cannot be authorized
  1. Upload applet
  • The requested domain name of the applet needs to exist in: wechat open platform > third-party service provider > details > basic information > applet server domain name. If it does not exist, please add it, otherwise an error will be reported when uploading the applet
  1. Submit for review
  • The background applet needs to inform and review the test account, and briefly describe the applet
  1. Publish applet
  • To go online, you need to determine whether the modified applet needs to be searched. For applets that do not need to be searched, you need to log in to wechat applet > Settings > Privacy Settings > turn off allow search

This work adoptsCC agreement, reprint must indicate the author and the link to this article