使用npm

小程序使用npm有一些限制：
1、不支持依赖于nodejs内置库的包
2、不支持依赖于浏览器内置对象的包
3、不支持依赖于C++插件的包

Vant Weapp

有赞前端团队开源的小程序UI组件库，使用MIT开源许可协议。
1、npm i @vant/weapp -S –production
2、将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
3、开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

4、打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
5、在app.json或页面.json文件中的usingComponents中添加要使用的组件，然后使用即可。

CSS自定义变量

定义变量

使用”–”（双横线）+变量名即可定义变量，不过要注意变量的作用域，比如定义在body标签的变量可以被body内的h1标签访问。但是定义在body内h1的变量不能被body访问。

1
2
3
html{
    --my-bg-color:#efefef;
}

使用自定义变量

在要使用的地方通过var(变量名)使用变量值。

1
2
3
h1{
    color:var(--my-bg-color);
}

设置Vant主题样式

可以在app.wxss中，写入CSS变量即可对全局生效

1
2
3
4
//微信小程序最顶层标签是page
page{
    --button-danger-background-color:#C00000;
}

至于Vant定义的变量叫什么名字，可以在官方文档的定制主题->配置文件中查到。

API Promise化

小程序异步的API都是基于回调函数实现的，容易造成回调地狱的问题。我们需要将这些API转为Promise，就可以使用async await了。

使用步骤

1、安装miniprogram-api-promise
npm install –save miniprogram-api-promise@1.0.4
2、构建npm
3、在app.js中

1
2
3
4
5
6
//引入
import { promisifyAll } from 'miniprogram-api-promise';
//自定义p属性和wxp变量，这个p变量可以在每个页面访问到
const wxp = wx.p={};
//将wx的API挂载到wxp上
promisifyAll(wx,wxp);

4、使用
在需要的地方，比如获取用户列表信息

1
2
3
4
5
6
7
8
9
10
11
async getUserListAsync(){
  let {data:res} = await wx.pwx.request({
    url: 'https://xxx.com/get/userList',
    method:"GET",
    data:{
        page:1,
        size:10
    }
  })
  console.log(res)
 },

全局数据共享

类似Vuex。
微信小程序里可以使用mobx-miniprogram配合mobx-miniprogram-bindings实现数据共享。
mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用。

创建store实例

创建store文件夹，在文件夹内创建store.js文件
store.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {action, observable} from "mobx-miniprogram"
export const store = observable({
  numA:1,
  numB:2,
  //计算属性，类似于vuex的getter
  get sum(){
    return this.numA+this.numB
  },
  //函数需要用action创建
  updataNumA:action(function(step){
    this.numA += step;
  }),
  updataNumB:action(function(step){
    this.numB += step;
  })
})

绑定到页面

1、在需要用store的页面导入

1
2
import {createStoreBindings} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'

2、在onLoad的时候通过createStoreBindings函数将store绑定到页面上

1
2
3
4
5
6
7
8
9
10
11
onLoad(options) {
    //将需要使用的store的数据绑定到this身上
    //返回值可以用来在销毁页面时做清理工作
    this.storeBindings = createStoreBindings(this,{
      store,
      //指定使用的数据
      fields:["numA","numB","sum"],
      //指定使用的函数
      actions:['updateNumA']
    })
  }

3、在onUnload的时候做清理工作

1
2
3
onUnload() {
    this.storeBindings.destroyStoreBindings();
  }

4、使用store内的数据与函数
.wxml：

1
2
<van-button type="info">{{numB}}</van-button>
<van-button type="warning">{{numA}}</van-button>

由于都绑定到了this上，所以直接使用就行。

绑定到组件

1、在需要用store的页面导入

1
2
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'

2、提供behaviors数组
在Component配置对象中，通过behaviors配置项实现自动绑定

1
behaviors:[storeBindingsBehavior]

3、提供storeBindings配置项
在Component配置对象中，通过storeBindings配置项指定需要的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
storeBindings:{
  store,
  //指定使用的数据
  fields:{
    numA:()=>store.numA,
    numB:(store)=>store.numB,
    sum:"sum"
  },
  //指定使用的函数
  actions:{
    updateNumB:"updataNumB"
  }
}