简述:在该项目中原本使用的是uni-app内置组件以及扩展组件库进行app的开发,因项目需求uni-app扩展组件库所得提供的组件不方便我们进行二次开发,所以提出使用第三方的组件库进行开发,所用第三方组件库是有赞团队的vant 组件库(vant 组件库有两种一种是h5端,另外一种是微信小程序端,vantH5端不支持夸平台,微信小程序端支持app+小程序)
1.uni-app创建项目的方式 ,在该项目中我们使用vue-cli创建项目
vue create -p dcloudio/uni-preset-vue my-project
-
vantweapp组件库GitHub下载地址链接
-
uni-app框架中使用vantweapp组件库注意事项:
-
vantweapp组件库不支持H5端,如需调试请使用微信开发者工具进行调试,如没安装微信开发者工具请先下载安装,并在uni-app中进行配置
-
在项目中的src目录下跟pages同级的目录下创建一个新的文件夹命名为wxcomponents,注意:其它文件名称会在编译的时候过滤掉,导致报错
-
在wxcomponents目录下创建vantweapp文件夹,并将从github上下载好的vantweapp包下dist文件放到vantweapp目录下
-
在app.vue 中全局引入vantweapp组件库的样式文件 , 代码如下:
@import "/wxcomponents/vantweapp/dist/common/index.wxss";
-
在uni-app框架中注册vantweapp组件库中的组件
//在pages.json文件中找到相对应的页面的路由配置,并在style节点下进行注册,代码如下 { "path": "pages/index/index", "style": { "usingComponents":{ "van-button": "/wxcomponents/vantweapp/dist/button/index", "van-tab": "/wxcomponents/vantweapp/dist/tab/index", "van-tabs": "/wxcomponents/vantweapp/dist/tabs/index", "van-cell": "/wxcomponents/vantweapp/dist/cell/index", "van-cell-group": "/wxcomponents/vantweapp/dist/cell-group/index" } } //以下组件是特殊组件,在pages.json注册后,还需在页面导入,如请提示、弹框等,引用方式如下 //该组件在使用页面的根节点(id是vantweapp组件库所自带的请与官方文档保持一致),代码如下 <van-dialog id="van-dialog" /> //在使用页面导入该组件,只需更改路径 import Dialog from 'path/to/vant-weapp/dist/dialog/dialog'; //使用方式 Dialog.alert({ title: '标题', message: '弹窗内容' }).then(() => { // on close });
-
视图容器使用uni官方所提供的的视图容器,避免出现H5类的视图容器,如:div p 等
-
在uni不支持vantweap组件中的属性和事件的绑定方法
active="{{ active }}" //vantweapp组件库所提供的的属性绑定方式 //该属性的绑定方式在uni中报语法错误 ,为避免语法错误改为 :active="active" bind:change="onChange" //vantweapp组件库所提供的的事件绑定方式 //该事件方法在uni中报警告找不到该事件的处理方法 为解决该警告改为 @change="onChange"
-