小程序学习记录九：小程序npm包的使用

一、npm包的限制

1.不支持依赖于Node.js内置库的包

2.不支持依赖于浏览器内置对象的包
jq就不支持。

3.不支持依赖c++插件的包
一些加密的包。

二、Vant Weapp组件库

使用的MIT开源许可协议，对商业使用友好。

1.安装

首先需要创建package.json包管理文件。
然后下载插件，建议使用@1.3.3

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

2.构建npm包

点击工具，选中构建npm选项
然后点击详情，勾选使用npm模块。
这样就能使用npm模块了
因为小程序不是直接使用node_modules包的，而是使用的miniprogram_npm。每次下载一个包后，需要先删除miniprogram_npm包，然后重新构建npm，才能正常使用。

3.修改app.json

将 app.json 中的 “style”: “v2” 去除
这样就能使用vant插件了。

三、定义和使用CSS变量

1.定义变量

html{
 --main-color :red
}

需要用两个减号
变量的使用也是有作用域的，
定义在html下，可以给所有的元素都使用
要是定义好一个id或class，只有这个元素及其子元素能使用了。

2.使用变量

div{
 color:var(--main-color)
}

3.vant里使用css变量

在app.wxss文件中

/* 定义一个css变量节点 
page节点表示每个小程序页面的根节点,相当于html
这样每个元素才都能使用css变量

*/
page{

  /* 这个表示危险按钮的背景色变成其他颜色 */
  --button-danger-background-color:#D60000;

}