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

朱雀 2021-09-07 12:58 422阅读 0赞

### 包的概念 ###

*  一、npm包的限制
 *  二、Vant Weapp组件库
 *   *  1.安装
     *  2.构建npm包
     *  3.修改app.json
 *  三、定义和使用CSS变量
 *   *  1.定义变量
     *  2.使用变量
     *  3.vant里使用css变量

# 一、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;
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，422人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序学习记录——1.初识小程序

文章目录 1.前言 2.开发工具介绍开发工具下载创建第一个项目开发工具介绍 3.小程序相关简介

女爷i/ 2023年06月13日 06:12/ 0 赞/ 10 阅读

相关 Java小程序-记录

1. 2013-10-15 / 题目：求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。例如2+22+222

女爷i/ 2022年09月17日 11:24/ 0 赞/ 195 阅读

相关微信小程序使用 npm 构建第三方包

[官方构建地址][Link 1] 构建基础必须安装有 npm , npm 的安装请自行网上查询基本构建步骤 1. 创建小程序项目 2. 利用终端进

╰+哭是因爲堅強的太久メ/ 2021年12月20日 06:39/ 0 赞/ 272 阅读

相关小程序学习记录十：小程序API Promise化

小程序API Promise化一、小程序异步API的缺点二、Promise化异步API 1.安装miniprogram-api-promise

一时失言乱红尘/ 2021年09月07日 13:12/ 0 赞/ 723 阅读

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

包的概念一、npm包的限制二、Vant Weapp组件库 1.安装 2.构建npm包 3.修改app.json

朱雀/ 2021年09月07日 12:58/ 0 赞/ 423 阅读

相关小程序学习记录八：小程序组件

小程序组件一、自定义组件二、局部引用组件三、全局引用组件四、组件和页面的区别五、自定义组件样式六、修改组件样式的隔离选项

电玩女神/ 2021年09月07日 06:19/ 0 赞/ 678 阅读

相关小程序学习记录六：小程序页面开发基础

小程序页面开发基础一、页面导航一、声明式导航 1.tabBar页面之间的跳转。 2.非tabBar页面的跳

比眉伴天荒/ 2021年09月07日 06:19/ 0 赞/ 537 阅读

相关小程序学习记录五：小程序网络请求

小程序网络请求一、小程序网络请求的限制二、配置reques合法域名三、发起get请求四、发起post请求五、在页面加载时请求数据

- 日理万妓/ 2021年09月07日 06:19/ 0 赞/ 450 阅读

相关小程序学习记录四：小程序的配置.json文件

小程序的配置.json文件一、全局.json文件pages属性二、全局.json文件window属性三、全局.json文件tabBar属性

男娘i/ 2021年09月07日 06:19/ 0 赞/ 400 阅读

相关小程序学习记录一：小程序基础认识

小程序基础认识一、小程序和网页的区别 1.运行环境不同 2.API不同二、AppID 三、小程序的目录结构 1

偏执的太偏执、/ 2021年09月07日 06:19/ 0 赞/ 647 阅读