当前位置: 首页 > article >正文

微信小程序集成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组件,去对应的去引用,这个路径对应的是如下图所示:

可以看到效果

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


http://www.kler.cn/a/503889.html

相关文章:

  • 【spring mvc】文件上传、下载
  • Wireshark 使用教程:网络分析从入门到精通
  • v-bind操作class
  • GO语言实现KMP算法
  • SOME/IP 协议详解——服务发现
  • primitive 的 Appearance编写着色器材质
  • LeetCode题练习与总结:01 矩阵--542
  • 构建优雅、高效的 Nodejs 命令行工具 - Archons
  • day13-第一次摸底考试题及讲解
  • L2 正则化(权重衰减)
  • 优化 MySQL 的慢查询
  • WPF系列十二:图形控件CombinedGeometry
  • 42_Lua table表
  • 【拒绝算法PUA】3065. 超过阈值的最少操作数 I
  • Spring Boot 2 学习全攻略
  • w~大模型~合集27
  • 托宾效应和托宾q理论。简单解释
  • uniapp 发布后原生img正常,image无法显示,img与uniapp image使用区别
  • 【Block总结】Conv2Former的Block,结合卷积网络和Transformer的优点|即插即用
  • 视频超分(VSR)论文阅读记录/idea积累(一)
  • 【学术会议指南】方向包括遥感、测绘、图像处理、信息化教育、计算机技术、通信、大数据、人工智能、机械设计、仿真...可线上参与
  • Oracle重启后业务连接大量library cache lock
  • 【web靶场】之upload-labs专项训练(基于BUUCTF平台)
  • 工程师 - Eclipse安装和UML插件
  • 代码随想录刷题day07|(数组篇)58.区间和
  • LeetCode 热题 100_从前序与中序遍历序列构造二叉树(47_105_中等_C++)(二叉树;递归)