The premise

In order to provide their own small program for a number of catering businesses, and support businesses DIY small program home page, order, shopping cart, my page. We need to come up with a solution. If according to the traditional development model: a small program a project. The organization and management of the code will be a disaster after the customer volume comes up. So I started investigating tripartite development to support the small program customization needs of multiple customers.

Tripartite development = Service platform (Web side) + general template of small program (wechat side)Copy the code

Tripartite service brain map

As can be seen from the figure below, we need to design and develop parts, mainlyThe establishment of the three-party service platformandDevelopment of common templates for small programsThe two pieces. Some of the key processes involved are described below.

  • Three-party service platform: self-built Web side project, providing authorization, configuration, review, release, decoration and other functions of small programs;
  • Common applet template: a self-built template applet that can read ext.json files, pull decoration data, and pull service data.

Small program authorization, release process

Service Platform (Web side)

Create applets

  • First, customers need to register their own small procedures

Obtain the pre-authorization code

  • The background is provided through wechatAPIStart the ticket push service and obtaincomponent_verify_ticket;
  • The backend gets the token through the ticketcomponent_access_token, valid for 2 hours, remember to refresh when it is about to expire;
  • Obtain the pre-authorization code by tokenpre_auth_code

Customer code sweep authorization

Wechat authorization process

  • The Web side needs to develop an authorization button. After the user clicks it, the back end initiates a request to obtain the wechat authorization URL and redirects to the corresponding authorization page of the URL.
  • After the customer scans the code for authorization, the page will be based on the incomingredirect_uriThe corresponding page is automatically displayed. And will beauthorization_codeAnd so on.query.
  • Finally, get the authorizer_access_token (authorizer_access_token), which is important for subsequent code upload, review, publish, and so on.

Configuration applet

After authorization is completed, we can obtain the list of authorized applets on the Web side through the applets list interface of background packaging, as shown in the figure below:

This provides an entry point for clients to configure applets on the Web side. Note that the process of configuring the applet here is actually the process of generating extJson and uploading the code through the code upload interface.

There are two types of extJson configuration information:

  • Special field
    • extEnable: Configures ext.json to take effect
    • extAppid: Applets ID granted to third-party platforms
    • ext: Develop custom data fields
    • .
  • The same field as app.json
    • window
    • tabbar
    • .

For now, we’ll focus on ext fields within specific fields. Our company configures the applet page on the Web side (you need to DIY this part according to your needs), and the tabbar title picture, applet color, version and other information are saved in this field:

After saving the configuration, the extJson information will be uploaded to the wechat background service through the code upload interface. This will automatically generate an ext.json file and bind it to the applet template based on its templateID and user_version (more on this later).

In this way, we can read part of ext information in the ext.json file by calling the wx.getExtConfigSync method when the applet template starts by scanning the generated experience TWO-DIMENSIONAL code. To get data on skin color, tabbar, etc. (Note that there is no need to go through the process of review and release!!)

Interrogate, issue small program

After configuring the applet, click the Raise and publish buttons in the list to raise and publish the extJson configuration information.

After approval and release, we can search the name of the small program in wechat and find the small program just released. (The above premise is that the third party platform has been published and approved, and the wechat template applet code has been added to the template library. See the applet templates section below for details.)

Small program decoration

After configuring the applets, customers can decorate some pages of the applets on the Web side.

As the home page and my two pages need to be decorated, we simulate these two pages on the Web end. Customers can add, delete, modify style and other operations on the page module.

The generated decoration data is saved in the back end, and the decoration data can be pulled when the small program starts, and the page can be analyzed and rendered.

Small program Template (wechat terminal)

Developed based on the Taro framework

Registration of tripartite qualifications

  1. According to the content of the document, create a third-party platform account on wechat open platform;
  2. Then register a small program, get the APPID, and use it as a template small program for subsequent development;
  3. In the third party platform – development configuration, binding just registered template applet account;

Develop applets templates

This part is based on the second part of the application of the small program, the normal small program development.

Note that when the applets start:

  • You need to callwx.getExtConfigSyncMethod read toext.jsonIn the fileextPartial information;
  • Call background interface, obtain decoration data, used as style information in page rendering;

When packaging components, consider how to support the Web configuration of the applets decoration data and ext.json tabbar style data

Applets template release

After compiling the small program, click Upload in the wechat developer toolIt will pop upThe code will be uploaded to the draft box of the third party platform. Do you want to continue?Here and ordinary small program development is not the same!! Here directly upload the template code to the wechat tripartite platform.

You can view the template applet you just uploaded in the draft box on the third party platform. You can also add it to the applet template library to see the generated templateID.

debugging

Local debugging

The simulator cannot obtain the ext.json file on wechat platform. Create an ext.json file and place it in your project root dist. When the emulator starts, the wx.geTextConfigsync method is used to retrieve its contents

Reference documentation

Wechat tripartite platform: all the above content is explained in detail in the document!