1.小程序对npm的支持和限制
目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用npm包有如下3个限制:
(1)不支持依赖于Node.js内置库的包
(2)不支持依赖于浏览器内置对象的包
(3)不支持依赖于C++插件的包
2.Vant Weapp 组件库
(1)官方文档地址: Vant Weapp - 轻量、可靠的小程序 UI 组件库
(2)css定义变量
使用 CSS 自定义属性(变量) - CSS:层叠样式表 | MDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
--main-color: lightgreen
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box1,.box2,.box3,.box4 {
margin: 10px;
width: calc(50% - 20px);
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
}
.box1,.box2 {
background-color: var(--main-color);
}
.box3 {
color: var(--main-color);
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">123</div>
<div class="box4"></div>
</div>
</body>
</html>
(3)小程序对于vant组件库定制全局主题样式
在app.wxss中,写入CSS变量,即可对全局生效
page {
/* 定制警告按钮的背景颜色和边框颜色 */
--button-dange-background-color: #c00000;
--button-danger-border-color: #d60000;
}
3.API Promise 化
API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步API,升级改造为基础Promise的异步API,从而提高代码的可读性、维护性,避免回调地狱的问题。
npm i miniprogram-api-promise
// app.js 小程序入口文件
// 在小程序入口文件中,只需要调用一次promisifyAll()方法,即可实现异步API的Promise化
import {
promisifyAll
} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)
// 页面中使用
Page({
async getInfo() {
const {
data: res
} = await wx.p.request({
url: '',
method: 'GET',
data: {
name: 'zs',
age: 18
},
})
console.log(res);
}
})