【小程序】小程序学习05-npm

06-npm

使用

在小程序中npm包有如下3个限制：

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

Vant UI

安装

1. 初始化npm npm init -y 生成package.json文件

   

2. 通过npm安装 npm i @vant/weapp -S --production

   

3. 工具》构建npm，详情》本地设置》使用勾选npm模块

4. app.json去除"style":v2

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

定制全局主题样式

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

<!--pages/home/home.wxml-->
<van-button type="default">默认按钮</van-button>
<van-button type="danger">危险按钮</van-button>

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

/* app.wxss */
/* 每个页面的page标签是范围最大的标签域 */
page {
  /* 自定义定制样式（需引用） */
  --button-danger-background-color: #C00000;
  --button-danger-border-color: #D60000;
  /* 通过type直接修改type为primary的button样式 */
  --button-primary-background-color: #16a8a2;
  --button-primary-border-color:#05504d;
}

/* pages/home/home.wxss */
.danger-button {
    background-color: var(--button-danger-background-color);
    border-color: var(--button-danger-border-color);
}

API Promise化

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

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

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

实现API Promise化

在小程序中，实现API Promise 化主要依赖于miniprogram-api-promise这个第三方的npm包。1.0.4版本

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

但还不能直接使用，删除miniprogram_npm文件夹，重新构建npm后多出现了一个文件夹（可以在小程序中使用）

// app.js
// 调用promisifyAll()方法，即可实现异步API的Promise化
import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)  // 之后可以通过wx.p来调用Promise化的API了

调用Promise化后的异步API

<!--pages/home/home.wxml-->
<van-button bindtap="getInfo">getInfo按钮</van-button>

// pages/home/home.js
async getInfo() {
    // {data:res} 获取数据中data属性命名为res
    const {data:res} = await wx.p.request({
        url: 'https://www.escook.cn/api/get',
        method: 'GET',
        data: {
            name: 'zs',
            age: 22
        }
    })
    console.log(res)
},

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqJXDEQD-1644553277433)(C:\Users\shai\AppData\Roaming\Typora\typora-user-images\image-20220208214418103.png)]

全局数据共享

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

开发中常用的全局数据共享方案有：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。

创建MobX的Store实例

// Store/store.js
// 专门创建Store的实例对象
import {observable} from 'mobx-miniprogram'

export const store = observable({   // es6导出语法
    // 数据字段
    numA: 1,
    numB: 2,
    // 计算属性
    get sum() { // get：当前计算属性的值是 只读的，只能获取
        return this.numA + this.numB
    },
    // action函数，专门修改store中数据的值
    updateNum1: action(function (step) { // 修改numA的值
        this.numA += step
    }),
    updateNum2: action(function (step) { // 修改numB的值
        this.numB += step
    }),
})

修改数据是外界通过调用store里的方法来修改里面的数据，而不是直接修改

将Store中的成员绑定到页面中

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

// Page({})
onLoad: function (options) {
    // MobX  字段 方法
    this.storeBindings = createStoreBindings(this, {
        store,
        fields: ['numA','numB','sum'],
        // store.js中的updateNum1方法映射到当前页面
        actions: ['updateNum1'] 
    })
},
onUnload: function () {
    // MobX
    this.storeBindings.destroyStoreBindings()
},

在页面上使用Store中的成员

点击button数据实时更新

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

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

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

1. 组件中华导入

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

2. 创建behaviors数组

   Component({
       behaviors: [storeBindingsBehavior],
       storeBindings: {
           // 数据源
           store,
           fields: {
               // xxx: 'numA'
               numA: 'numA', // 映射名：store中的属性名
               numB: 'numB',
               sum: 'sum'
           },
           actions: {
               updateNum2: 'updateNum2'
           }
       },
       ......
   

在组件中使用Store中的成员

<!--components/numbers/numbers.wxml-->
<view>---numbers组件---</view>
<van-button type="primary" bindtap="btnHander2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHander2" data-step="{{-1}}">numB-1</van-button>

// components/numbers/numbers.js
methods: {
    btnHander2(e) {
        console.log(e.target.dataset.step)
        this.updateNum2(e.target.dataset.step)
    }
}