💌 所属专栏:【微信小程序开发教程】
😀 作 者:我是夜阑的狗🐶
🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!
💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘
您的点赞、关注、收藏、评论,是对我最大的激励和支持!!!🤩 🤩 🤩
前言
大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第41篇文章;
今天开始学习微信小程序的第22天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏,【源代码下载地址】。
一、使用 npm 包 - Vant Weapp
前面对学习到的自定义组件等相关内容进行了一个总结。接下来就来学习小程序中的使用 npm 包 - Vant Weapp。话不多说,让我们原文再续,书接上回吧。
目前,小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用 npm 包有如下 3 个限制:
- 不支持依赖于 Node.js 内置库的包。
- 不支持依赖于浏览器内置对象的包。
- 不支持依赖于 C++ 插件的包。
由于限制太多,所以能供小程序使用的包基本上为数不多。
1、Vant Weapp
Vant Weapp
是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是 MIT
开源许可协议,对商业使用比较友好,更多详细内容可以看一下 官方文档地址。
2、安装 Vant 组件库
在小程序项目中,安装 Vant 组件库主要分为如下 4 步:
- Step 1、 通过 npm 安装(建议指定版本为@1.3.3,以防出现不必要的问题)。
通过 npm 安装
npm i @vant/weapp -S --production
通过 yarn 安装
yarn add @vant/weapp --production
安装 0.x 版本
npm i vant-weapp -S --production
安装之前,要确认是否有包配置管理文件,没有的话需要初始化包管理配置文件,初始化指令:npm init -y
。
初始化包配置文件成功之后就会出现这个文件。
接下来就是通过命令来安装 npm 包了,这里要指定安装版本为 1.3.3。
安装成功之后就会出现该文件夹。
- Step 2、 修改 app.json。
将 app.json 中的
"style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
- Step 3、 修改 project.config.json
开发者工具创建的项目,miniprogramRoot
默认为 miniprogram
,package.json
在其外部,npm 构建无法正常工作。需要手动在 project.config.json
内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm 构建的文件目录为 miniprogram_npm,并且开发工具会默认在当前目录下创建 miniprogram_npm 的文件名,所以新版本的 miniprogramNpmDistDir 配置为’./'即可。
- Step 4、 构建 npm 包。
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
在开发者工具版本1.06.2301160下,是没有看到 使用npm模块 这个选项的。
如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。详细的操作步骤,可以参考 Vant 官方提供的 快速上手教程。
3、使用 Vant 组件
安装完 Vant 组件库之后,可以在 app.json
的 usingComponents
节点中引入需要的组件,即可在 wxml 中直接使用组件。这里以 button 组件为例,因为 button 使用的比较频繁,所以比较适合全局引用。具体代码如下:
app.json
{
"usingComponents":{
"van-button": "@vant/weapp/button/index"
},
}
message.wxml
<van-button type="primary">van按钮</van-button>
可以来看一下运行效果:
4、定制全局主题样式
Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法,请参考 MDN 文档 。
在 app.wxss
中,写入 CSS
变量,即可对全局生效,具体代码如下:
message.wxml
<van-button type="primary">van按钮</van-button>
<van-button type="danger">按钮2</van-button>
app.wxss
page{
--button-danger-background-color:#C00000;
--button-danger-border-color:#D60000;
}
看到这里就会有疑问了,为什么要使用page 节点?为了让这些变量全局生效,要定义在根节点,而页面的根节点就是 page。为什么要这么命名?所有可用的颜色变量,请参考 Vant 官方提供的 配置文件 。
可以来看一下运行效果:
总结
感谢观看,这里就是使用 npm 包 - Vant Weapp的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹
也欢迎你,关注我。👍 👍 👍
原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解(持续更新中)】
- 🌼 【鸿蒙系统】
- 👑 【Python脚本笔记】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记(华为云)】
- 🦄 【程序错误解决方法(建议收藏)】
- 🚀 【软件安装教程】
订阅更多,你们将会看到更多的优质内容!!