微信小程序开发常用的npm包

本篇主要介绍在微信小程序中使用 npm 包以及使用微信开发者工具开发微信小程序时最常用的 Vant Weapp 小程序 UI 组件库、miniprogram-api-promise 将 API Promise 化的包和 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现小程序全局数据共享的包。
目前小程序中已经支持使用 npm 安装第三方包，但是有如下3个限制：
1.不支持依赖于 Node.js 内置库的包；
2.不支持依赖于浏览器内置对象的包；
3.不支持依赖于 C++ 插件的包。

经过以上三个限制条件后其实能正常在小程序中使用的包就真的很有限了，下面我们进入正题，分别介绍一下上面提到的三个包的安装使用方式：

Vant Weapp 小程序 UI 组件库

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。

官方文档地址：https://youzan.github.io/vant-weapp

安装使用步骤：

1.先看项目根目录中是否有 package.json 的包管理配置文件，如果没有则先在终端运行 npm  init -y 初始化项目包管理配置文件；
2.运行 npm i @vant/weapp -S --production 安装 Vant Weapp 包。注：可以在安装时在 app 后跟上 @1.3.3 安装指定的版本；

npm i @vant/weapp@1.3.3 -S --production

3.构建 npm ：

        ①打开微信开发者工具 -> 顶部菜单栏中的“工具”-> 点击“构建 npm”；

        ②打开右上角“详情”-> “本地设置”-> 勾选上“使用 npm 模块”。
4.修改 app.json 文件：将 app.json 中的 "style": "v2" 去除防止后续部分组件样式混乱的问题。

使用 miniprogram-api-promise 包将 API Promise 化

API Promise 化指的是通过额外的配置，将官方提供的基于回调函数的异步 API 升级改造为基于 Promise 的异步 API ，从而提高代码的可读性、维护性，避免回调地狱的问题。

安装使用步骤：

1.npm 安装：（此次指定了安装版本）

npm i --save miniprogram-api-promise@1.0.4

2.在微信开发者工具中重新构建 npm （注：每次新安装了 npm 包之后都需要重新 构建 npm ，在构建之前建议先删除项目根目录中的 miniprogram_npm 文件夹然后再进行构建，构建成功后页面会自动生成一个新的该文件夹）
3.使用前的配置：在项目的 app.js 文件中进行如下配置即可：
 

//app.js
// 导入 API Promise 化的包
import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
// 只需调用一次 promisifyAll() 方法即可实现 API Promise 化
promisifyAll(wx, wxp)

发起 Promise 化的网络请求的示例：

// 登录按钮的点击事件，演示发起 Promise 化的 API 请求
  async getInfo() {
    const {data: res} = await wx.p.request({
      url: 'https://www.xxxxxx.cn/api/get',
      method: 'GET',
      data: {
        name: 'zs',
        age: 24
      }
    })
    console.log(res);  // res 能得到请求回来的数据
  },

小程序中的全局数据共享方案

在小程序中可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享（类似于 vue 中的 vuex），mobx-miniprogram 用于创建 Store 实例对象，mobx-miniprogram-bindings 用于把 Store 中的共享数据或方法绑定到组件或页面中方便使用。

安装使用步骤：

1.安装 Mobx 相关的包（此次指定了安装版本）

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

2.安装完成后再构建 npm （记得先删除 miniprogram_npm 目录）

创建 store 文件：推荐在项目根目录中新建 store 目录，然后在该目录中新建 store.js 文件用于创建 store 实例对象：

import {observable, action} from 'mobx-miniprogram'
export const store = observable({

})

下面分别介绍下将 Store 成员绑定到页面和组件的步骤：

将 Store 中的成员绑定到页面中：
在需要使用 store 中的数据或方法的页面的 .js 文件中通过以下三步来使用 store ：

// 第一步：导入共享数据的包和 store 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

// 第二步：在 onLoad 生命周期函数中引入数据和方法
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updataNumA']
    })

// 第三步：在 onUnload 生命周期函数中做清除的操作
    this.storeBindings.destroyStoreBindings()

将 Store 中的成员绑定到组件中：
在需要使用 store 中的数据或方法的组件的 .js 文件中通过以下三步来使用 store ：

// 第一步：导入所需的文件和包
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

// 第二步：在 Component() 中将包挂载到 behaviors 数组中
    behaviors: [storeBindingsBehavior],

// 第三步：创建 store 数据源、方法、属性等的映射关系
    storeBindings: {
        // 数据源
        store,
        fields: {
            numA: 'numA',
            numB: 'numB',
            sum: 'sum'
        },
        actions: {
            updataNumB: 'updataNumB'
        }
    },

以上简单介绍了微信小程序中常用的三个包的安装使用方式，关于微信小程序开发的更多知识推荐访问 -> 微信小程序官方文档。

好好学习、天天向上！        ：)