【小程序-基础进阶】Vant Weapp，API Promise化，全局数据共享，分包（独立分包、分包预下载）

一、使用npm包

1.1 小程序对npm包的支持和限制

• 目前，小程序中已经支持使用npm安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm包有如下3个限制:
  1. 不支持依赖于Node.js内置库的包
  2. 不支持依赖于浏览器内置对象的包
  3. 不支持依赖于C++插件的包

1.2 Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。
官方网址：youzan.github.io/vant-weapp/#/intro

1.2.1 安装Vant组件库

https://youzan.github.io/vant-weapp/#/quickstart

在小程序项目中，安装Vant 组件库主要分为如下3步:

1. 通过npm安装（建议指定版本为@1.3.3)

npm i @vant/weapp -S --production

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

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

4. 构建npm包
   

1.2.2 使用Vant组件

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

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

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

1.2.3 定制全局主题样式

1. CSS变量

Vant Weapp使用CSS变量来实现定制主题。关于CSS变量的基本用法，请参考MDN文档:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/using_css_custom_properties

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

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

• 注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了：

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

2. 定制全局主题样式

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

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

• 变量名称可在Vant官方 配置文件 中查看

1.3 API Promise化

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

1. 在小程序中，实现 API Promise 化主要依赖于miniprogram-api-promise这个第三方的npm包。它的安装和使用步骤如下:

npm install --save [email protected]