目录

• • • 使用npm包
    • • 小程序对npm的支持和限制
    • Vant Weapp
    • • 定制全局主题模式
    • API Promise化

使用npm包

小程序对npm的支持和限制

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

Vant Weapp

Vant Weapp是赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。

• 通过npm安装（建议指定版本@1.3.3）

npm i @vant/weapp@1.3.3 -S --production 

• 构建npm包，打开微信开发者工具，点击工具->构建->，勾选使用npm模块选项，构建完成后即可引入组件

• 修改app.json，去除"style":"v2"

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

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

定制全局主题模式

Vant Weapp使用CSS变量来实现定制主题。建议观看以下网址

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

vant weapp官网
定义变量，声明一个属性名，必须以（–）开始，属性值则可以是任何有效的CSS值，和其他属性一样，自定义属性也是写在规则集之内的。注意，规则集所指定的选择器定义了自定义属性的可见作用域，只有在定义属性标签内部可以引用。通常的最佳实践是定义在根伪类:root下，这样就可以在HTML文档的任何地方访问到它了。

element {--main-bg-color: brown;
}

使用局部变量时用var()函数包裹以表示一个合法的属性值。

element {background-color: var(--main-bg-color);
}

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

page{--button-primary-color:red
}

可以通过这个方式，得到vant自定义属性名来全局vant组件的样式。自定义属性名可以参考以下链接

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

vant weapp配置文件

API Promise化

小程序官方提供的异步API都是基于回调函数实现的，缺点就是容易造成回调地狱的问题，代码的可读性、维护性差。

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

实现API Promise化主要依赖于minprogram-api-promise这个第三方的npm包。

在终端输入npm install --save miniprogram-api-promise@1.0.4
安装完成之后，需要先删除miniprogram_npm文件夹，然后再次进行构建npm
在小程序app.js文件调用promisifyAll()方法

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

使用

  async getColor(){this.setData({isloading:true})const{data:res} = await wx.p.request({url: 'https://www.escook.cn/api/color',method:'GET',})this.setData({colorList:[...this.data.colorList,...res.data]})}