介紹一些小程序的擴展的工具類庫。
目錄：
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 功能也是不支持的。
