使用npm包

Vant Weapp

类似于前端boostrap和element ui那些的样式框架。

安装过程

注意:这里建议直接去看官网的安装过程。

vant-weapp版本最好也不要指定

在项目目录里面先输入npm init -y 初始化一个包管理配置文件: package.json 

使用css变量定制vant主题样式（只对vant有效）

使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN

连接如上。

使用这个东西可以提供css的可维护性。

因为每个页面的根节点都是page标签，所以这里拿page当做根节点。 

根据配置文档里面的用法，如果是danger就是button-danger-*,如果是primary就是button-primary-*

根据文档里面来的就可以了。

@开头是less的方式，要改成--开头才是css的用法。

API Promise化

安装完重新构建需要先npm。用法如下。

全局数据共享

Mobx

 创建MobX的Store实例

注意: 这里要先创建一个store文件夹下的一个store.js文件，然后在文件里面填入下面东西。

在页面中使用Store

 

在组件中使用Store

 分包

基础概念

好处就是可以懒加载，首次启动只加载主包的内容，分包的页面和资源只有在访问到的时候才会去下载。  

分包的基本用法

 设定好root=pkgA之后会按照设定好的路径自动创建对应的页面。

使用name属性可以为分包添加别名，在右侧可以查看分包和主包的大小。

打包原则

引用原则

独立分包

独立分包的业务场景就是先看广告，才能进去.整笑了。还有的应用场景比如说登录？

 通过声明将一个分包变成独立分包。

分包预下载

案例——自定义tabBar

在app.json中定义tabBar的配置信息

在下面这个链接里面可以看见相关的操作。

自定义 tabBar | 微信开放文档

配置流程 

即使已经自定义了tabBar了，原本的list数组也不能删除，这是微信官方的要求，但是list不会生效也不会作用于自定义tabBar。

在声明true并且准备好index组件之后就会自动渲染好tabBar 

初步实现自定义的tabBar效果

使用vant-weapp携带的组件库渲染tabbar。

按照这个基础用法渲染出如下 

自定义图标

通过循环的方式渲染tabBar，使用原本app.json里面的list作为数据源放到html.js里面。

使用for渲染。

实现效果如下

渲染tabBar右上角的数据徽标

在目前效果中数字徽标是会超出导航栏的。

这部分的处理直接去看视频吧。

经过几个操作之后成功变成如下效果。

按需为tabBar渲染数字徽标

需要渲染的就新增一个info字段。

动态渲染数字徽标

数字徽标的内容不能是写死的，通常会根据页面上的内容进行动态渲染。

这个需要用到MobX的store.

直接按照vant-app文档给的用法使用。

 简单来说这里的步骤就是，导入store,监听store里面的sum值，然后sum变化时修改info为sum的最新值.

这里就不贴代码了

实现tabBar页面切换效果

使用wx.switchTab切换当前页面。并且在store里面维护一个activeTabBarIndex作为导航栏选中项的索引。

这里要调用的方法和要修改的数值都是store里面的，只是映射到了index组件的data里面使用。

store里

index.js里

修改tabBar选中项文本的颜色

使用一个“active-color”标签进行设置

最终代码不放出来了，太多了