微信小程序集成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.rhkb.cn/news/2102.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(STM32笔记)十二、DMA的基础知识与用法 第二部分

我用的是正点的STM32F103来进行学习,板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话,用的也是这个板子和教程。 DMA的基础知识与用法 二、DMA传输设置1、数据来源与数据去向外设到存储器存储器到外设存储器到存储器 2、每次传输大小3、传…

C语言 - 可变参数函数 va_list、va_start、va_arg、va_end

目录 一、_INTSIZEOF宏分析 二、可变参数函数介绍 1、va_list 2、va_start 3、va_arg 4、va_end 三、使用介绍 示例1: 示例2: 一、_INTSIZEOF宏分析 #define _INTSIZEOF(n) ((sizeof(n)sizeof(int)-1)&~(sizeof(int) - 1) ) 功能&#x…

【Rust自学】12.2. 读取文件

12.2.0. 写在正文之前 第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print),是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。 这个项目分为这么几步: 接收命令行参数读…

记一次OpenEuler Linux磁盘分区表损坏的数据恢复

问题复现 原本有一台GIS地图服务器存放大量数据,突然有一天磁盘满了,于是运维人员照常进行磁盘扩容。但由于误操作,导致使用fdisk的时候把分区表损坏了,表现如下: 这里可以看到启动时能看到xvda被分为了xvda1和xvda2…

二手车交易系统的设计与实现(代码+数据库+LW)

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统二手车交易信息管理难度大,容错率低&#xf…

【大模型系列篇】数字人音唇同步模型——腾讯开源MuseTalk

之前有一期我们体验了阿里开源的半身数字人项目EchoMimicV2,感兴趣的小伙伴可跳转至《AI半身数字人开箱体验——开源项目EchoMimicV2》,今天带大家来体验腾讯开源的数字人音唇同步模型MuseTalk。 MuseTalk 是一个实时高品质音频驱动的唇形同步模型&#…

如何禁用 PySpark 在运行时打印信息

我已经开始使用 PySpark。PySpark 的版本是3.5.4,它是通过 进行安装的pip。 这是我的代码: from pyspark.sql import SparkSession pyspark SparkSession.builder.master("local[8]").appName("test").getOrCreate() df pyspark…

HTML拖拽功能(纯html5+JS实现)

1、HTML拖拽--单元行拖动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><…

GLM: General Language Model Pretraining with Autoregressive Blank Infilling论文解读

论文地址&#xff1a;https://arxiv.org/abs/2103.10360 参考&#xff1a;https://zhuanlan.zhihu.com/p/532851481 GLM混合了自注意力和masked注意力&#xff0c;而且使用了2D位置编码。第一维的含义是在PartA中的位置&#xff0c;如5 5 5。第二维的含义是在Span内部的位置&a…

华为数通HCIE备考经验分享

在分享我的考试心得前我先介绍一下我自己&#xff0c;我叫郑同学&#xff0c;22岁&#xff0c;就读于深圳信息职业技术学院移动通信技术专业&#xff0c;在2024年的9月&#xff0c;我成功获得了HCIE-Datacom证书。 考证契机 我的备考之旅始于去年2023年的华为ICT大赛。在这场…

Web开发(二)CSS3基础与进阶

Web开发&#xff08;二&#xff09;CSS3基础与进阶 写在前面 参考黑马程序员前端Web教程做的笔记&#xff0c;主要是想后面自己搭建网页玩。 这部分是前端HTML5CSS3移动web视频教程的CSS3基础与进阶部分&#xff0c;包括CSS3的选择器、文字控制属性、背景属性、显示模式等CS…

使用PWM生成模式驱动BLDC三相无刷直流电机

引言 在 TI 的无刷直流 (BLDC) DRV8x 产品系列使用的栅极驱动器应用中&#xff0c;通常使用一些控制模式来切换MOSFET 开关的输出栅极。这些控制模式包括&#xff1a;1x、3x、6x 和独立脉宽调制 (PWM) 模式。   不过&#xff0c;DRV8x 产品系列&#xff08;例如 DRV8311&…

mac 安装docker

1、下载docker 进入 /Applications/Docker.app/Contents/MacOS/Docker Desktop.app/Contents/Resources目录 把app.asar 文件备份 将下载的中文包复制进去。修改成一样的名字 [汉化包下载地址](https://github.com/asxez/DockerDesktop-CN)

jupyter notebook练手项目:线性回归——学习时间与成绩的关系

线性回归——学习时间与学习成绩的关系 第1步&#xff1a;导入工具库 pandas——数据分析库&#xff0c;提供了数据结构&#xff08;如DataFrame和Series&#xff09;和数据操作方法&#xff0c;方便对数据集进行读取、清洗、转换等操作。 matplotlib——绘图库&#xff0c;p…

Vue3使用vue-count-to数字滚动模块报错解决方案

小伙伴们是不是遇到了vue3项目使用vue-count-to出现报错的问题 报错如下&#xff1a; TypeError: Cannot read properties of undefined (reading _c) 这个错误信息具体是说没读取到_c的属性 具体不清楚是什么原因&#xff0c;排查还得去看源码&#xff0c;所以我们来解决&a…

「实战应用」如何为DHTMLX JavaScript 甘特图添加进度线

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求&#xff0c;是最完善的甘特图图表库。 今天&#xff0c;您将学习如何使用进度线补充JavaScript 甘特图&#xff0c;以便于监控项目进度。 DHTMLX Gantt 最新试用版下载 …

系统架构设计师-第1章-计算机系统知识要点

【本章学习建议】 根据考试大纲&#xff0c;本章主要考查系统架构设计师单选题&#xff0c;预计考1分左右。第二版教材2.2节增加了本块内容&#xff0c;但较为简略&#xff0c;需要课程补充&#xff0c;属于非重点内容。 1.1 计算机硬件组成 计算机的基本硬件系统由运算器、控…

【C】初阶数据结构3 -- 单链表

之前在顺序表那一篇文章中&#xff0c;提到顺序表具有的缺点&#xff0c;比如头插&#xff0c;头删时间复杂度为O(n)&#xff0c;realloc增容有消耗等。而在链表中&#xff0c;这些问题将得到解决。所以在这一篇文章里&#xff0c;我们将会讲解链表的定义与性质&#xff0c;以及…

网络网络层ICMP协议

网络网络层ICMP协议 1. ICMP 协议介绍 ICMP&#xff08;Internet Control Message Protocol&#xff09;是 TCP/IP 协议簇中的网络层控制报文协议。用于在 IP 主机、路由器之间传递控制消息&#xff0c;提供可能有关通信问题的反馈信息。 以及用于网络诊断或调试&#xff08;…

nvm 管理nodejs,安装pnpm后报错,出现:pnpm不是内部或外部命令,也不是可运行的程序或批处理文件。

系统环境&#xff1a;window11&#xff0c;exe安装版nvm出现的该问题&#xff0c;&#xff08;如果是解压缩配置版本&#xff0c;环境变量自己配置&#xff0c;可能就不会出现这个问题了&#xff09; 注意&#xff1a;安装nvm时&#xff0c;两个路径尽量放到一个盘上&#xff…