小程序实用扩展工具类库总结
介绍一些小程序的扩展的工具类库。
目录：
1、瘦身工具
通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积。
1.1 安装
npm install -g miniprogram-slim
1.2 使用
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) 将无法识别。
用法：
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
//进入包含 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 目录保存生成的代码对比报告。
用法
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 模块的简单封装。
用法
// 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 代码。
用法
// 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 安装
# 安装对应最新基础库的定义文件
npm install miniprogram-api-typings
or
# 安装对应基础库版本 2.4.1 的定义文件
npm install miniprogram-api-typings@2.4.1
3、扩展微信小程序api支持promise
微信小程序 API 的 TypeScript 类型定义文件
1.1 安装
npm install --save miniprogram-api-promise
1.2 使用
在小程序入口（app.js）调用一次promisifyAll，只需要调用一次。
示例：
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 安装
//例子可参考： 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 安装
//可参考该代码片段：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 功能也是不支持的。
