15.npm

npm

小程序中支持使用npm安装第三方包，从而提高小程序的开发效率，但也有限制

不支持依赖于 Node.js 内置库的包(没有Node运行环境，http，fs等)

不支持依赖于浏览器内置对象的包(没有浏览器对象，jquery等)

不支持依赖于C++插件的包(加密包等等)

Vant

Vant 是一个轻量、可靠的移动端组件库，同时支持小程序

安装依赖

npm i @vant/weapp -S --production

使用组件

在app.json的usingComponents节点中引入需要的组件，即可直接使用组件

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

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

修改组件样式

定义CSS变量(原先CSS特性)

html{	/* 定义的位置则为变量的作用域 */ 
	/* 定义CSS变量 */
	--main-color:#000000
}
.box1, .box2{
	/* background-color:#000000 */
	background-color: var(--main-color);
	color: var(--main-color, #fff) /* 设置默认值， 当没有这个变量时使用默认值 */
}

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

/* app.wxss */ 
page {
	/* 定制警告按钮的背景颜色和边框颜色 */
	--button-danger-background-color: #C00000;
	--button-danger-border-color: #D60000;
}

API Promise化

API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise的异步API

从而提高代码的可读性、维护性、避免回调地狱

API Promise化主要依赖于 miniprogram-api-promise

安装依赖

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

使用依赖

// 在小程序的入口文件(app.js)，只需调用一次 promisifyAll()方法
// 即可实现异步 API 的 Promise 化
import { promisifyAll } from 'miniprogram-api-promise'

// 定义wxp于wx.p指向空对象 可以通过wx.p获取到promise化的所有wx api
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(){
	const { data: res } = await wx.p.request({
		method: 'GET',
		url: 'https://www.escook.cn/api/get',
		data: { name:'zs', age:20 }
	})
}