黑马程序课程实验上半场

将做一个实验，融合下图几个知识点！   自定义组件，vant组件库，mobx数据共享 ，组件样式隔离，组件数据监听器，组件的behaviors  .....

最终目的： 点击按钮 ，底部的图标上的数字相应的增加！！！

自定义tarbar的使用，请打开微信开发者文档，搜索 自定义tarbar来查看相应的实现！！！

提到自定义的tarbar这里不得不提一提 ，正常状态下tarbar的设置，看微信开发者文档 -------框架-------小程序配置 --------全局配置

 根据微信开发者文档中的内容， 进行了图下标记处的几处配置 ！

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

                      

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

接下来开始使用第三方库 vant weapp 来对页面进行开发！！！详见我之前的博客！！！

关于在微信小程序中构建npm的方法

构建好后按照提示 ，将相应的代码放到相应的文件中去！！！

 app.json中填入以下内容

 自定义的tabar 填入以下内容（至今还是搞不懂为什么要使用   自定义的tabar）

Vant tabbar标签栏

按照vant中的提示，将1处的自定义图标 展示在页面上！！

这里要提醒的一点是 由于custom-tab-bar 是自定义组件 ，于是下图中的3 放在components中，图4放在 methods中！！！

自定义tabBar 实质是一个自定义的组件，这一点看微信开发者文档的tabbar相关页面 一目了然！！！

将app.json中的数组list 复制到自定义组件index.js中的data{ }  ,然后在 .wxml中执行for 循环来调用数组中的值！！！