五分钟学会在微信小程序中使用 vantUI 组件库
前言
我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步。但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库。而 vant Weapp 作为一款优秀的前端 UI 组件库,可以帮助我们快速地构建漂亮而且易用的界面。在本文中,我将会介绍 vant Weapp 如何在微信小程序中安装、使用,以及它如何帮助我们构建高质量的微信小程序。
使用步骤
一、打开终端窗口
在微信开发者工具中,右击选择『在外部终端窗口中打开』,具体操作如下图:
二、初始化
输入初始化项目的命令生成
package.json
包,如果出现像下图让你选择时一路回车即可,当然你也可以以npm init -y
的形式安装,具体操作如下图:
备注: -y
的含义你可以简单理解为 yes
的意思,在初始化的时候省去了敲回车的繁琐步骤。可根据自己需要选择哪一种安装方式。
npm init
npm init -y
二、安装依赖
在打开的命令窗口中依次输入下面的命令,具体操作如下图:
//直接安装
npm i --production
npm i vant-weapp -S --production
//淘宝镜像安装
cnpm i --production
cnpm i vant-weapp -S --production
四、修改 app.json 文件
将
app.json
文件中的"style": "v2"
去除,原因是小程序的新版基础组件强行加上了许多样式,难以覆盖,不去除容易造成部分组件样式混乱。如下图:
五、构建 npm
在微信开发者工具左上角找到『工具』→ 『构建npm』,然后在微信开发者工具右上角找到『详情』→ 『使用npm模块』勾选选项,构建完成后,即可引入组件具体操作如下图:
六、使用
当在某个页面中调用
vant Weapp
的组件时,在app.json
文件中添加配置即可,当然你也可以选择按需引入,在对应页面的json
文件中配置,如下图:
- 全局配置引入 -----
app.json
全局引入只需在 app.json
配置 usingComponents
选项即可引入组件,在所有页面中都可以使用引入的组件。这种方式的缺点是会给项目造成压力,建议当一个组件在很多页面都需要用到时,才使用全局引入
"usingComponents": {//需要组件引入即可"van-button": "./miniprogram_npm/vant-weapp/button/index"
}
- 局部配置引入 -----
index.json
局部引入需要在页面的 json
文件里配置 usingComponents
选项,这种按需引入组件的方式可以很大程度上减少项目的压力,但缺点是只有当前页面可以使用该组件,其他页面不能使用。
{"usingComponents": {"van-button": "../../miniprogram_npm/vant-weapp/button/index"}
}
提示类组件使用
大家可能比较好奇,为什么要把提示类的组件单独拎出来说呢?这是因为,提示类组件的使用跟 button
这些组件的使用略有不同,一不小心就遇到问题了。下面我按照官方文档给大家操作一遍,如下图:
这里我给按钮绑定了一个点击事件,即点击按钮后出现轻提示
当我点击按钮
可以明显看到我们写好的事件触发轻提示并没有触发,甚至控制台还报错了,这是为什么呢?
在仔细查看过官方文档之后,发现类似的组件文档中有都有这么一段的代码,需要我们额外引入或者添加。
在
js
中引入并且在wxml
文件中添加相关代码后
总结
微信小程序是一种新兴的应用形式,在这种应用中,vant Weapp
框架可以帮助开发者快速实现小程序页面的完成。同时 vant Weapp
通过大量实际项目的反馈和调整,达到了深度定制化的效果,可以帮助小程序开发者减轻很多工作负担,从而更加专注于业务逻辑的实现,也为小程序开发者提供非常好的开发体验。在实际应用中,我们可以深度挖掘 vant Weapp
组件库内部的潜力,将其与业务需求结合,从而实现更加高效、智能的小程序开发。最后附上 vant Weapp 的官方地址,感兴趣的同学可以去官网更深入的了解。
五分钟学会在微信小程序中使用 vantUI 组件库相关推荐
- 微信小程序中使用vant组件库(超详细)
目录 前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
- 微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
- html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
- 微信小程序中使用阿里巴巴图标库
这里写自定义目录标题 微信小程序中使用阿里巴巴图标库 第一步 第二步 第三步 微信小程序中使用阿里巴巴图标库 第一步 阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
- 微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
- 微信小程序中使用video组件
文章目录 前情提要 搭建视频服务器 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js ...
- 微信小程序前端引入weui组件库
正在开发的微信小程序,想使用weui组件库. 步骤如下: 基础:1.小程序开发工具:1.06.22 1. 初始化 以管理员身份运行命令行窗口(cmd)或使用VSCode进入终端,在cmd中进入项目的 ...
- 在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹 把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
- 《九》微信小程序中的自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护. 自定义组件:可复用的 WXML.WXSS.JS.JSON. beh ...
最新文章
- 学习redhat linux 6.1中文版笔记
- java青蛙青蛙跳井_公务员行测技巧:青蛙跳井问题
- 1.9 程序示例--局部加权线性回归-机器学习笔记-斯坦福吴恩达教授
- 主板h110能装linux吗_H110主板好用吗 H110主板配CPU技巧介绍(DIY装机必看)
- RequestMapping介绍
- 阿里程序员深夜智救31楼跳楼邻居
- 【AI视野·今日CV 计算机视觉论文速览 第156期】Mon, 9 Sep 2019
- 人工神经网络算法原理和应用
- 用计算机画出方格表,方格造型图_怎么做这种颜色相间的方格图(有图)_彩妆阁...
- R语言-plyr包中的函数
- C++空类中的默认函数
- 从git commit号码 revert_git revert amp; git rebase amp; commit 分支图
- 单列(写了池子pool)用list实现的方法, 与伪单例(写了池子zidianpool),用字典实现的方法,可以存入不同,i名字的物体...
- (2022.9)raspberry 4安装HP 1020 plus打印机,利用树莓派4制作无线打印服务器
- 计算机软件专业的毕业设计论文写作技巧【精华总结】
- python 日期时间处理_如何使用Python处理日期和时间
- 数据湖:数据同步工具NiFi
- 华硕vm510l装固态硬盘_华硕VM510L拆机换固态硬盘
- 基于ROCKCHIP的ubuntu-base根文件系统构建
- BibTeX的使用方法