使用uni-app加vantweapp组件库开发app遇到的坑

简述：在该项目中原本使用的是uni-app内置组件以及扩展组件库进行app的开发，因项目需求uni-app扩展组件库所得提供的组件不方便我们进行二次开发，所以提出使用第三方的组件库进行开发，所用第三方组件库是有赞团队的vant 组件库(vant 组件库有两种一种是h5端，另外一种是微信小程序端，vantH5端不支持夸平台，微信小程序端支持app+小程序)

1.uni-app创建项目的方式 ，在该项目中我们使用vue-cli创建项目

vue create -p dcloudio/uni-preset-vue my-project

2. vantweapp组件库GitHub下载地址链接

3. 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"