微信小程序使用npm包

1. 使用npm包

目前，小程序中已经支持使用npm安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用
npm包有如下3个限制：

1. 不支持依赖于Node.js内置库的包
2. 不支持依赖于浏览器内置对象的包
3. 不支持依赖于C++插件的包

2. npm-Vant Weapp

Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是
MIT开源许可协议，对商业使用比较友好。

在小程序项目中，安装Vant组件库主要分为如下3步：

1. 通过npm安装（建议指定版本为@1.3.3）
2. 构建npm包
3. 修改app.json

安装

项目目录启动shell终端

# 初始化 package.json 包管理配置文件
F:\wxapplet\mp_05>npm init -y
{
  "name": "mp_05",
  "version": "1.0.0",
  "description": "",
  "main": ".eslintrc.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
# 安装vant/weapp 包，这里指定了1.3.3版本
F:\wxapplet\mp_05>npm i @vant/weapp@1.3.3 -S --production

完成上述步骤后，在小工具中通过工具->构建npm

防止样式冲突，删除app.js 下的 v2

详细的操作步骤，大家可以参考Vant官方提供的快速上手教程：

使用

安装完Vant组件库之后，可以在app.json的usingComponents节点中引入需要的组件，即可在wxml中
直接使用组件。示例代码如下：

// app.json
"usingComponents":{
	"van-button":"@vant/weapp/button/index"
}

//页面的.wxml结构
<van-button type="primary">按钮</van-button>

CSS变量

Vant Weapp使用CSS变量来实现定制主题。关于CSS变量的基本用法，请参考MDN文档

用vscode来写个例子：

<!--vsprojects\mp_05\test\01.html-->
<style>
    /*这里使用html，是说网页根节点下所有地方都能引用该变量，也可以使用特定class定义范围*/
    html{
        /*定义CSS变量*/
        --main-color:#C00000;
    }
    .box1, .box2{
        /*background-color:#C00000;*/
		background-color:var(--main-color);
    }

    .box3{
        /*color:#C00000;*/
		color:var(--main-color);
    }

</style>

回到我们的微信小工具，可以参考定制主题 - Vant Weapp (youzan.github.io)获取相应的css变量

/*app.wxss*/
/*小工具的根节点是page，类比html节点*/
page{
   /*定制警告按钮的背景颜色和边框颜色*/
	--button-danger-background-color:#C00000;
	--button-danger-border-color:#D60000: 
}

3. npm-API Promise化

基于回调函数的异步API的缺点：

• 默认情况下，小程序官方提供的异步AP!都是基于回调函数实现的，例如，网络请求的AP!需要按照如下的方
  式调用：

  wx.request({
      method:'',
      url:'',
      data:{},
      success:()=>{},//请求成功的回调函数
      fa11:()=>{},//请求失败的回调函数
      complete:()=>{}//请求完成的回调函数
  })
  

• 缺点：容易造成回调地狱的问题，代码的可读性、维护性差！

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

实现

在小程序中，实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包。它的安装
和使用步骤如下：

# 建议指定版本号
npm install --save miniprogram-api-promise@1.0.4

安装后，先把项目目录下的miniprogram_npm目录删除掉，再通过小工具中工具->构建npm去配置

// 在小程序入口文件中(app.js),只需调用一次promisifyAll()方法，
// 即可实现异步API的Promise化

// 使用es6按需导入
import promisifyAll from 'miniprogram-api-promise'

// 定义个空白对象，并赋值给了wx的自定义属性p
const wxp wx.p ={}

// promisify all wx's api
promisifyAll(wx,wxp)

调用promise化后的异步API

//页面的 wxml 结构
<van-button type="danger"bindtap="getInfo">vant</van-button>

//在页面的 js 文件中，定义对应的tap事件处理函数
async getInfo(){
    // 把服务器data属性重命名为res
    const {data:res } = await wx.p.request({
        method:'GET',
        url:'https://www.escook.cn/api/get',
        data:name:'zs',age:20
    })
	console.log(res)
},

4. 全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：VueX、Redux、MobX等。

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中：

• mobx-miniprogram用来创建Store实例对象
• mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用

安装

在项目中运行如下的命令，安装MobX相关的包：

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

注意：MobX相关的包安装完毕之后，记得删除miniprogram_npm目录后，重新构建npm。

下面以store.js为例说明下用法：

创建store

// store\store.js

// es6按需导入action,observalbe 方法
import { action, observable } from 'mobx-miniprogram'
// es6按需导出 store 方法
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  //计算属性
  get sum() {
    return this.numA + this.numB
  },
  // actions 方法，用来修改store 找那个的数据
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numA += step
  })
})

绑定store的成员

// pages/message/message.js

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

Page({

  // 绑定store的成员到当前页面
  onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },


  onUnload() {
    this.storeBindings.destroyStoreBindins()
  },

})

在页面中使用store中的成员

// pages/message/message.js

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({

  data: {

  },

  btnHandler1(e){
    console.log(e)
    this.updateNum1(e.target.dataset.step)
  },

  // 将store的成员绑定到当前页面
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNum1']
    })
  },
 
  onUnload() {
    this.storeBindings.destroyStoreBindins()
  },

})

<!--pages/message/message.wxml-->

<view>{{numA}}+{{numB}}={{sum}}</view>
<!-- 通过data-step给按钮step绑定数据 -->
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA-1</van-button>

注：上面代码中 data-step可以参考基础组件 | 微信开放文档 (qq.com)中的公共属性data-*

将store中的成员绑定到组件中

// components/numbers/numbers.js

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

Component({

  // 通过 storeBindingsBehavior 实现与组件的绑定
  behaviors: [storeBindingsBehavior],

  storeBindings: {
    store,
    // 指定要绑定的字段数据
    fields: {
      numA: ()=>store.numA, 		// 绑定字段第1种方式
      numB: (store)=>store.numB,	// 绑定字段第2种方式
      sum: 'sum',					// 绑定字段第3种方式
    },
    // 指定要绑定的方法
    actions: {
      updateNum2: 'updateNum2'
    }
  },
})

在组件中使用store中的成员

<!--components/numbers/numbers.wxml-->

<view>{{numA}}+{{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button>

// components/numbers/numbers.js

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

Component({

  behaviors: [storeBindingsBehavior],

  storeBindings: {
    store,
    fields: {
      // 组件自定义的名字 ：'store中定义的成员'
      numA: () => store.numA,
      numB: (store) => store.numA,
      sum: 'sum',
    },
    actions: {
      updateNum2: 'updateNum2'
    }
  },

  methods: {
    btnHandler2(e) {
      console.log(e)
      this.updateNum2(e.target.dataset.step)
    }
  }
})