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

news/2025/1/15 5:05:29/

什么是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.ppmy.cn/news/1563228.html

相关文章

51单片机入门基础

目录 一、基础知识储备 (一)了解51单片机的基本概念 (二)掌握数字电路基础 (三)学习C语言编程基础 二、开发环境搭建 (一)硬件准备 (二)软件准备 三、…

移动应用安全:保护用户隐私与数据的关键解决方案

移动应用安全为何如此重要? 随着智能设备的普及和移动应用的快速增长,移动应用已成为人们日常生活的重要组成部分。然而,移动应用安全问题也日益严峻。用户隐私泄露、数据被盗、恶意软件攻击等问题给个人和企业都带来了巨大的风险。 移动应用…

对受控组件和非受控组件的理解?应用场景?

受控组件与非受控组件的理解与应用 在 React 中,组件可以通过两种方式管理表单元素的状态:受控组件和非受控组件。这两者在处理表单输入数据时有很大的区别,理解它们的应用场景和优劣对于开发者来说非常重要。 目录结构: 受控组…

如何在 Linux、MacOS 以及 Windows 中打开控制面板

控制面板不仅仅是一系列图标和菜单的集合;它是通往优化个人计算体验的大门。通过它,用户可以轻松调整从外观到性能的各种参数,确保他们的电脑能够完美地适应自己的需求。无论是想要提升系统安全性、管理硬件设备,还是简单地改变桌…

开源的镜像扫描的软件

是的,有许多开源的镜像扫描工具可以生成详细的扫描报告。以下是几款常用的开源镜像扫描工具,它们都支持生成报告: 1. Trivy 简介:Trivy 是一款简单易用的开源漏洞扫描工具,支持容器镜像、文件系统和 Git 仓库的扫描。…

ARP-Batch-Retargeting 部署实战

git 地址: https://github.com/Shimingyi/ARP-Batch-Retargeting bpy安装: pypi上搜索 bpy bpy 4.3.0,4.2.0版本报错: Traceback (most recent call last):File "E:\project\jijia_4d\retarget\ARP-Batch-Retargeting-…

C#上位机通过CAN总线发送bin文件

让gpt生成一段代码用来把bin文件通过can总线发出去 c#代码还是比较强大的,各种功能基本都是一两行代码就实现了,这里记录一下对这个代码的理解和解读 主要代码如下,传入bin文件的地址即可将其从指定的can通道发送出去: public …

<2025 网络安全>《网络安全政策法规-关键信息基础设施安全保护条例》

1 政策出台背景 ‌《关键信息基础设施安全保护条例》的实施背景主要包括以下几个方面‌: 首先,‌关键信息基础设施在经济社会中的重要地位使其成为网络安全的核心保护对象‌。关键信息基础设施包括公共通信和信息服务、能源、交通、水利、金融、公共服…