目录
1.使用npm包
小程序对npm的支持和限制
使用vant组件
在app.json的usingComponents节点中引入想使用的组件，如按钮等，然后在wxml页面中使用<van-button></van-button>标签
使用CSS变量定制主题样式
在html文件中，为了方便修改样式，可以设置一个全局变量，在想用的地方进行引用，修改的时候也较为方便，在根节点处进行引用，也就是css中的html{}中
在wxss文件中，也要在根节点中设置全局变量，就是在page{}中设置，注意全局变量的前面都带有两个减号
API的promise化
小程序官方提供的异步API都是基于回调函数实现的，容易造成回调地狱的问题，代码可读性差、维护性差
API的promise化是通过额外的配置，将官方提供的、基于回调函数的异步API，改造为基于Promise的异步API，提高代码的可读性、维护性
在app.js文件中，只需调用一次promisfyAll()方法，如下图所示
2.全局数据共享
小程序中的全局数据共享方案
mobx-miniprogram 创建Store实例对象
mobx-miniprogram-bindings 把Store中的共享数据或方法，绑定到组件或页面中使用
安装MobX相关的包
创建MobX的store实例
使用mobx-miniprogram，并引入observable包，其中action是其中的一个方法
在下面的例子中，用一个新的变量来接数据，并使用了get方法返回二者之和；之后调用了action方法，修改store中的数据
将Store中的成员绑定到页面中
现在页面中导入store方法
import{createStoreBindings} from 'mobx-miniprogram-bindings'
import{store}from'../../store/store'
在onLoad函数中使用fileds这个数组来接收数据，使用actions方法来调用函数
在页面上使用Store中的成员
将Store中的成员绑定到组件中
3.分包
分包的项目构成
主包：一般只包含项目的启动页面或者TabBar页面、以及所有分包都需要用到的一些公共资源
分包：只包含和当前分包有关的页面和私有资源
分包的加载规则
在启动小程序时，默认会下载主包并启动主包内界面，tabBar页面需要放到主包中
用户进入分包内某个界面时，客户端会把对应分包下载下来，下载完成后再进行展示；非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载
小程序的分包大小：整个小程序的分包大小不超过16M（主包+所有分包）；单个分包/主包不超过2M
分包的基本用法
在app.json文件中，使用subpackages来放置，root后面是主包的名字，还可以用name来给主包简写，每个主包下面还可以有多个页面表示分包
打包原则和引用原则
打包原则
tabBar页面必须在主包里，分包之间不能嵌套
引用原则
- 主包无法引用分包内的私有资源
- 分包之间不能相互引用私有资源
- 分包可以引用主包内的公共资源
独立分包
独立分包和分包的区别
独立分包可以在不下载主包的情况下，独立运行
独立分包的特点
一个主包可以有多个独立分包，独立分包的不同之处在于它有属性independent:true
引用原则
独立分包和普通分包以及主包之间是相互隔绝的，不能相互引用彼此的资源
格外注意的是：独立分包不能引用主包内的公共资源
分包预下载
在app.json文件中，使用preloadRule节点定义分包的预下载规则，其中第一行放置页面路径，packages指定预下载哪些分包，network指定在哪种网络下进行预下载
分包预下载的限制：同一个分包中的页面享有共同的预下载大小限制是2M
4.tabbar案例
初步实现自定义的tabbar效果
首先，创建一个custom-tab-bar文件夹，在文件夹中创建一个组件inde；x在app.json文件下的usingComponents方法中加上"van-tabbar":"@vant/weapp/tabbar/index" 和 "van-tabbar-item":"@vant/weapp/tabbar-item/index"，并在tabBar中的list前面添加上custom:true
之后，在index.js文件中的data数据中复制list中的全部数据；在index.wxml文件中，通过使用wx:for循环来获得list中的所有数据，在自定义图标中，使用slot="icon"表示为未选中的图标，而slot="icon-active"表示选中的图标，将对应的图标路径放在后面，在放置完图标后可以直接写图标名字item.text
渲染tabBar上面的数字徽标
在自定义图标时，发现图标与文字之间的距离过大，导致徽标出线，这时可以修改wxss的全局样式，不过要先在js文件的Component函数中写一个options方法，其中放置styleIsolation:"shared"函数，之后再去修改全局样式
实现数字徽标的自动呈现，需要以下几步：
首先，是全局数据共享，调用了前面的store文件，所以先在index.js文件中导入store文件，并在Component函数中与data齐步的位置放置behaviors函数，之后就调用storeBindings函数来接收数据；通过监听器，来判断数据是否有变化，并在该步骤将数据赋值给对应的图标
然后，在index.wxml文件中使用三元判断，来对列表中的元素info值是否为空进行判断，不为空则进行显示item.info info="{{item.info ? item.info : ' '}}"
实现tabBar的切换效果
首先，将数据放置在store.js文件中，定义activeTabBarIndex为0，再使用updateActiveTabBarIndex方法接收数据
之后，在index.js文件中使用wx.switch()转换方法实现转换，这里用的是根路径，所以要修改list中的路径，在前面都加上/
使用active-color来修改选中文本的颜色
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
