微信小程序开发实战（二）UI组件介绍 Vant Weapp

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

1 第三方组件库 Vant Weapp

官网：https://youzan.github.io/vant-weapp/#/intro

1.1 npm构建

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。

此文档要求开发者们对 npm 有一定的了解，因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm，请翻阅官方 npm 文档进行学习。

构建npm下要在自己电脑安装，node.js
Nodejs下载

1、安装好后配置Nodejs环境变量到path
2、在cmd打开项目路径初始化npm

npm init

npm i @vant/weapp -S --production

3、构建npm
第一步：

第二步：选择工具->构建npm

1.2 搜索框

这里以搜索框为例
index.json

{"usingComponents": {"van-search": "@vant/weapp/search/index"}
}

index.wxml

<van-search value="小程序" placeholder="请输入搜索关键词" />

1.3 长按钮

"van-button": "@vant/weapp/button/index"

wxml

<view><van-button form-type='submit' id="bindBtn" type="primary" custom-style="width:100%;"size="large">充值</van-button>
</view>

1.4 文字居中

<text id="money">￥5000.00</text>

#money {font-size: 75rpx;display: flex;align-items: center;justify-content: center;
}

欢迎加入博主官方QQ群交流: 779133600

微信小程序开发实战（二）UI组件介绍 Vant Weapp相关推荐

微信小程序开发入门教程-文本组件介绍
学习小程序开发要从哪开始呢?我们是开始顺序学习官方文档么?如果一开始就从头开始读官方文档,恐怕用不了多久你就放弃了.计算机是一门实践科学,我们学习的目的是为了解决现实问题.要么你想在互联网创业,开发一 ...
微信小程序开发实战（9）：单行输入和多行输入组件
-----------支持作者请转发本文----------- 1. 单行输入组件(input) input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比 ...
《微信小程序开发实战》课后题
黑马程序员版<微信小程序开发实战> 第一章填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程小程序进阶王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序python入门教程-2020Python+微信小程序开发实战（视频+课件）
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
微信小程序开发实战课程之油耗计算器-耿广龙-专题视频课程
微信小程序开发实战课程之油耗计算器-3406人已学习课程介绍微信小程序开发实战课程之油耗计算器,通过练习开发工具类的油耗计算器小程序,可以帮助大家了解微信小程序的API,相关组件的 ...
JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习课程介绍微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益微信小程序开发培训,包含环境搭建.实例讲 ...
菜谱分享网站微信小程序开发说明（1）-介绍与运行
菜谱分享网站微信小程序开发说明(1)-介绍与运行此项目是作为课设的小项目,实现的功能比较简单,可以入门练手~~也可以参考作为课设使用技术栈微信小程序原生框架 Spring Boot + MyBa ...