网址参考：https://youzan.github.io/vant-weapp/#/quickstart
Field 输入框
介绍
用户可以在文本框内输入或编辑文字。
步骤
1.新建一个终端，初始化一个包的描述文件，npm init
2.安装一个第三方的包，通过 npm 安装，在终端输入：npm i @vant/weapp -S --production
安装完成之后会出现一个 node_modules 文件夹
3.点击菜单栏 工具-构建 npm
构建完成，点击确定
创建项目：
1.项目目录
pages目录：用于存放所有的页面。
utils目录：用于存放工具类文件。
app.js：是入口文件，程序在运行时，首先要执行该文件。
app.json：是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）。
app.wxss：是全局样式文件。全局样式文件里面定义的选择器，在所有的页面中生效。
project.config.json：是项目配置文件。
sitemap.json：是SEO配置文件，方便用户搜索到该小程序。
2.app.json
(1)pages配置项
pages里面注册的是视图。用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。
（2）window配置项
window 是全局窗口配置。
backgroundTextStyle 设置文本样式（下拉loading的样式），仅支持 dark / light。
navigationBarBackgroundColor 设置导航栏背景。
navigationBarTitleText 设置导航栏文本。
navigationBarTextStyle 设置导航栏标题颜色，仅支持 black / white。
代码：
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#369",
"navigationBarTitleText": "KW43-APP",
"navigationBarTextStyle":"white"
}
Button 按钮
介绍：
按钮用于触发一个操作，如提交表单。
在app.json或index.json中引入组件，
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
按钮类型：
支持default、primary、info、warning、danger五种类型，默认为default。
<van-button type='”default">默认按钮</van-button>
<van-button type=" primary">主要按钮
</van-button type="info">信息按钮</van-button>
<van-button type=" warning">警告按钮</van-button>
<van-button type=" danger" >危险按钮</van-button>
按钮的加载状态:
1. isloading （是否显示为加载状态） 类型：boolean 默认值：false
2.icon （左侧图标名称或图片链接，可选值见 Icon 组件） 类型：string
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />
生命周期函数
1、onLoad 监听页面加载
onLoad函数对页面状态数据的初始化，是生命周期回调—监听页面加载。一 个页面只会调用一次。onLoad函数的参数可以接收打开当前页面所调用的 query参数。
当前页面跳转detail页面后，调用query参数id。
<navigator url="../detail/detail?id={{item.Id}}" class="item" wx:for="{{subjects}}" wx:key="index">
</navigator>
detail页面中onLoad函数可以获取传递的query参数id。
onLoad: function (options) {
//获取题目的id
let {id} = options
}
2、onReachBottom 上拉触底
onReachBottom:function(){
this.data.pageIndex++
this.getSubjects()
}
3.onPullDownRefresh 下拉刷新
下拉刷新默认是关闭状态，所以需要先在.json文件中设置允许下拉刷新。
enablePullDownRefresh设置是否开启当前页面下拉刷新。
backgroundColor设置窗口的背景色。
{
"enablePullDownRefresh": true,
"backgroundColor": "#d1c2d3"
}
下拉刷新动效有默认时间。如果想改变默认的下拉时间，可以用定时器。
wx.stopPullDownRefresh()设置刷新完成后停止下拉刷新动效。
onPullDownRefresh:function(){
setTimeout(() => {
wx.stopPullDownRefresh()
}, 1000);
}
