小程序使用有赞 UI 库
引入有赞 UI 库
1、初始化 npm
在小程序 package.json 所在的目录(代码根目录)中执行下面命令,进行初始化:
npm init
ps. 这里一路按 enter 键就可以了,命令窗口可以在目录下通过 shift + 鼠标右键选择 PowerShell 打开 。
2、安装 Vant 包
在上面的基础上,输入下面命令,安装有赞 UI 库:
npm i vant-weapp -S --production
如果这里报 rollbackFailedOptional 错误,可以试试修改 npm 的资源镜像链接,输入下面命令:
npm config set registry http://registry.npm.taobao.org
然后再执行上面安装命令,应该就可以了。
3、使用 npm 模块
点击微信开发者工具右上角详情,选择本地设置,勾选上下面的 “使用 npm 模块”
4、构建 npm
点击开发者工具中的菜单栏:工具 --> 构建 npm
5、修改 app.json
将 app.json 中的 "style": "v2"
去除
6、修改 project.config.json
在根目录下的 project.config.json 文件中,通过 ctrl + f 搜索 packNpmManually ,修改配置,使开发者工具可以正确索引到 npm 依赖的位置。
改成如下图
代码如下:
"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}],
到这应该就完成安装了,下面看看使用。
使用有赞 UI 库
1、引入控件
在 app.json (或 Page 的 json)中引入控件
"usingComponents": {"van-button": "@vant/weapp/button/index"
}
2、使用控件
引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>
示例
这里拿一个 Dialog 弹出框作为示例,因为官方文档有问题,在 Page 中引入错了,真的是把我坑到了。
1、引入 Dialog 控件
在app.json
或index.json
中引入组件
"usingComponents": {"van-dialog": "@vant/weapp/dialog/index"
}
2、在 WXML 中设置 Dialog
这里有两种用法,一种是把 Dialog 当布局组件使用,一种是像 wx.showModel 一样弹出对话框,无论哪种都要在 WXML 中写 van-dialog。
这里以后一种用法为例,在 WXML 中随便找个地方,填入下面代码:
<van-dialog id="van-dialog" />
3、在 Page 中使用
先引入组件,就是这里把我坑了,主要就是没有 dist 这个目录了,有赞也不提示。
//import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
import Dialog from '../../../miniprogram_npm/@vant/weapp/dialog/dialog';
这里用的相对路径,后面路径是对的,需要直接改下!
在需要的时候像下面一样使用就可以,不过我是觉得还不如微信自带的好看哦!
Dialog.confirm({title: '标题',message: '弹窗内容',
}).then(() => {// on confirm}).catch(() => {// on cancel});
4、在 Dialog 中有原生控件
这里提一下,如果 Dialog 中有原生控件,消失的时候原生控件回后消失,很奇怪。例如对话框里面放了一个 canvas 来显示二维码,关闭对话框时,对话框消失了,二维码延迟一会才消失,这时候可以通过变量,先隐藏二维码,再隐藏对话框,有这个思路,就能解决了。
结语
如果不想自己设计各种控件的话,用有赞的 UI 库还是很方便的,但是如果给了设计图,要改这些控件还是有点麻烦。
小程序使用有赞 UI 库相关推荐
- axure 小程序 lib_【kboneui】打通 H5/微信小程序,多端UI库
前言 有了UI库,便捷性提高很多.今日早读文章由腾讯@binnie投稿分享. 正文从这开始-- kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标, 使用 weui 样式提供 H5 和 小 ...
- 微信小程序开源项目、UI框架、Demo整合
微信小程序开源项目清单 有位大哥在github上放了个整合了很多优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给他个star. 另外,我参照祈 ...
- 组件的生命周期,小程序如何引入第三方ui框架
笔记 组件开发的三要素 properties //相当于vue中的props接收属性 triggerEvent//相当于vue中是$emit slot//和vue是类似的slot 1.可以通关slot ...
- 小程序源码:网课查题微信小程序源码下载,题库资源丰富自动采集,支持语音拍照识别
这是一款网课查题微信小程序源码 题库资源丰富自动采集, 支持语音拍照识别 该款采用接口方式,所以题库自动全网采集 而且该款小程序无需服务器和域名即可搭建 大家解压源码然后使用微信开发者工具打开源码 然 ...
- 优质开源:共享图书小程序3.0 全新UI 免费下载
优质开源:共享图书小程序3.0 全新UI 免费下载 全新上线的图书共享小程序3.0秉承简约的设计,提供不简约的交互体验 此源码,为开源源码,作者免费提供,一切收费的极为盗版.
- 多套头像/壁纸/背景图资源微信小程序源码 粉色UI 带流量主
云开发版粉色UI微信小程序源码,背景图.头像.壁纸小程序源码,带流量主功能. 云开发小程序源码无需服务器和域名即可搭建小程序另外还带有流量主功能噢!微信平台注册小程序就可以了. 这套粉色UI非常的好看 ...
- 微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
- 微信小程序中使用vant组件库(超详细)
目录 前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
- Python背单词记单词小程序,可自定义词库,支持多种记忆模式,根据词义拼写、选择单词,根据词意选择单词
Python背单词记单词小程序,可自定义词库,支持多种记忆模式,根据词义拼写.选择单词,根据词意选择单词,可乱序抽查,可对错题进行反复抽查 完整程序源代码下载:Python背单词记单词小程序 词库生成 ...
- 淘宝客5.44+代理2.68+京东客5.1教程-解密全开版-附带小程序模版-微赞模版
淘宝客5.44+代理2.68+京东客5.1教程-解密全开版-附带小程序模版-微赞模版淘宝客5.44+代理2.68+京东客5.1教程-解密全开版-附带小程序模版-微赞模版淘宝客5.44+代理2.68+京 ...
最新文章
- Windows~KinectV2开发
- 标称变量(Categorical Features)或者分类变量(Categorical Features​​​​​​​)缺失值填补、详解及实战
- [Linux学习]虚拟机系统与实际系统共享文件的方式
- pytorch使用gpu就是这么简单
- CentOS系统环境下安装MongoDB
- 像癌症一样传播:世界首个PLC病毒问世
- 裂痕第一至五季/以法之名Damages迅雷下载
- spring的发展||springboot和微服务的介绍
- SM35/BDC Record / Log 导出
- 我使用阿里云做直播,有什么手段保护直播安全?
- java评论回复功能例子_Java实现评论回复功能的完整步骤
- 本博文记录需要解决的问题
- redis-hmap --go
- 数字信号处理教程matlab释义与实现,数字信号处理教程 MATLAB释义与实现 陈怀琛编...
- drm android 工作原理,[原创]某DRM解密流程简单分析
- conda命令:管理包、管理环境
- Burp Suite使用介绍(一)
- 游戏开发者必须是骨灰级玩家吗?
- 让子盒子在父盒子中垂直居中的七个方法
- Android Instant App调研报告