Small program | Use npm package + small program to support and restrict npm + Vant Weapp + API Promise

Small program support and restrictions on npm

At present, the Mini Program already supports the use of npm to install third-party packages, so as to improve the development efficiency of the Mini Program. However, using npm packages in applets has the following three limitations:

1. Packages that depend on Node.js built-in libraries are not supported
2. Packages that depend on browser built-in objects are not supported
3. Packages that depend on C++ plugins are not supported

Summary: Although there are tens of millions of packages on npm, there are "few" packages that can be used by small programs.

Vant Weapp

Vant Weapp is an open source set by Youzan front-end teamMini Program UI Component Library, to help developers quickly build mini-program applications. It uses the MIT open source license agreement, which is more friendly to commercial use.

Official document address: https://youzan.github.io/vant-weapp

Install the Vant component library

In the applet project, the installation of the Vant component library is mainly divided into the following three steps:

1. Install via npm (it is recommended to specify the version as @1.3.3)
2. build npm package
3. Modify app.json

For detailed operation steps, you can refer to the official quick start tutorial provided by Vant:It is best to follow the official documentation
https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

The premise is that after installing node.js, npm init -yinitialize the management configuration file package.json

1. Install Vant Weapp via npmnpm i @vant/weapp -S --production
   

2. Modify app.json
   to "style": "v2"remove , the new version of the basic components of the applet forcefully adds many styles, which are difficult to cover, and some components will be confused if they are not closed.

3. Modify project.config.json

   For projects created by developer tools, miniprogramRoot defaults to miniprogram, package.json is outside of it, and npm build does not work properly.

   You need to manually add the following configuration in project.config.json so that the developer tools can correctly index to the location where npm depends.

   {
         
         
     ...
     "setting": {
         
         
       ...
       "packNpmManually": true,
       "packNpmRelationList": [
         {
         
         
           "packageJsonPath": "./package.json",
           "miniprogramNpmDistDir": "./miniprogram/"
         }
       ]
     }
   }
   

   Note: Due to the file structure problem of the miniprogram directory created by the new version of developer tools, the file directory built by npm is miniprogram_npm, and the development tool will create the file name of miniprogram_npm in the current directory by default, so the new version of miniprogramNpmDistDir'./' can be configured as

   

4. Build npm package
   Open the WeChat developer tool, click Tools -> Build npm, and check the option to use npm module (note! Now the new version does not need to check the npm module, just use it), after the build is complete, you npm init -ycan Import components.
   

Using Vant components

After installing the Vant component library, you can introduce the required components in the app.jsonusingComponents node , and you can use the components directly in wxml.

// 通过 npm 安装
// app.json
"usingComponents": {
    
    
  "van-button": "@vant/weapp/button/index"
}

After the component is introduced, the component can be used directly in wxml

<van-button type="primary">按钮</van-button>

Customize global theme styles

Vant Weapp useCSS variablesto implement custom themes.

For the basic usage of CSS variables, please refer to the MDN document: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

In app.wxss , write CSS variables to take effect globally

For applets, its root node is<page>

I thought-- CSS variables were used at the beginning, and they can be used when usingvar(xxx)

If you use CSS variables when using the vant-weapp component, you will modify the style in vant-weapp

/**app.wxss**/
page{
    
    
  --button-danger-background-color:#c9838c;
  --button-danger-border-color:#4b0404b0;
}

! ! ! For all available color variables, please refer to the official configuration file provided by Vant:
https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

API Promise

Disadvantages of callback-based asynchronous APIs

By default, the asynchronous APIs officially provided by Mini Programs are implemented based on callback functions

For example, the API for network requests needs to be called as follows

Disadvantages: It is easy to cause the problem of callback hell, and the readability and maintainability of the code are poor!

What is API Promiseization

API Promise refers to upgrading the officially provided callback function-based asynchronous API to a Promise-based asynchronous API through additional configuration, so as to improve the readability and maintainability of the code and avoid the problem of callback hell.

Implement API Promise

In small programs, the implementation of API Promise mainly depends onminiprogram-api-promiseThis third-party npm package.

1. To install:npm i --save [email protected]
   

2. Rebuild npm after installation and this directory miniprogram-api-promise will appear

   

Promise wx

promisifyAll()Promise the method of the asynchronous function on the wx object, and then mount it on wxp, which
wxpis an empty object

// app.js
import {
    
     promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {
    
    };
promisifyAll(wx, wxp)

Call the asynchronous API after Promise

  async getInfo() {
    
    
    const res = await wx.p.request({
    
    
      method: 'GET',
      url: 'https://www.escook.cn/api/get',
      data: {
    
    
        name: 'fly',
        age: 22
      }
    })
    console.log(res.data);
  },