微信小程序常用 npm 包

构建 miniprogram_npm 的时候最好先删除原 miniprogram_npm 文件夹！！！

一、微信小程序 @vant/weapp UI 组件库

1.安装 npm 包 @vant/weapp

npm i -S @vant/weapp --production

2.构建 miniprogram_npm 微信 npm 包

菜单栏 -> 工具 -> 构建 npm

3.修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

二、微信小程序 API Promise 改造

1.安装 npm 包 miniprogram-api-promise

npm i -S miniprogram-api-promise

2.构建 miniprogram_npm 微信 npm 包

菜单栏 -> 工具 -> 构建 npm

3.在全局 app.js 引入

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

三、微信小程序全局数据共享方案

mobx-miniprogram 和 mobx-miniprogram-bindings 实现全局数据共享方案。

• mobx-miniprogram 用来创建 Store 实例对象。

• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或者页面中使用。

npm i -S mobx-miniprogram mobx-miniprogram-bindings

2.构建 miniprogram_npm 微信 npm 包

菜单栏 -> 工具 -> 构建 npm

3.1.创建 store 实例对象 挂在 store 成员

// 根目录下创建 store 文件夹 -> 创建 store.js 文件

// 创建 store 实例对象
import {observable,action} from 'mobx-miniprogram'

// 挂在数据 全局共享
export const store = observable({
  // 数据字段
  numA:1,
  numB:2,
  // 计算属性，get 修饰符 值只读
  get sum(){
    return this.numA + this.numB
  },
  //actions 函数，专门来修改 store 中数据的值
  updateNum1:action(function(step){
    this.numA += step
  }),
  updateNum2:action(function(step){
    this.numB += step
  })
})

3.2.页面中使用 store 成员

// 页面的 .js 文件 引入
// 通过 createStoreBindings 将 store 中的属性和方法绑定到页面中来进行使用
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

Page({
  // 方法定义在 .js 中使用
  btnHandler(e){
    this.updateNum1(e.target.dataset.step)
  },
  onLoad(options) {
    // 挂在到页面 this.createStoreBindings 属性
    // createStoreBindings(this,{}) 绑定到 页面 this 实例并传递 sotre
    this.createStoreBindings = createStoreBindings(this, {
      store, // 数据源
      fields: ['numA','numB','sum'], // 字段数据
      actions: ['updateNum1'] // action
    })
  },
  onUnload() {
    // 清理工作
    this.createStoreBindings.destroyStoreBindings()
  },

})

// 页面的 .wxml
// 数据字段 计算属性 直接在页面使用
<view>{{numA}}+{{numB}}={{sum}}</view>
// 方法 绑定事件，在 事件处理函数 调用
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">
  numA+1
</van-button>

<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">
  numA-1
</van-button>

3.3.在组件中使用 store 成员

// 组件的 .js 文件 引入
// 通过 storeBingsBehavior 将 store 中的属性和方法绑定到组件中来进行使用
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
import {store} from '../../store';

Component({
 behaviors:[storeBingsBehavior], // 通过 storeBingsBehavior 来实现自动绑定
 storeBings:{
   store, // 指定要绑定的 store
   fields:{ // 要绑定的字段数据
     numA:() => store.numA, // 绑定字段的第一个方式
     numB:(store) => store.numB // 绑定字段的第二种方式
     sum:'sum' // 绑定字段的第三种方式
   }，
   actions:{ // 指定要绑定的方法
    updateNum2:'updateNum2'
   }
 },
 methods: {
   btnHandler2(e){
     this.updateNum2(e.target.dataset.step)
   }
 }
})

//页面的 .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>