### 一、 小程序的兼容性及其他的坑
**1. 字体文件不能放到本地**
> 需要修改为远程字体字体，字体文件所在的服务器需要配置允许跨域请求，否则在
**2. 组件里面的样式需要避免 .class-name + .class-name 的情况**
> 原因：所有微信小程序组件在引用后，会被加上实体dom节点
**3. 公共导航在IOS和android下的表现是不同的**
> 建议自定义导航，设置app.json里面windows下参数，navigationStyle：“custom”
**4. 子组件不能直接继承父组件的样式类**
- **子组件定义**：
```
Component({
externalClasses:?["icon-class"]
})
```
- **父组件使用方式**：
```
```
**5. scroll-view使用的坑**
- ?scroll-view里面的节点不要使用margin，会导致ios上滑不动
- 避免使用enhanced属性，在某些情况下会出现空白节点
**6. wxml模板上未使用的变量**
> 在js文件中直接定义在this对象上，避免多余的setData，影响性能，如果需要频繁调用setData方法，考虑使用wxs方式；
**7. canvas图像模糊，有锯齿**
> 在微信开发者工具里预览动效是很清晰的，但是到了真机上动效就模糊、有锯齿。
- **解决办法：**
> retina屏幕的高分辨率导致了canvas画出的图像模糊、失真、锯齿，只需要获取到当前设备的devicePixelRatio，然后将画布和宽高、canvas的上下文同时缩放devicePixelRatio倍（其实就是放大devicePixelRatio倍）即可。
**8. swiper使用的坑**
> swiper+tab，在swiper切换过程中，需要使用bindanimationfinish而部署bindchange钩子函数来设置选中的tab，否则在快速切换过程中，tab的选中态会来回切换。
### 二、分包及预加载
**小程序单个包的体积不能超过2M，使用分包后，包体积总和不能超过20M（总体积后面应该会增加）。因此，需要采用分包策略来规避单个包体积的限制。**
**2.1 使用分包**
**配置方法**
- 假设支持分包的小程序目录结构如下：
- 开发者通过在 app.json?subpackages?字段声明项目分包结构：
- subpackages?中，每个分包的配置有以下几项：
**打包原则**
- 声明?subpackages?后，将按?subpackages?配置路径进行打包，subpackages?配置路径外的目录将被打包到 app（主包） 中
- app（主包）也可以有自己的 pages（即最外层的 pages 字段）
- subpackage?的根目录不能是另外一个?subpackage?内的子目录
- tabBar?页面必须在 app（主包）内
**引用原则**
- packageA?无法 require?packageB?JS 文件，但可以 require?app、自己 package 内的 JS 文件
- packageA?无法 import?packageB?的 template，但可以 require?app、自己 package 内的 template
- packageA?无法使用?packageB?的资源，但可以使用?app、自己 package 内的资源
**2.2 独立分包**
独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。一个小程序中可以有多个独立分包。
开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。
**限制**
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
此外，使用独立分包时要注意：
- 独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用?app.wxss?中的样式；
- App?只能在主包内定义，独立分包中不能定义?App，会造成无法预期的行为；
- 独立分包中暂时不支持使用插件。
**2.3 分包预下载**
开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于[独立分包](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html)，也可以预下载主包。
***分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成***
**配置方法**
预下载分包行为在进入某个页面时触发，通过在?app.json?增加?preloadRule?配置来控制。
**preloadRule?中，key?是页面路径，value?是进入此页面的预下载配置，每个配置有以下几项：**
**限制**
> 同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。
**2.4 分包及减小包体积建议**
如果包体积过大，用户访问的时候下载包体积时间过长，用户体验差。同时，在业务迭代过程中，包的体积还会增加，很可能超出微信官方对于小程序包体积的限制，所以我们需要分包处理以及尽可能的减小包体积，提升用户体验，方便后续业务迭代。分包和减小包体积有以下建议：
1. 及时删除无用的文件、图片、依赖，尽可能的复用代码；
2. 图片尽可能的使用网络地址，如果图片必须放到本地，建议也进行压缩处理；
3. 底部tab的页面放到主包中，主包的体积建议在1000k以下，方便后续业务的扩展，其他业务线都进行分包处理，分包的体积也应该尽可能的小，建议200k以下；
4. 如果使用了插件功能，应该将插件功能进行分包处理。同时，插件的体积也应该尽量的小；
5. 上传文件的时候开启压缩混淆，在project.config.json文件中配置忽略上传的文件；
6. 如果[WeUI](https://developers.weixin.qq.com/miniprogram/dev/extended/weui/)组件能够满足您的业务需求，应该尽可能的去复用，因为，WeUI组件不算在小程序包体积中。
### 三、小程序瘦身工具
通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积。开源项目地址：https://github.com/wechat-miniprogram/miniprogram-slim。
**3.1 安装**
```
npm install -g miniprogram-slim
```
**3.2 功能**
1. [依赖分析，查找无用文件](https://github.com/wechat-miniprogram/miniprogram-slim/blob/master/docs/deps.md)
2. [代码相似度比较](https://github.com/wechat-miniprogram/miniprogram-slim/blob/master/docs/jscpd.md)
3. [生成雪碧图代码](https://github.com/wechat-miniprogram/miniprogram-slim/blob/master/docs/sprite.md)
4. [图片压缩](https://github.com/wechat-miniprogram/miniprogram-slim/blob/master/docs/imagemin.md)
**3.3 使用**
```
Usage: miniprogram-slim
Options:
-v, --version output the version number
-h, --help output usage information
Commands:
cpd [options]
Examples:
$ miniprogram-slim analyzer -t
$ miniprogram-slim cpd src
$ miniprogram-slim imagemin images/**/*.png
$ miniprogram-slim sprite -f emoji images/**/*.png
```
**3.4 文件体积可视化工具**
运行miniprogram-slim analyzer -t命令后会生成一个json文件，将该json文件和echarts结合，可以生成可视化包体积工具。