青岛做外贸网站建设,新网站多久被百度收录,免费适合个人主页,中心网站建设前言#xff1a;其实用uni-app开发微信小程序的首选不应该是vant#xff0c;因为vant没有专门给uni-app设置专栏#xff0c;可以看到目前Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本#xff0c;并由社区团队维护 React 版本和支付宝小程序版本。
但是vant的优…前言其实用uni-app开发微信小程序的首选不应该是vant因为vant没有专门给uni-app设置专栏可以看到目前Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本并由社区团队维护 React 版本和支付宝小程序版本。
但是vant的优势在于用什么引入什么相比uview-plus更节省性能所以有一些项目考量会选用vant遂以作记录。
一、下载vant依赖包
https://github.com/youzan/vant-weapp
二、项目中引入vant
在uni-app项目根目录中创建一个文件夹“wxcomponents”再新建一个文件夹“vant”再新建一个文件夹“weapp”这样的目录结构是为了和官网推荐保持一致到时候好复制不想这样写也OK 再将下载好的vant文件里面的dist的内容拷贝到“wxcomponents”里面 三、使用vant组件
在uni-app中要使用vant的任何组件都需要先在pages.json文件中引入对应的组件
引入方式分为两种
全局引入局部引入
首先在官网中选择你要使用的组件官网地址Vant Weapp - 轻量、可靠的小程序 UI 组件库 1、全局引入
pages.json
将你想要用的组件引入语句复制进去注意我们和官网稍有不同我们外层还有个wxcomponents文件夹
globalStyle: {//全局引入第三方的UI框架usingComponents: {//需要什么组件就引入什么组件van-loading: wxcomponents/vant/weapp/loading/index}},
2、局部引入
pages.json在pages里面配置写法不变 pages: [ //...{path: pages/mine/mine,style: {navigationBarTitleText: },//引入第三方的UI框架usingComponents: {van-notify: wxcomponents/vant/weapp/notify/index}}],
四、使用组件
将官网中的演示代码复制过来即可 van-loading / van-loading typespinner /五、 举例使用Rate评分组件对比官网代码和uni-app代码
官网代码
van-rate value{{ value }} bind:changeonChange /可以看到官网的示例代码是原生微信小程序的代码这个时候就不能一味的只复制了
需要改成
van-rate :valuevalue changeonChange /这样看着就清楚多了
