118.【微信小程序 - 02】（五）

(七)、npm

1.使用npm包

(1).小程序对npm的支持与限制

目前，小程序已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率，但是，在小程序中使用npm包有3个限制:

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

总结: 虽然npm上的包有千千万，但是能够供小程序使用的包却:“为数不多”。

2.使用npm包 - Vant Weapp

(1).什么是Vant Weapp

Vant Weapp是有赞助前端团队开源的小程序UI组件库，助理于开发者快速搭建小程序应用。它所使用的是 MIT开源许可协议，对商业使用比较友好。

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

(2).安装 Vant 组件库

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

初始化项目

npm init -y

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

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

2. 构建npm包

新版本不用去本地设置里面勾选了

3. 修改app.json

(3).使用Vant 组件

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

1. 在app.json这个文件中写

home.json

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

home.wxml

<!--pages/home/home.wxml-->
<text class="t1">首页</text>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

(4).定制全局主题样式

1. 介绍全局主题样式

Vant Weapp 使用CSS变量来实现定制主题。关于CSS变量的基本用法: 请参考MDN文档。

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

自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）

复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。

举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。如：–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。

--main-bg-color: brown;
 background-color: var(--main-bg-color);

2. 定制全局主题样式

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

1. 为什么要用page做节点?
2. 为什么名字是这些?

app.json

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}
/* 我们在这里为什么要使用page节点. */
page{
  /* 为什么我们的按钮名字是这些?  https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less */
  --button-danger-background-color: #C00000;
  --button-danger-border-color: #D60000; 
}

home.wxml

<!--pages/home/home.wxml-->
<text class="t1">首页</text>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

源码

根节点