学习目标：
1.能够知道如何安装和配置vant-weapp组件库
2.能够知道如何使用Mobx实现全局数据共享
3.能够知道如何对小程序的API进行Promise化
使用npm包
小程序对npm的支持与限制
目前，小程序中已经支持使用npm安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm包有如下3个限制
- 不支持依赖于Node.js内置库的包
- 不支持依赖于浏览器内置对象的包
- 不支持依赖于C++插件的包
Vant Weapp
什么是Vant Weapp
Vant Weapp是有赞前端团队开源出来的一套小程序UI组件库，主力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好(牛X，确实牛X)
安装Vant组件库
在西澳程序中，安装Vant组件库主要分为如下三部：
1.通过npm安装
2.构建npm包
3.修改app.json
Vant的使用：这是组件的集合，要使用组件就需要先导入组件；可以在特定使用某个组件的页面的.json中使用；也可以在app.json中使用;并且要将app.json中的"style": "v2"关闭
使用vant组件
可以在app.json的usingComponents节点中引入需要的组件，即可在wxml中直接使用组件。代码示例：
结果：
css变量的使用
通过css变量定制全局主题样式
全局样式，是对全局都起作用；在app.wxss的page函数中声明CSS变量，而后再需要用到这个变量值的地方只填对应变量名即可，声明如下：
- 为什么使用page节点？
变量是有作用域的，page是一个标签，这个标签所包含的作用域就是整个页面；也就是说，如果只是想作用于某个页面或某个组件的话，那就根据情况把“page”替换掉；所以，花括号前面起到的作用实际上是声明作用域的作用 - 变量名的规定？
实际上在vant官网给出了各个组件的CSS变量名，我们只要到上面寻找到自己想要的变量即可；这些变量会自动寻找到对应组件进行修改
API Promise化
基于回调函数的异步API的缺点
默认情况下，小程序官方提供的异步API店铺是基于回调函数实现的，例如，网络请求的API需要按照如下的方式调用：
造成的结果就是容易造成回调地域的问题，代码的可读性、维护性差
什么是API的Promise
API的Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise的异步API，从而提高代码的可读性、维护性，避免回调地域的问题
实现API Promise化
把包安装完之后，还需要构建这个包；而在构建的时候有个注意点，就是在构建新包之前，要把原来的miniprogram_npm在文件中删掉，然后再构建；再次构建完毕后，miniprogram_npm中的新旧目录都会出现
如何使用Promise包
作用：将小程序中，需要异步的函数，都进行了Promises化，并转存到了wxp中
比如，request()网络请求函数，就是一个异步函数；那么我们再次使用的时候就不是直接写request()，而是wx.p.request();它的返回值就是一个Promise对象，里面放有很多数据；对象中有很多数据，可以通过解构的方式获取想要的数据，比如，想要获取到对象当中的data数据，那么，就可以
const {data: res} = await wx.p.request({});那么数据就存放在了res中
全局数据共享
什么是全局数据共享？
全局共享全局数据共享(又叫做：状态管理)是为了解决组件之间数据共享的问题
开发中常用到的全局数据共享方案有：Vuex Redux Mobx
数据共享的概念：当需要共享或传递某个节点的数据时，需要多次传递；而全局数据共享只需要将结点的数据挂载到STORE上，这样节点的获取和传递数据就会非常的方便
小程序中的全局数据共享方案
在西澳程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindlings实现全局数据共享。其中：
- mobx-miniprogram用来创建Store实例对象
- mobx-miniprogram-bindlings用来把Store中的共享数据或方法，绑定到组件或页面中使用
安装mobx-miniprogram包和mobx-miniprogram-bindlings包
创建Store实例对象
在JS文件中专门创建Store的实例对象，用import{observable}创建出共享实例对象；而后再调用observable({})函数，他的返回值就是一个Store对象，我们在用一个常量去接收
而后
再在observable({})函数中声明数据方法等；
数据的使用
外界导入了Store后，就可以使用这两个数据了，外界是不能够直接修改内部的数据的，而是通过调用Store中的函数，来对内部的数据进行修改；而这个函数要基于action函数；action函数是按需从mobx-miniprogram包中导出的；action函数专门用来修改Store中的数据
将Store中的成员绑定到页面中使用
- 1.在页面的头部区域导入需要的成员
一在页面中导入createStoreBindings方法，通过这个方法就可以将Store中的数据和方法绑定到页面中
二：在页面中导入创建的store对象 - 2.在page中的onLoad生命周期中进行绑定的工作
在onLoad中，利用createStoreBindings方法对数据进行绑定，传递两个参数；第一个是要绑定的页面，this代表绑定到当前页面；第二个是{store,fields:[],actions:[]}
store：代表数据源
fields：代表字段(数据名)
action：代表前面定义声明的action方法名
而后再把函数的返回值放到一个自定义属性中，为方便后期进行数据的清理 - 3.在onUnload函数中做一些清理性的工作
在onUnload中，利用this.storeBindings.destroyStoreBindings()方法对页面的数据进行清理；因为有时候页面卸载，残留的数据需要被清理一下
将Store中的成员绑定到组件中
- 1.按需导入；storeBindingsBehavior函数负责将store中的成员映射到组件中、store代表数据源
- 2.在Component中的behaviors中放入storeBindingsBehavior函数，实现动态绑定
- 3.创建storeBindings对象，在里面绑定字段(数据)
- 4.创建actions对象(在storeBindings中创建)：在里面生命要绑定的方法
分包
什么是分包
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建是打包成不同的分包，用户在使用时按需求进行加载
分包的好处
对小程序有以下好处：
1.可以优化小程序首次启动的下载时间
2.在多团队共同开发时可以更好的解耦协作
分包前项目的构成
分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间
分包后的项目构成
分包后项目的构成：小程序项目有1个主包+多个分包组成
主包：一般只包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公共资源
分包：只包含和当前分包有关的页面和私有资源
分包的加载规则
1.在小程序启动时，默认会下载主包并启动包内页面：tabBar页面需要放到主包中
2.当用户进入芬堡内某个页面时，客户端会把对应分包下载下来，下载完毕后再进行展示：非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载
分包的体积限制
目前，小程序分包的大小有以下两个限制：
1.整个小程序所有分包大小不超过16M(主包+所有分包)
2.但各分包/主包大小不能超过2M
使用分包
配置方法
目录结构：
需要在subpackages中对分包(不包含主包)进行声明，有几个包就要声明几次；声明的内容包括(上图)：
1.root："包的根目录"
2.name："分包名"(分包才有这一项)
3.pages：这是个数组，存放当前分包下，所有页面的相对路径
增加别名：name属性；
获取分包体积：详情中可见
打包原则
1.小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
2.主包也可以有自己的pages(即最外层的pages字段)
3.tabBar页面必须在主包内
4.分包之间不能互相嵌套
引用原则
1.主包无法引用分包内的私有资源
2.分包之间不能相互引用私有资源
3.分包可以引用主包内的公共资源
独立分包
什么是独立分包
独立分包本质上也是分包，只不过他比较特殊，可以独立于主包和其他分包而单独运行
当用户想要打开小程序时，需要进入主包，而后由主包启动小程序，启动成功以后，有可以从主包进入到其他分包；但有时需要通过分包也可以进入到小程序中，此时就需要用到独立分包，从而启动小程序
独立分包和普通分包的区别
主要区别：
- 普通分包必须依赖于珠宝才能运行
- 独立分包可以在不下载主包的情况下，独立运行
独立分包应用场景
开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：
- 当小程序才能够普通分包页面启动时，需要先下载主包，而用户只希望执行分包里面的页面，不希望下载主包，这样就造成了资源浪费
- 小程序的运行不依赖于主包，可以很大程度上提升分包页面的启动速度
打包原则
案例tabBar
1.在tabBar中设置custom:true
2.与pages文件夹平级创建关于自定义tabBar的组件
3.文件名必须是custom-tab-bar，组件名必须是index
环境会自动匹配组件下的配置文件进行配置
1.注册需要用到的标签
2.将代码中出现的数据以及函数进行声明和定义
3.实现自定义，我们可以跟换自己需要用到的图标，在vant官方文档中有介绍
可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。
徽标的渲染：
info代表徽标值。我们可以看到图标和标签之间还有一段距离；如何消除这个距离？
调试器检查元素；我们可以找到这段小空白对应的style文件；进而找到对应的代码，将属性所在的属性值按照需求进行更改，而后在wxml代码中查看其父级标签，后在.wxss文件中利用标签选择器对属性值进行更改；这个过程就做样式覆盖
样式覆盖，而当我们使用Vant Weapp组件时，必须要开启styleIsolation:'shared'选项，在组建的Component中的options对象中
info的渲染不是每一个图标都需要；而实现按需未指定图标增添info徽标的方法就是，在列表中指定的元素中添加info属性；而后在wxml中渲染info属性时，就会根据元素有没有info属性来进行渲染，就是在循环时，写上2info="{{item.info}}",有info属性的元素，语句item.info就生效，没有info属性的元素，info就不生效(利用item.info?item.info:''语句可以使当info值为0时，不渲染出来info)
标签：info,程序,分包,主包,组件,页面 From： https://www.cnblogs.com/hezhipeng/p/16903658.html