@leafer/miniapp

Full package, includes @leafer-ui/miniapp and all @leafer-in/* plugin packages (excluding text editor and HTML plugins).

web version     worker version     node version     mini program version

Runs in a mini program environment. Learn about npm usage considerations in mini programs.

Installation

npm

npm install @leafer/miniapp

pnpm

pnpm add @leafer/miniapp

yarn

yarn add @leafer/miniapp

bun

bun add @leafer/miniapp

Update

Learn how to quickly update versions.

Download CDN version

You can also download the library file locally and import it directly. This method currently cannot use additional plugins.

https://unpkg.com/@leafer/miniapp@2.3.1/dist/miniapp.module.js

https://unpkg.com/@leafer/miniapp@2.3.1/dist/miniapp.module.min.js

Notes

1. WeChat Mini Program has issues loading SVG images.
2. Shadows and some features are still being adapted for compatibility.
3. When used in the web-view component, WeChat JS-SDK uploads PNG images as JPG format. Please use native HTML5 input for uploading.

Try it

Create an interactive engine that supports landscape mode and allows dragging rectangles.

Replace the page under miniprogram/pages/index with the following content:

index.ts

import { Leafer, Rect } from '@leafer/miniapp'

Page({
  onReady() {
    // this refers to the current mini program page instance
    const leafer = new Leafer({ view: 'leafer', eventer: this })

    const rect = new Rect({
      x: 100,
      y: 100,
      width: 100,
      height: 100,
      fill: '#32cd79',
      draggable: true,
    })

    leafer.add(rect)
  },
  receiveEvent() {}, // predefined method for receiving interaction events
})

index.wxml

<canvas
    id="leafer"
    type="2d"
    catchtouchstart="receiveEvent"
    catchtouchmove="receiveEvent"
    catchtouchend="receiveEvent"
    catchtouchcancel="receiveEvent"
></canvas>

index.wxss

page {
  height: 100%;
}
#leafer {
  width: 100%;
  height: 100%;
}

index.json

{
  "navigationStyle": "custom",
  "pageOrientation": "auto"
}

Usage

The usage, global variables, and @leafer-ui/miniapp are consistent. You only need to change the package name to run the official example code.