uni-app小程序使用vant
步骤一:安装 Vant Weapp
# 通过 npm 安装
npm i @vant/weapp -S --production# 通过 yarn 安装
yarn add @vant/weapp --production# 安装 0.x 版本
npm i vant-weapp -S --production
步骤二:在根目录下创建“wxcomponents”文件夹
步骤三:找到依赖node_modules/@vant/weapp/dist,复制dist文件

步骤四:把刚刚复制的dist文件粘贴到刚刚新建的“wxcomponents”文件下同时将dist改名为vant

步骤五:在“pages.json”/“globalStyle”里配置“usingComponents”
"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents": {"van-action-sheet": "/wxcomponents/vant/action-sheet/index","van-area": "/wxcomponents/vant/area/index","van-button": "/wxcomponents/vant/button/index","van-card": "/wxcomponents/vant/card/index","van-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-checkbox": "/wxcomponents/vant/checkbox/index","van-checkbox-group": "/wxcomponents/vant/checkbox-group/index","van-col": "/wxcomponents/vant/col/index","van-dialog": "/wxcomponents/vant/dialog/index","van-field": "/wxcomponents/vant/field/index","van-goods-action": "/wxcomponents/vant/goods-action/index","van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index","van-goods-action-button": "/wxcomponents/vant/goods-action-button/index","van-icon": "/wxcomponents/vant/icon/index","van-loading": "/wxcomponents/vant/loading/index","van-nav-bar": "/wxcomponents/vant/nav-bar/index","van-notice-bar": "/wxcomponents/vant/notice-bar/index","van-notify": "/wxcomponents/vant/notify/index","van-panel": "/wxcomponents/vant/panel/index","van-popup": "/wxcomponents/vant/popup/index","van-progress": "/wxcomponents/vant/progress/index","van-radio": "/wxcomponents/vant/radio/index","van-radio-group": "/wxcomponents/vant/radio-group/index","van-row": "/wxcomponents/vant/row/index","van-search": "/wxcomponents/vant/search/index","van-slider": "/wxcomponents/vant/slider/index","van-stepper": "/wxcomponents/vant/stepper/index","van-steps": "/wxcomponents/vant/steps/index","van-submit-bar": "/wxcomponents/vant/submit-bar/index","van-swipe-cell": "/wxcomponents/vant/swipe-cell/index","van-switch": "/wxcomponents/vant/switch/index","van-tab": "/wxcomponents/vant/tab/index","van-tabs": "/wxcomponents/vant/tabs/index","van-tabbar": "/wxcomponents/vant/tabbar/index","van-tabbar-item": "/wxcomponents/vant/tabbar-item/index","van-tag": "/wxcomponents/vant/tag/index","van-toast": "/wxcomponents/vant/toast/index","van-transition": "/wxcomponents/vant/transition/index","van-tree-select": "/wxcomponents/vant/tree-select/index","van-datetime-picker": "/wxcomponents/vant/datetime-picker/index","van-rate": "/wxcomponents/vant/rate/index","van-collapse": "/wxcomponents/vant/collapse/index","van-collapse-item": "/wxcomponents/vant/collapse-item/index","van-picker": "/wxcomponents/vant/picker/index","van-empty": "/wxcomponents/vant/empty/index"}},
步骤六:使用
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
end~~~
如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!
相关文章:
uni-app小程序使用vant
步骤一:安装 Vant Weapp # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production步骤二:在根目录下创建“wxcomponents”文件夹 步骤三:找…...
C-DS二叉树_另一棵树的子树
Description 给你两棵二叉树tree1和tree2,检验tree1中是否包含和tree2具有相同结构和结点值的子树。如果存在,输出true;否则,输出false。 Input 第一行输入t,表示有t个测试样例。 第二行首先输入n1,接着输入n1个整数,表示二叉树tree1。 第三行首先输入n2,接着输入n…...
祝贺璞华大数据产品入选中国信通院“铸基计划”
武汉璞华大数据技术有限公司HawkEye设备数字化管理平台产品,凭借优秀的产品技术能力,通过评估后,入选中国信通院“铸基计划”《高质量数字化转型产品及服务全景图(2023)》的工业数字化领域。 “铸基计划”是中国信通院推出的高质量…...
WebDAV之π-Disk派盘 + MiXplorer
MiXplorer是一款非常强大实用的手机文档管理器,能给用户提供了一系列的文档处理功能,包括本地文件浏览、文件排序、文件筛选、切换视图、新建文件、添加收藏等等,同时还能将你手机里的所有文件都罗列出来,简洁明了,让用户一眼就能够找到相应的文件并对其进行编辑,或是删除…...
java依赖的jar包下载
不需要依赖maven,直接下载jar。 仓库服务...
苹果加大对印度的扶持,提高在其生产iphone的比重
KlipC报道:跟踪苹果产业链,有分析师预计2023年全球约12%-14%的iphone在印度生产,预计2024年,印度将生产20%-25%的iphone。 KlipC的合伙人Andi D表示:“近年来随着苹果对中国的以来,印度已经成为高科技制造和…...
【漏洞复现】typecho_v1.0-14.10.10_unserialize
感谢互联网提供分享知识与智慧,在法治的社会里,请遵守有关法律法规 文章目录 漏洞利用GetShell 下载链接:https://pan.baidu.com/s/1z0w7ret-uXHMuOZpGYDVlw 提取码:lt7a 首页 漏洞点:/install.php?finish 漏洞利用 …...
Linux常见面试题
1、 冯诺依曼体系的要点是: 数字计算机的数制采用二进制,bit 位, byte 字节 1 byte 8 bit计算机应该按照程序顺序执行计算机硬件由运算器、控制器、存储器、输入设备和输出设备五大部分组成 2、计算机的硬件五个组件 控制器: 指挥系统运算器: 数学和逻…...
HarmonyOS ArkTS基础知识
概述 上一节,学习了TypeScript的基础语法,而在鸿蒙开发当中,有基于自己的编程语言,便是ArkTS。它是一种声明式UI的编程范式的语言,开发框架如下图所示: 根据框架图,分析,我将它大致…...
嵌入式课后习题第一章解答
嵌入式系统是一种以应用为中心,以计算机技术为基础,软/硬件可裁剪,适应应用系统对功能、可靠性、成本、体积、功耗严格要求的专用计算机。它与通用PC的区别主要体现在以下几个方面: 应用针对性:嵌入式系统是专为特定应…...
postMessage
A:端口3000 import React, { useEffect } from react;function App() {useEffect(() > {const childWindow document.getElementById(child).contentWindow;const sendMessageToChild () > {childWindow.postMessage("主页面消息", "http://localhost:…...
挑战100天 AI In LeetCode Day01(1)
挑战100天 AI In LeetCode Day01(1) 一、LeetCode介绍二、LeetCode 热题 HOT 100-12.1 题目2.2 题解 三、面试经典 150 题-13.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站,提供各种算法和数据结构的题目,面向程序…...
大数据疫情分析及可视化系统 计算机竞赛
文章目录 0 前言2 开发简介3 数据集4 实现技术4.1 系统架构4.2 开发环境4.3 疫情地图4.3.1 填充图(Choropleth maps)4.3.2 气泡图 4.4 全国疫情实时追踪4.6 其他页面 5 关键代码最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 大数据疫…...
uniapp调起拨打手机号
您可以使用uniapp提供的API来调起拨打手机号的功能。具体步骤如下: 在template标签内添加一个按钮,例如: <template><view><button type"primary" click"callPhone">拨打客服电话</button><…...
nacos配置中心docker部署、配置及 goLang 集成使用
为什么需要配置中心 平时我们写一个demo的时候,或者说一个单体的应用,都会有一个配置文件,不管是 json文件或者yaml文件,里面包含了redis,mysql,es等信息,如果我们修改了配置文件,往往我们需要重启&#x…...
PubDef:使用公共模型防御迁移攻击
对抗性攻击对机器学习系统的可靠性和安全性构成了严重威胁。通过对输入进行微小的变动,攻击者就可以导致模型生成完全错误的输出。防御这种攻击是一个很活跃的研究领域,但大多数提议的防御措施都存在重大的缺点。 这篇来自加州大学伯克利分校研究人员的…...
【QT5之QFtp模块】编译及使用
下载 传送门:https://github.com/qt/qtftp 或者 git clone https://github.com/qt/qtftp.git 下载ZIP,解压待用。 编辑 使用QtCreator打开qtftp.pro; 修改如下: qtftp.pro中,将第21行注释; src/qftp.pro中,将第4行…...
数据结构 编程1年新手视角的平衡二叉树AVL从C与C++实现②
接下来,是数据的插入 我们需要对数据插入的结点先进行判断,有如下三个情况 当插入的数据value<结点的value,应该递归地插入该结点的左子树(的左子树...的左子树) 当插入的数据value>结点的value,应…...
代码随想录二刷Day 59
647. 回文子串 这个题的dp定义想不到,递推公式也想不到但是看题解都很容易理解,遍历顺序不太好理解。 class Solution { public:int countSubstrings(string s) {vector<vector<bool>> dp(s.size(), vector<bool>(s.size(), false)…...
由一个自动化脚本运维展开的思考
今天分享一个思路,如何通过脚本集中管理程序的启停。减少人工的介入。 例子 好的,这里有一个基本的shell脚本示例,你可以根据你的具体需求进行修改。 启动脚本(start.sh): #!/bin/bash ./test_server_1…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)
cd /home 进入home盘 安装虚拟环境: 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境: virtualenv myenv 3、激活虚拟环境(激活环境可以在当前环境下安装包) source myenv/bin/activate 此时,终端…...
车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...
webpack面试题
面试题:webpack介绍和简单使用 一、webpack(模块化打包工具)1. webpack是把项目当作一个整体,通过给定的一个主文件,webpack将从这个主文件开始找到你项目当中的所有依赖文件,使用loaders来处理它们&#x…...
