介绍一些小程序的扩展的工具类库。

目录：

1、瘦身工具

通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积。

1.1 安装

1
npm install -g miniprogram-slim

1.2 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Usage: miniprogram-slim <command>

Options:
  -v, --version                  output the version number
  -h, --help                     output usage information

Commands:
  //分析miniprogram的依赖关系，找出未使用的文件
  analyzer [options]             Analyze dependencies of miniprogram, find out unused files

  //检测源代码中的重复
  cpd [options] <dir>            Detect duplications in source code 

  //将图像转换为css精灵
  sprite [options] <input...>    Covert images into css sprites 

  //无缝缩小图像
  imagemin [options] <input...>  Minify images seamlessly 



Examples:
  $ miniprogram-slim analyzer -t
  $ miniprogram-slim cpd src
  $ miniprogram-slim imagemin images/**/*.png
  $ miniprogram-slim sprite -f emoji images/**/*.png

1.2.1 依赖分析，查找无用文件（ analyzer [options] ）

对小程序的页面和组件进行依赖分析，找出未被引用的文件，生成packOptions项，在开发者工具上传代码时忽略无用文件。

支持小程序/插件，仅对 wxml、wxss、wxs、js、json 以及组件进行分析，不包括组件内的图片等资源。

需要注意的是，js 文件的依赖，支持 import 和 require 导入的模块，但运行时计算的路径如 require(a + b) 将无法识别。

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Usage: miniprogram-slim analyzer [options]

Analyze dependencies of miniprogram, find out unused files

Options:
  //输出[dir]结果的目录路径（默认值：“./analyzer”）
  -o, --output [dir]   path to directory for result (default: "./analyzer")

  //忽略应该从未使用的文件中排除的文件的glob模式
  -i, --ignore <glob>  glob pattern for files what should be excluded from unused files

  //写覆盖旧project.config.json项目
  -w, --write          overwrite old project.config.json

  //表打印微型程序文件大小数据
  -t, --table          print miniprogram file size data

  //帮助输出使用信息
  -h, --help           output usage information

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//进入包含 project.config.json 的项目根目录，执行 miniprogram-slim analyzer，默认会生成 ./analyzer/result.json 文件，记录生成的数据结果。
{
  //字段记录着在开发者工具打包上传时可以被忽略的文件，拷贝该部分至 project.config.json 即可，执行 miniprogram-slim analyzer -w 将自动进行同步。
  "packOptions": {
    "ignore": []
  },
  //字段记录着文件间的依赖关系，按页面维护分割，包括与页面相关的 wxml、wxss、js、wxs 以及组件的引用。
  "dependencies": {
    "app": {
      "esDeps": [],
      "wxmlDeps": [],
      "wxssDeps": [],
      "compDeps": [],
      "wxsDeps": [],
      "jsonDeps": [],
      "files": []
    },
    "pages": {},
    "subpackages": {}
  },
  //为未引用的文件数组
  "unusedFiles": [],
  //为保持依赖关系的文件大小的集合，test/minicode 项目测试部分结果如下，其中后缀为 .json 的表示一个组件
  "data": {}
}

1.2.2 代码相似度比较 ( cpd [options] )

对 jscpd 模块的简单封装，默认会在执行的目录下生成一份 .jscpd.json 配置文件，report 目录保存生成的代码对比报告。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sage: miniprogram-slim cpd [options] <dir>

Detect duplications in source code

Options:
  //配置[文件]配置文件的路径
  -c, --config [file]  path to config file (default: ".jscpd.json")  

  // 输出[dir]报告的目录路径（默认值：“./report/”）
  -o, --output [dir]   path to directory for reports (default: "./report/")

  //忽略应该从重复检测中排除的文件的glob模式
  -i, --ignore <glob>  glob pattern for files what should be excluded from duplication detection  

  //帮助输出使用信息
  -h, --help           output usage information

1.2.3 图片压缩 ( imagemin [options] )

对 imagemin 模块的简单封装。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// miniprogram-slim imagemin -h
Usage: miniprogram-slim imagemin [options] <input...>

Minify images seamlessly

