vant 使用心得

强调下这个组件是app和微信小程序通用，但不能用于h5、其他小程序

官方更新很久支持 小程序的组件了。文档介绍地址： http://uniapp.dcloud.io/

vant 官方文档：
https://youzan.github.io/vant-weapp

怎么使用昵？
安装方式支持npm git 。还有一个方式是直接去 git clone 传送门：https://github.com/youzan/vant-weapp

下载后 把压缩文件解压，看到根目录有一个 dist 的目录，将整个目录拷贝下来。

然后在你的UNI 的项目根目录创建文件： wxcomponents/vant ，将你上面拷贝的 dist 目录的内容粘贴到 项目根目录 wxcomponents/vant 下。

然后打开你项目根目录的 pages.json 在每个页面的 style 下 创建一个 usingComponent （这块就请看UNI的官方文档吧！）

例如：

"usingComponents" : {  
   "van-search": "/wxcomponents/vant/dist/search/index"  
}

创建后 打开page.vue 页面。 使用组件 （每个组件使用的方式都不一样 这点可以去vant官网查看！）

<van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch"  @cancel="onCancel"></van-search>

值得一说的是 vant 提供的方式代码是 ：

<van-search  
  value="{{ value }}"  
  placeholder="请输入搜索关键词"  
  show-action  
  bind:search="onSearch"  
  bind:cancel="onCancel"  
/>

在UNI 下需要做一些修改：

1.绑定的变量使用 :value="value"

1. bind:search 更改为 @search="onSearch" ； 就是把 bind： 换成 @ 即可。
   更改后的例子：
   <van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel"></van-search>

特别要说明的是：每次修改 page.vue 中的节点以后 保存后不会直接生效，你得点重新运行（控制台右上角有一个类似刷新的图标）

vant weapp用于app时，在低端Android上有css兼容性问题要注意。因为app的webview和微信不一样，app是系统webview。Android5以下的webview版本较低，有些较新的css不支持。