An extended utility class library that introduces some applets.

Directory:

1. Slimming tool

Reduce the size of small program code package by eliminating useless files, compressing images and reusing code.

1.1 installation

  npm install -g miniprogram-slim
Copy the code

1.2 the use of

  Usage: miniprogram-slim <command>

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

  Commands:
    // Analyze miniProgram dependencies to find unused files
    analyzer [options]             Analyze dependencies of miniprogram, find out unused files

    // Check for duplicates in source code
    cpd [options] <dir>            Detect duplications in source code 

    // Convert images to CSS spritessprite [options] <input... > Covert images into css sprites// Seamlessly zoom out the imageimagemin [options] <input... > Minify images seamlesslyExamples:
    $ miniprogram-slim analyzer -t
    $ miniprogram-slim cpd src
    $ miniprogram-slim imagemin images/ * * /*.png
    $ miniprogram-slim sprite -f emoji images/ * * /*.png
Copy the code

1.2.1 Dependency Analysis, Finding Useless Files (Analyzer [Options])

Perform dependency analysis on the pages and components of the applet to find unreferenced files, generate packOptions, and ignore useless files when the developer tool uploads the code.

Support small programs/plug-ins, only for WXML, WXSS, WXS, JS, JSON and component analysis, not including the component images and other resources.

Note that js file dependencies support import and require imported modules, but runtime computed paths such as require(a + b) will not be recognized.

Usage:

Usage: miniprogram-slim analyzer [options]

Analyze dependencies of miniprogram, find out unused files

Options:
  // Directory path to output [dir] results (default: "./ Analyzer ")
  -o, --output [dir]   path to directory for result (default: "./analyzer")

  // Ignore glob patterns for files that should be excluded from unused files
  -i, --ignore <glob>  glob pattern for files what should be excluded from unused files

  // Write overrides the old project.config.json project
  -w, --write          overwrite old project.config.json

  // The table prints microprogram file size data
  -t, --table          print miniprogram file size data

  // Help output usage information
  -h, --help           output usage information

Copy the code
  // Go to the project root directory containing project.config.json and run miniProgram-Slim Analyzer. By default, the./ Analyzer /result.json file is generated to record the generated data.
  {
    // This field records files that can be ignored when the developer tools package and upload. Copy this part to project.config.json and run miniProgram-Slim Analyzer -w to automatically synchronize.
    "packOptions": {
      "ignore": []},// Fields record dependencies between files, broken down by page maintenance, including page-related WXML, WXSS, JS, WXS, and component references.
    "dependencies": {
      "app": {
        "esDeps": []."wxmlDeps": []."wxssDeps": []."compDeps": []."wxsDeps": []."jsonDeps": []."files": []},"pages": {},
      "subpackages": {}},// Is an array of unreferenced files
    "unusedFiles": [].// To preserve a collection of file sizes for dependencies, the test/minicode project test section results as follows, where the suffix.json represents a component
    "data": {}}Copy the code

1.2.2 Comparison of Code Similarity (CPD [options])

A simple encapsulation of the JSCPD module generates a.jscpd.json configuration file in the execution directory by default, and the report directory holds the generated code comparison report.

usage

sage: miniprogram-slim cpd [options] <dir>

Detect duplications in source code

Options:
  // Configure [file] The path to the configuration file
  -c, --config [file]  path to config file (default: ".jscpd.json")  

  // Output [dir] report directory path (default: "./report/ ")
  -o, --output [dir]   path to directory for reports (default: "./report/")

  // Ignore glob patterns for files that should be excluded from repeat detection
  -i, --ignore <glob>  glob pattern for files what should be excluded from duplication detection  

  // Help output usage information
  -h, --help           output usage information 
Copy the code

1.2.3 Image Compression (Imagemin [options])

Simple encapsulation of the Imagemin module.

usage

// miniprogram-slim imagemin -h
Usage: miniprogram-slim imagemin [options] <input... > Minify images seamlesslyOptions:
  // Output directory
  -o, --output <dir>      output directory 

  // Indicate pngQuant to use the least amount of color (default: "0.65,0.8 ")
  --png-quality <string>  instructs pngquant to use the least amount of colors (default: "0.65, 0.8,") 

  // No progressive creation of benchmark JPEG files
  --no-progressive        creates baseline JPEG file

  // Help output usage information
  -h, --help              output usage information 

Copy the code

1.2.4 Generating Sprite emoji images (Sprite-f Emoji images/**/*.png)