Options:
  //输出目录
  -o, --output <dir>      output directory 

  //指示pngquant使用最少的颜色（默认值为：“0.65分,0.8分")
  --png-quality <string>  instructs pngquant to use the least amount of colors (default: "0.65,0.8") 

  // 无渐进式创建基准JPEG文件
  --no-progressive        creates baseline JPEG file

  //帮助输出使用信息
  -h, --help              output usage information

1.2.4 生成雪碧图代码 （sprite -f emoji images/*/.png）

对 spritesmith 模块的简单封装，能够自动生成雪碧图和对应的 css 代码。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// miniprogram-slim sprite -h
Usage: miniprogram-slim sprite [options] <input...>

Covert images into css sprites

Options:
  //输出[目录]输出目录（默认值：“../”）
  -o, --output [dir]       output directory (default: "./")

  //filename[string]spritesheet的文件名（默认值：“sprite”）
  -f, --filename [string]  filename of spritesheet (default: "sprite")

  // --要在图像之间使用的填充[数字]填充（默认值：2）
  -p, --padding [number]   padding to use between images (default: 2)

  //帮助输出使用信息
  -h, --help               output usage information

2、微信小程序定义文件

微信小程序 API 的 TypeScript 类型定义文件

1.1 安装

1
2
3
4
5
6
7
8
# 安装对应最新基础库的定义文件
npm install miniprogram-api-typings

or

# 安装对应基础库版本 2.4.1 的定义文件
npm install miniprogram-api-typings@2.4.1

3、扩展微信小程序api支持promise

微信小程序 API 的 TypeScript 类型定义文件

1.1 安装

1
2
npm install --save miniprogram-api-promise

1.2 使用

在小程序入口（app.js）调用一次promisifyAll，只需要调用一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
示例：
import { promisifyAll, promisify } from 'miniprogram-api-promise';

const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)
console.log(wxp.getSystemInfoSync())
wxp.getSystemInfo().then(console.log)
wxp.showModal().then(wxp.openSetting())

// compatible usage
wxp.getSystemInfo({success(res) {console.log(res)}})

// promisify single api
promisify(wx.getSystemInfo)().then(console.log)

4、threejs-miniprogram

Three.js 小程序 WebGL 的适配版本

WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。该API可以在HTML5 canvas元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速

1.1 安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//例子可参考： https://github.com/wechat-miniprogram/threejs-miniprogram/tree/master/example

//1、通过 npm 安装  =》 安装完成之后在微信开发者工具中点击构建 npm。
npm install --save threejs-miniprogram

//2、导入小程序适配版本的 Three.js
import {createScopedThreejs} from 'threejs-miniprogram'

Page({
  onReady() {
    wx.createSelectorQuery()
      .select('#webgl')
      .node()
      .exec((res) => {
        const canvas = res[0].node
        // 创建一个与 canvas 绑定的 three.js
        const THREE = createScopedThreejs(canvas)
        // 传递并使用 THREE 变量
      })
  }
})

说明

  • 本项目当前使用的 Three.js 版本号为 0.108.0，如要更新 threejs 版本可发 PR 修改或 fork 后自行修改。
  • 该适配版本的 THREE 不在全局环境中，如使用 Three.js 的其他配套类库，需要自行传入 THREE 到类库中。

5、lottie-miniprogram

lottie 动画库适配小程序的版本

Lottie是一个用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现它们

1.1 安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//可参考该代码片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF

//1、通过 npm 安装  =》 安装完成之后在微信开发者工具中点击构建 npm。
npm install --save lottie-miniprogram

//2、传入 canvas 对象用于适配
<canvas id="canvas" type="2d"></canvas>


import lottie from 'lottie-miniprogram'
Page({
  onReady() {
    wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      lottie.setup(canvas)
    }).exec()
  }
})

//3、使用 lottie 接口
lottie.setup(canvas)
lottie.loadAnimation({
  ...
})

1.2 接口

目前提供两个接口：

  • lottie.setup(canvas)

需要在任何 lottie 接口调用之前调用，传入 canvas 对象

  • lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同，支持的参数有：

  • loop
  • autoplay
  • animationData
  • path （只支持网络地址）
  • rendererSettings.context （必填）

说明

  • 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，可直接改变依赖的版本号。
  • 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现，由于还有些小问题没有正式开放，但目前用在此处暂无发现问题。
  • 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。

6、参考文档