小程序动端组件库Vant Weapp教程

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用

两大参考神兽：

文档：https://youzan.github.io/vant-weapp/#/intro
开源：https://github.com/youzan/vant-weapp

1：桌面新建一个vant文件夹

2：打开微信开发者工具，在这个文件里新建项目

3：从github上面下载源码文件：开源：https://github.com/youzan/vant-weapp

4：打开文件，复制dist文件

5：将dist文件黏贴在项目目录里面

6：打开Vant Weapp的使用文档：文档：https://youzan.github.io/vant-weapp/#/button
现在来在index界面来使用一个按钮的样式：

7：在 json 文件中配置button组件,修改路径

{"usingComponents": {"van-button": "../../dist/button/index"
}
}

8：wxml界面写一点文档里面的代码

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

9:引入成功：然后你就可以依靠文档来进行复制黏贴了，因为自己写css的日子真的又烦人又浪费时间呐。

最后，为啥推荐这个组件库，因为实在是省力气，拿这个步骤条时间戳来说，前两天写了好一会

现在只需要三步即可完成，30秒中不到全部搞定，当然了，不推荐新手使用这个复制黏贴的方法，毕竟代码功夫还是需要一笔一画来提升境界的。

wxml

<view>
<van-stepssteps="{{ steps }}"active="{{ active }}"
/>
</view>

json:

{
"usingComponents": {"van-steps": "../../dist/steps/index"
}
}

Page({data: {steps: [{text: '步骤一',desc: '描述信息'},{text: '步骤二',desc: '描述信息'},{text: '步骤三',desc: '描述信息'},{text: '步骤四',desc: '描述信息'}]}
});

ok，完成，没错，真的就是这么简单。

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见

关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源200G干货大全。

小程序动端组件库Vant Weapp教程相关推荐

vant weapp 下拉_小程序动端组件库Vant Weapp的使用
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用两大参考神兽: 1:桌面新建一个vant文件夹 2:打 ...
小程序引入第三方组件库Vant Weapp
最近在看小程序中引入第三方组件相关知识,在引入过程中一直出现各种问题和报错最终终于成功暗中使用:以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因. vant-weapp中文文档:http ...
筱筱看博客（微信小程序、Lin-ui组件、vant Weapp）
今日分享 1.微信小程序我是使用微信开发者工具做的小demo.首先呢!我写了一个简单的for.点击事件. for 循环.点击的事件小demo. for 循环的案列,如下: 点击事件的案列,如下: 2 ...
UI组件库Vant Weapp的下载和使用
Vant Weapp - 轻量.可靠的小程序 UI 组件库为了提高小程序的开发效率,通常考虑使用第三方UI组件来实现界面的视觉统一.开发者可以方便的引用已经事先设计好的自定义组件来快速搭建小程序界面 ...
小程序 | 使用 npm 模块配置 Vant Weapp 框架
之前体验了 iView 的UI框架,感觉还可以主要是因为在开发体验上比原生敲代码好很多,不过 iView 框架可利用的组件较少,比如搜索框的组件等并未涉及,而且已有的组件也存在一些需要自行生硬的修改才 ...
原生微信小程序引入npm和安装Vant Weapp
目录一.引入npm+安装Vant Weapp 1.引入npm 2.安装Vant Weapp 3.修改 app.json 4.修改 project.config.json 二.构建npm 一.引入np ...
微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”
注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...
【微信小程序】原生微信小程序ts模板下引入vant weapp
之前一直是在普通项目下使用 vant weapp,这不最近学了ts,使用微信开发工具的ts+less初始化项目,再引入 vant 时踩了好久坑,特来记录一下前言本文章适合微信开发工具的ts项目,指 ...

小程序动端组件库Vant Weapp教程

小程序动端组件库Vant Weapp教程相关推荐

最新文章

热门文章