06-npm
使用
在小程序中npm包有如下3个限制:
- 不支持依赖于Node.js内置库的包
- 不支持依赖于浏览器内置对象的包
- 不支持依赖于C++插件的包
Vant UI
安装
-
初始化npm
npm init -y
生成package.json
文件 -
通过npm安装
npm i @vant/weapp -S --production
-
工具》构建npm,详情》本地设置》使用勾选npm模块
-
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需要按照如下的方式调用:
![image-20220208202815281](https://gitee.com/ushai/yunhaiblog/raw/master/wechat/202202082034123.png)
**缺点:**容易造成回调地狱的问题,代码的可读性、维护性差!
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中的成员绑定到组件中
-
组件中华导入
// components/numbers/numbers.js import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import { store } from '../../store/store'
-
创建
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)
}
}