【微信小程序】使用npm包

- - 1、小程序对npm的支持与限制
  - [2、Vant Weapp](#2、Vant Weapp)
  - - - [通过 npm 安装](#通过 npm 安装)
        
        [修改 app.json](#修改 app.json)
        
        [修改 project.config.json](#修改 project.config.json)
        
        [构建 npm 包](#构建 npm 包)
  - 3、使用
  - 4、定制全局主题样式
  - [5、API Promise化](#5、API Promise化)

1、小程序对npm的支持与限制

目前，小程序中已经支持使用npm安装第三方包，

从而来提高小程序的开发效率。但是，在小程序中使用 npm包有如下3个限制:

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

2、Vant Weapp

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

官方文档地址https://vant-contrib.gitee.io/vant-weapp/#/home

通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

bash 复制代码

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

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

json 复制代码

{  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意：

由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

构建 npm 包

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

3、使用

💥引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录

json 复制代码

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

引入组件后，可以在 wxml 中直接使用组件

xml 复制代码

<van-button type="primary">按钮</van-button>

4、定制全局主题样式

自定义属性

自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的，它包含的值可以在整个文档中重复使用

由自定义属性标记设定值(比如: --main-color: black;)

由var() 的数束获取值(比如: color: var(--nain-color);)

比如，中main-text-color 此Peoffee更易理解，尤其是这个颜色们在其他上下文中也被使用到。自定义属性受级联的约束。并从其父级继承其值。

基本用法

声明-个自定义属性。属性名需要以两个减号()开始，属性值则可以是任何有效的CSS值。和其他属性一样，自定义属性也是写在规则集之内的,如下:

js 复制代码

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

javascript 复制代码

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

}

5、API Promise化

1、基于回调函数的异步API的缺点

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

式调用:

javascript 复制代码

wx.request({
	method:'',
	url:'',
	data:{},
	success:()=>{ },  //请求成功的回调函数
	fail:() => { }, //请求失败的回调函数
	complete:() =>{ } //请求完成的回调函数
})

2、什么是API Promise化

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

3、实现API Promise化

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

javascript 复制代码

npm install --save miniprogram-api-promise

javascript 复制代码

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

4、调用Promise化之后的异步API

javascript 复制代码

  //定义对应的tap事件处理函数
  async getInfo(){
    const {data:res} =await wx.p.request({
      url: 'https://applet-base-api-t.itheima.net/api/get',
      data:{name:'zs',age:20}
    })
    console.log(res);
  },