SimpleJalon
SimpleJalon
  • 发布:2018-10-24 23:15
  • 更新:2021-07-07 16:14
  • 阅读:42571

vant 使用心得

分类:uni-app

强调下这个组件是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"
2. 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不支持。

9 关注 分享
Trust Neil_HL 诗小柒 sonicsunsky 陈晟睿 沧桑 阿落 2***@qq.com 1***@qq.com

要回复文章请先登录注册

3***@qq.com

3***@qq.com

KKK
KKK

监控
2021-07-07 16:14
1***@qq.com

1***@qq.com

这个支持app 请问部分组件是不是不支持的,因为我引入了只有在小程序显示 运行到手机上就不显示了
2021-06-25 17:10
m***@qq.com

m***@qq.com

有办法 px 转换成 rpx 吗
2020-10-21 23:26
akira0705

akira0705

现在是不是支持h5了
2020-07-24 16:38
akira0705

akira0705

回复 BeforeMount :
自己写个script 不难
2020-07-24 16:28
BeforeMount

BeforeMount

查了好久都是copy文件夹 现在有改成npm引入吗
2020-07-22 14:20
SimpleJalon

SimpleJalon (作者)

回复 1***@qq.com :
本身就不支持啊 文档也没说支持啊
2019-12-06 13:36
1***@qq.com

1***@qq.com

不支持支付宝小程序
2019-12-06 11:34
5***@qq.com

5***@qq.com

哈哈
2019-12-05 20:32
SimpleJalon

SimpleJalon (作者)

回复 暗眼小子 :
https://ext.dcloud.net.cn/plugin?id=100
2019-12-05 19:31