Simple encapsulation of spritesmith module, can automatically generate Sprite images and corresponding CSS code.

usage

// miniprogram-slim sprite -h
Usage: miniprogram-slim sprite [options] <input... > Covert images into css spritesOptions:
  // Output [directory] Output directory (default: ".. / ")
  -o, --output [dir]       output directory (default: ". /")

  //filename[string] The name of the file for spritesheet (default: "Sprite")
  -f, --filename [string]  filename of spritesheet (default: "sprite")

  // -- Padding to use between images (default: 2)
  -p, --padding [number]   padding to use between images (default: 2)

  // Help output usage information
  -h, --help               output usage information

Copy the code

2. Wechat applets definition file

TypeScript type definition file for the wechat applets API

1.1 installation

NPM install miniprogram- API -typings or2.41.NPM install miniprogram- api-typing@2.41.

Copy the code

3. Expand wechat apICS to support Promise

TypeScript type definition file for the wechat applets API

1.1 installation

  npm install --save miniprogram-api-promise

Copy the code

1.2 the use of

Invoke promisifyAll once in the applets portal (app.js).

Example: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)

Copy the code

4, threejs – miniprogram

Three. Js applet WebGL adaptation version

WebGL (Web Graphics Library) is a JavaScript API that renders high-performance interactive 3D and 2D graphics in any compatible Web browser without the need for plug-ins. This API can be used within the HTML5 Canvas element. This consistency allows the API to take advantage of hardware graphics acceleration provided by the user device

1.1 installation

  / / examples may refer to: https://github.com/wechat-miniprogram/threejs-miniprogram/tree/master/example

  //1. After the installation is complete, click build NPM in wechat Developer tool.
  npm install --save threejs-miniprogram

  // import the applet adaptation version of three.js
  import {createScopedThreejs} from 'threejs-miniprogram'

  Page({
    onReady() {
      wx.createSelectorQuery()
        .select('#webgl')
        .node()
        .exec((res) = > {
          const canvas = res[0].node
          // Create a canvas bound three.js
          const THREE = createScopedThreejs(canvas)
          // Pass and use the THREE variable})}})Copy the code

instructions

  • The version number of threejs currently used in this project is 0.108.0. If you want to update threejs version, you can send PR or fork to modify it by yourself.
  • The adaptation version of THREE is not in the global environment. If you use other supporting class libraries of Three.js, you need to pass THREE into the class library.

5, Lottie – miniprogram

The Lottie animation library ADAPTS a version of the applet

Lottie is a library for Android, iOS, Web, and Windows for parsing Adobe After Effects animations exported as JSON using Bodymovin and rendering them on mobile devices and the Web

1.1 installation

  / / the code snippet for reference: https://developers.weixin.qq.com/s/2TYvm9mJ75bF
  
  //1. After the installation is complete, click build NPM in wechat Developer tool.
  npm install --save lottie-miniprogram

  //2. Pass the Canvas object for adaptation
  <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()
    }
  })

  // use the Lottie interface
  lottie.setup(canvas)
  lottie.loadAnimation({
    ...
  })
  
Copy the code

1.2 interface

Currently, two interfaces are provided:

  • lottie.setup(canvas)

It needs to be called before any Lottie interface calls, passing in the Canvas object

  • lottie.loadAnimation(options)

Different from the original loadAnimation, the supported parameters are:

  • loop
  • autoplay
  • animationData
  • Path (network address only)
  • Renderersettings. context (required)

instructions

  • This project relies on the original Lottie-Web project in an NPM manner. If there is a new version of the original project, you can directly change the version number of the dependency.
  • This project relies on the canvas implementation with better performance in the small program foundation library 2.8.0. Due to some minor problems, it has not been officially opened, but no problems have been found in the current use here.
  • Since applets themselves do not support dynamic script execution, Lottie’s Expression feature is also not supported.

6. Reference documents

  • Applets document
  • Small program document source code
  • Web – Lottie source code
  • Web – Lottie Chinese website
  • Three. Js source code
  • Threejs Chinese website

Original address: yolkpie.net/2020/12/13/…