微信小程序中使用Vant Weapp组件库
介绍
Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本
使用
首先要提供npm支持
使用npm
安装:在小程序 package.json 所在的目录中执行命令安装 npm 包
npm install
此处要求参与构建 npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内
构建npm:
点击开发者工具中的菜单栏:工具 --> 构建 npm
![](/assets/blank.gif)
构建完成就可以使用npm包
js中引入npm包
const myPackage = require('packageName')
const packageOther = require('packageName/other')
使用 npm 包中的自定义组件:
{"usingComponents": {"myPackage": "packageName","package-other": "packageName/other"}
}
安装
通过npm安装
打开左下角的终端进行安装
# 通过 npm 安装
npm i @vant/weapp -S --production# 通过 yarn 安装
yarn add @vant/weapp --production# 安装 0.x 版本
npm i vant-weapp -S --production
修改app.json
将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
修改 project.config.json
开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置
{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为'./'即可
构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件
![](/assets/blank.gif)
typescript 支持
安装 miniprogram-api-typings
# 通过 npm 安装
npm i -D miniprogram-api-typings# 通过 yarn 安装
yarn add -D miniprogram-api-typings
在 tsconfig.json 中增加如下配置,以防止 tsc 编译报错。
请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录
{..."compilerOptions": {..."baseUrl": ".","types": ["miniprogram-api-typings"],"paths": {"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]},"lib": ["ES6"]}
}
使用
以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录
// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}
使用组件
引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>
微信小程序中使用Vant Weapp组件库相关推荐
- 在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具 选择一个模板(这里以javaScript 基础模板 为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
- 微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...
- 微信小程序中使用vant weapp 的dialog组件
微信小程序中使用vant weapp 的dialog组件 官方文档路径:import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';,这不是 ...
- 微信小程序中使用Vant Weapp的dialog弹窗
最终实现效果: 实现方式很简单,我一共分为以下四步: 第一步:在界面的json文件中引入组件: {"usingComponents": {"van-search" ...
- 微信小程序中使用vant组件库(超详细)
目录 前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
- 微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
- 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List(一)
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
- 微信小程序的开发使用第三方组件库
使用第三方组件库(以vant weapp为例) 初始化 右键单击miniprogram,选择在终端打开,输入命令npm init,以下的东西都可以默认(即回车即可). 在微信小程序开发工具中会多一个文 ...
- 微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理 阿里图标库(不会使用的底下留言 ...
最新文章
- 如何通过Geth、Node.js和UNIX/PHP访问以太坊节点
- mongodb java crud_MongoDB用Java,简单的CRUD操作,两种方法,附源码下载。
- js,jquery字符串转换json,兼容各种浏览器
- ftb测试软件,EXFO推出FTB-2光纤测试平台
- jira集成开发代码_7种JIRA集成可优化您的Java开发流程
- spring aop实现原理_Spring 异步实现原理与实战分享
- Python+matplotlib绘制多门课程学生成绩分布饼状图
- 九度OnlineJudge之1001:A+B for Matrices
- mysql编译方式查询_源码编译mysql及其各种查询总结
- 谈谈全自动安装常使用的pip install的原理及作用!!!
- bp神经网络java代码_BP神经网络的Java实现
- 电脑重装系统苹果笔记本开不了机的解决措施有哪些
- android手机不开机刷机,手机无法开机怎么刷机?安卓手机救砖教程
- 从区块链到DAG(三)--DAG共识之SPECTRE协议
- 去哪儿PMO Head赵云:项目管理背后有哪些生存之道?
- 聚类算法:K-means算法
- SQL语句,数据库增加、删除、修改、查询
- Matplotlib绘制三维数据点与线
- 【LaTex】LaTex 的使用与写作(快速入门,尾附:简洁的论文模板代码)
- 4.Deferred
热门文章
- 基于JAVA羽毛球馆场地管理系统计算机毕业设计源码+系统+数据库+lw文档+部署
- java微信无感支付怎么开通_微信无感支付在哪?怎么使用微信无感支付
- 湖南卫视为纪念袁隆平逝世,停播一期《快乐大本营》
- html表格打横超出范围,excel表格超出打印范围怎么解决
- Android ANR问题总结(非原创)
- 进程虚拟地址为什么是4G大小?
- 计算机教学法的应用研究,“任务驱动教学法”在计算机基础教学中的应用研究...
- 如何将一个网页快速生成打包app
- Unity尝试制作王者荣耀笔记(一)
- 【ES笔记02】ElasticSearch数据库之查询操作(match、must、must_not、should、_source、filter、range、exists、ids、term、terms)