The small things of developing WeChat applet

Tencent's official documents are still in the historical style, and some error messages are still very interesting (the prompt information is quite unfriendly), so that the development cannot be successfully completed by directly learning the official documents.

Some basic steps are now recorded as follows:

Test account

Having a test account will help us quickly develop various functions:

Application for WeChat Mini Program Test Account:
https://developers.weixin.qq.com/sandbox

It should be noted that WeChat has a particularly big pit. If we document , if we happen to also apply for the test account of the official account, we will fall into this pit.

Apply -> Scan the code -> Prompt that we already have a test account -> Click to proceed to the official account -> Then we found that we have a test official account instead of a test mini program.

At this time, it should be noted that when using the mobile phone WeChat to select the account to log in, you should select the test applet sequence you applied for, instead of using the default account. Because the default account is only an official account, it may not have the function of an applet.

WeChat Mini Program Registration
https://mp.weixin.qq.com/wxopen/waregister?action=step1

Support for typescript

Typescript is officially supported, and it feels very good when I see this. However, it will not calm down once it is used. The official does not give a demo of automatic compilation, which is unacceptable for small partners who are just getting started with TypeScript and prefer it.

Here is a piece of code that works for me:

npm install --save-dev node-watch

Then create the following yunzhi.js in the root directory

// 创建一个子进程
const exec = require('child_process').exec;
// 调用 node-watch 监听模块
const watch = require('node-watch');

// 运行一次编译
exec('npm run compile');

// 监听相关文件、文件夹，有变化则重新运行编译
watch(['src/app.ts', 👈
    'src/types.ts', 👈
    'src/utils', 👈
    'src/pages', 👈
    'src/service', 👈
    'src/components' 👈], { recursive: true }, function(evt, name) {
    if (name.split('.').pop() === 'ts') {
        console.log('监听到TypeScript文件改动，重新编译中...');
        exec('npm run compile');
    }
});

console.log('云智TypeScript自动编译脚本已成功运行...');

Pay attention to the content of this, replace it with the one in your current directory. If you add a new folder to the project, also pay attention to maintain this list.

Finally, execute node yunzhi.js automatically build ts into a js file when the file changes.

Interact with the background

Even if a test account is used, it is not possible to interact with any backend at will. At this point, we can find the relevant request background configuration in the WeChat applet test account, or find the local configuration in the WeChat developer tool, click: Do not verify the requested domain name

Third-party library

If it is not particularly necessary, it is not recommended to use third-party libraries. If we use a third-party library, it is best to use a reduced type, such as adding what we use, not globally. This is mainly due to the size limit of the WeChat applet.

Although we can find package.json in the root directory of the WeChat applet, you definitely don't know that it cannot be directly quoted. If you quote directly, the WeChat applet will make an error ruthlessly.

Correct posture reference: in the WeChat applet

mock data

The WeChat developer tool provides the function of simulating the returned data: Mock. After enabling it, add rules:

But I still hope to find a unit test method for unit testing a certain page or component in the official documentation.

http request

WeChat provides wx.request(options) to initiate http requests. Options has two fields, which are the callback after the code request is successful and the callback after the request fails:

        fail: (value) => {
          // 失败
        },
        success: (value) => {
          // 成功
        },        

But it should be noted that: the failure here will only be executed when the requested address does not respond. If you are accustomed to using some non-2XX status codes as execution failure conditions, you still need to handle them manually.

        success: (value) => {
          const code = value.statusCode;
          if (code >= 400) {
            // 这才是执行失败
          } else {
            // 而这才是执行成功
          }
        },

Template syntax

Official document address: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

Binding method

Bind the click event, not click, but bindtap:

        <view class="page__desc">
            <button class="weui-btn_primary" bindtap="onRefreshButtonClick">立即刷新{{leftRefreshSeconds}}</button>
        </view>

Component definition properties

properties for the component, the format must be {type: xxx, value: xxx}

  properties: {
    a: {
      type: String,
      value: ''
    }
  },

Otherwise, an error of VM2135 WAService.js:2 TypeError: Cannot read property 'name' of undefined will be reported.

The type of the property can be either String Number or Boolean Object Array, or it can be null for unlimited types.

In most cases, it is best to specify an exact type for the attribute. In this way, when the attribute value is specified literally in WXML, the value can get an exact type, such as:

Introduce js

By default, we have no way to declare a js library in ts. But sometimes a certain js library does not have a TS version. At this time, it can be like this:

1. Fix tsconfig.json

    /**关闭在引入一些声明为any的类型时的报错检查*/
    "noImplicitAny": false,

   The key pair type is any check.

2. Use require to introduce js libraries, such as:

   const echarts:any = require('./../ec-canvas/echarts');

To be continued