介紹一些小程序的擴(kuò)展的工具類(lèi)庫(kù)彤侍。
目錄：
1、瘦身工具
通過(guò)剔除無(wú)用文件逆趋、壓縮圖片盏阶、復(fù)用代碼等方式減少小程序代碼包體積。
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的依賴(lài)關(guān)系闻书，找出未使用的文件
analyzer [options] Analyze dependencies of miniprogram, find out unused files
//檢測(cè)源代碼中的重復(fù)
cpd [options] <dir> Detect duplications in source code
//將圖像轉(zhuǎn)換為css精靈
sprite [options] <input...> Covert images into css sprites
//無(wú)縫縮小圖像
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 依賴(lài)分析名斟，查找無(wú)用文件（ analyzer [options] ）
對(duì)小程序的頁(yè)面和組件進(jìn)行依賴(lài)分析，找出未被引用的文件魄眉，生成packOptions項(xiàng)砰盐，在開(kāi)發(fā)者工具上傳代碼時(shí)忽略無(wú)用文件。
支持小程序/插件坑律，僅對(duì) wxml岩梳、wxss、wxs、js冀值、json 以及組件進(jìn)行分析也物，不包括組件內(nèi)的圖片等資源。
需要注意的是列疗，js 文件的依賴(lài)滑蚯，支持 import 和 require 導(dǎo)入的模塊，但運(yùn)行時(shí)計(jì)算的路徑如 require(a + b) 將無(wú)法識(shí)別抵栈。
用法：
Usage: miniprogram-slim analyzer [options]
Analyze dependencies of miniprogram, find out unused files
Options:
//輸出[dir]結(jié)果的目錄路徑（默認(rèn)值：“./analyzer”）
-o, --output [dir] path to directory for result (default: "./analyzer")
//忽略應(yīng)該從未使用的文件中排除的文件的glob模式
-i, --ignore <glob> glob pattern for files what should be excluded from unused files
//寫(xiě)覆蓋舊project.config.json項(xiàng)目
-w, --write overwrite old project.config.json
//表打印微型程序文件大小數(shù)據(jù)
-t, --table print miniprogram file size data
//幫助輸出使用信息
-h, --help output usage information
//進(jìn)入包含 project.config.json 的項(xiàng)目根目錄告材，執(zhí)行 miniprogram-slim analyzer，默認(rèn)會(huì)生成 ./analyzer/result.json 文件古劲，記錄生成的數(shù)據(jù)結(jié)果斥赋。
{
//字段記錄著在開(kāi)發(fā)者工具打包上傳時(shí)可以被忽略的文件，拷貝該部分至 project.config.json 即可绢慢，執(zhí)行 miniprogram-slim analyzer -w 將自動(dòng)進(jìn)行同步灿渴。
"packOptions": {
"ignore": []
},
//字段記錄著文件間的依賴(lài)關(guān)系，按頁(yè)面維護(hù)分割胰舆，包括與頁(yè)面相關(guān)的 wxml骚露、wxss、js缚窿、wxs 以及組件的引用棘幸。
"dependencies": {
"app": {
"esDeps": [],
"wxmlDeps": [],
"wxssDeps": [],
"compDeps": [],
"wxsDeps": [],
"jsonDeps": [],
"files": []
},
"pages": {},
"subpackages": {}
},
//為未引用的文件數(shù)組
"unusedFiles": [],
//為保持依賴(lài)關(guān)系的文件大小的集合，test/minicode 項(xiàng)目測(cè)試部分結(jié)果如下倦零，其中后綴為 .json 的表示一個(gè)組件
"data": {}
}
1.2.2 代碼相似度比較 ( cpd [options] )
對(duì) jscpd 模塊的簡(jiǎn)單封裝误续，默認(rèn)會(huì)在執(zhí)行的目錄下生成一份 .jscpd.json 配置文件，report 目錄保存生成的代碼對(duì)比報(bào)告扫茅。
用法
sage: miniprogram-slim cpd [options] <dir>
Detect duplications in source code
Options:
//配置[文件]配置文件的路徑
-c, --config [file] path to config file (default: ".jscpd.json")
// 輸出[dir]報(bào)告的目錄路徑（默認(rèn)值：“./report/”）
-o, --output [dir] path to directory for reports (default: "./report/")
//忽略應(yīng)該從重復(fù)檢測(cè)中排除的文件的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] )
對(duì) imagemin 模塊的簡(jiǎn)單封裝蹋嵌。
用法
// miniprogram-slim imagemin -h
Usage: miniprogram-slim imagemin [options] <input...>
Minify images seamlessly
Options:
//輸出目錄
-o, --output <dir> output directory
//指示pngquant使用最少的顏色（默認(rèn)值為：“0.65分,0.8分")
--png-quality <string> instructs pngquant to use the least amount of colors (default: "0.65,0.8")
// 無(wú)漸進(jìn)式創(chuàng)建基準(zhǔn)JPEG文件
--no-progressive creates baseline JPEG file
//幫助輸出使用信息
-h, --help output usage information
1.2.4 生成雪碧圖代碼 （sprite -f emoji images/*/.png）
對(duì) spritesmith 模塊的簡(jiǎn)單封裝，能夠自動(dòng)生成雪碧圖和對(duì)應(yīng)的 css 代碼葫隙。
用法
// miniprogram-slim sprite -h
Usage: miniprogram-slim sprite [options] <input...>
Covert images into css sprites
Options:
//輸出[目錄](méi)輸出目錄（默認(rèn)值：“../”）
-o, --output [dir] output directory (default: "./")
//filename[string]spritesheet的文件名（默認(rèn)值：“sprite”）
-f, --filename [string] filename of spritesheet (default: "sprite")
// --要在圖像之間使用的填充[數(shù)字]填充（默認(rèn)值：2）
-p, --padding [number] padding to use between images (default: 2)
//幫助輸出使用信息
-h, --help output usage information
2栽烂、微信小程序定義文件
微信小程序 API 的 TypeScript 類(lèi)型定義文件
1.1 安裝
# 安裝對(duì)應(yīng)最新基礎(chǔ)庫(kù)的定義文件
npm install miniprogram-api-typings
or
# 安裝對(duì)應(yīng)基礎(chǔ)庫(kù)版本 2.4.1 的定義文件
npm install miniprogram-api-typings@2.4.1
3、擴(kuò)展微信小程序api支持promise
微信小程序 API 的 TypeScript 類(lèi)型定義文件
1.1 安裝
npm install --save miniprogram-api-promise
1.2 使用
在小程序入口（app.js）調(diào)用一次promisifyAll恋脚，只需要調(diào)用一次腺办。
示例：
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圖形庫(kù)）是一個(gè)JavaScript API糟描，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形怀喉，而無(wú)需使用插件。該API可以在HTML5 canvas元素中使用船响。 這種一致性使API可以利用用戶(hù)設(shè)備提供的硬件圖形加速
1.1 安裝
//例子可參考： https://github.com/wechat-miniprogram/threejs-miniprogram/tree/master/example
//1躬拢、通過(guò) npm 安裝 =》 安裝完成之后在微信開(kāi)發(fā)者工具中點(diǎn)擊構(gòu)建 npm躲履。
npm install --save threejs-miniprogram
//2、導(dǎo)入小程序適配版本的 Three.js
import {createScopedThreejs} from 'threejs-miniprogram'
Page({
onReady() {
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
const canvas = res[0].node
// 創(chuàng)建一個(gè)與 canvas 綁定的 three.js
const THREE = createScopedThreejs(canvas)
// 傳遞并使用 THREE 變量
})
}
})
說(shuō)明
- 本項(xiàng)目當(dāng)前使用的 Three.js 版本號(hào)為 0.108.0估灿，如要更新 threejs 版本可發(fā) PR 修改或 fork 后自行修改崇呵。
- 該適配版本的 THREE 不在全局環(huán)境中，如使用 Three.js 的其他配套類(lèi)庫(kù)馅袁，需要自行傳入 THREE 到類(lèi)庫(kù)中域慷。
5、lottie-miniprogram
lottie 動(dòng)畫(huà)庫(kù)適配小程序的版本
Lottie是一個(gè)用于Android汗销，iOS犹褒，Web和Windows的庫(kù)，用于解析使用Bodymovin導(dǎo)出為json的Adobe After Effects動(dòng)畫(huà)弛针，并在移動(dòng)設(shè)備和網(wǎng)絡(luò)上呈現(xiàn)它們
1.1 安裝
//可參考該代碼片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF
//1叠骑、通過(guò) npm 安裝 =》 安裝完成之后在微信開(kāi)發(fā)者工具中點(diǎn)擊構(gòu)建 npm。
npm install --save lottie-miniprogram
//2削茁、傳入 canvas 對(duì)象用于適配
<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 接口
目前提供兩個(gè)接口：
- lottie.setup(canvas)
需要在任何 lottie 接口調(diào)用之前調(diào)用，傳入 canvas 對(duì)象
- lottie.loadAnimation(options)
與原來(lái)的 loadAnimation 有些不同茧跋，支持的參數(shù)有：
- loop
- autoplay
- animationData
- path （只支持網(wǎng)絡(luò)地址）
- rendererSettings.context （必填）
說(shuō)明
- 本項(xiàng)目是以 npm 的方式依賴(lài)原 lottie-web 項(xiàng)目慰丛，若原項(xiàng)目有新版本，可直接改變依賴(lài)的版本號(hào)瘾杭。
- 本項(xiàng)目依賴(lài)小程序基礎(chǔ)庫(kù) 2.8.0 里性能更好的 canvas 實(shí)現(xiàn)诅病，由于還有些小問(wèn)題沒(méi)有正式開(kāi)放，但目前用在此處暫無(wú)發(fā)現(xiàn)問(wèn)題粥烁。
- 由于小程序本身不支持動(dòng)態(tài)執(zhí)行腳本贤笆，因此 lottie 的 expression 功能也是不支持的。
