微信小程序集成Vant Weapp移动端开发的框架

什么是Vant Weapp

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

官网地睛:介绍 - Vant Weapp (vant-ui.github.io)

使用的步骤

下面一一展示使用的步骤:

一、第一步,打开CMD终端进入到小程序项目目录


二、对项目进行初始化

npm init -y

此时看下图:

三、进行安装依赖

1、通过npm安装vant/weapp

npm i @vant/weapp -S --production

2、安装miniprogram

npm i miniprogram-sm-crypto --production

进行安装完毕后,回发现目录下多了一些文件

四、修改app.json

将 app.json 中的 "style": "v2" 去除,原因是小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

五、修改project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

此处这里也可以写成 这样的形式

"miniprogramNpmDistDir": "./"

六、然后构建npm 需要点击左上角的工具栏

构建成功,会出现如下图所示:

点击确定即可。

八、使用组件

按官网的说明文档

实操一下:我这里在全局里面注册一个按钮,然后使用它。先去app.json中注册

这个是使用一个vant组件,去对应的去引用,这个路径对应的是如下图所示:

可以看到效果

结尾:样例小程序二维码,自己做的一个免费好用的排班小程序

相关推荐
寰宇软件2 小时前
PHP智慧小区物业管理小程序
小程序·uni-app·vue·php
Jiaberrr3 小时前
微信小程序:跨页面数据修改全攻略
前端·javascript·微信小程序·小程序
牛马程序员‍4 小时前
【云岚到家】-day02-客户管理-认证授权
微信小程序·apache·认证
春日迟迟~11 小时前
微信小程序 实现拼图功能
前端·javascript·微信小程序
code袁12 小时前
校园跑腿小程序--我的,登录和注册页面开发
小程序·校园跑腿小程序·小程序开发
小新11015 小时前
微信小程序获取openid
微信小程序·小程序·nodejs
Cc_Debugger15 小时前
微信小程序wx.showToast在真机显示时时间设置无效,显示时间很短问题
微信小程序·小程序
一个处女座的程序猿O(∩_∩)O15 小时前
微信小程序原生与 H5 交互方式
微信小程序·小程序
源码站~15 小时前
基于springboot+vue+微信小程序的宠物领养系统
vue.js·spring boot·微信小程序