@leafer-game/miniapp

web 版     worker 版     node 版     小程序版

在小程序环境中运行，了解小程序使用 npm 包的注意事项。

基于 @leafer-ui/miniapp，集成了 Robot 、交互状态 、 动画、运动路径、查找元素 插件，适用于小游戏场景。

安装

npm

npm install @leafer-game/miniapp

pnpm

pnpm add @leafer-game/miniapp

yarn

yarn add @leafer-game/miniapp

bun

bun add @leafer-game/miniapp

下载 CDN 版本

你也可以将库文件直接下载到本地 import 引入。

https://unpkg.com/@leafer-game/miniapp@1.4.0/dist/miniapp.module.js

https://unpkg.com/@leafer-game/miniapp@1.4.0/dist/miniapp.module.min.js

注意

微信小程序自身加载 svg 图片有问题。

阴影、遮罩等正在适配兼容性。

温馨提示

微信小程序 iOS 端 3.0.0 之后 view 中的 canvas drawImage 无法绘制离屏画布，已找到办法绕过此限制，但仍有部分功能用不了（如图层混合模式，擦除，后续会继续适配）。

等待小程序官方修复 bug, 大家可以一起去催一催。复杂应用建议先采用小程序的 web-view 方式开发。

体验

创建一个交互应用，能够横屏，可以拖拽矩形。

将小程序 miniprogram/pages/index 文件夹下的页面替换成如下内容：

index.ts

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

Page({
  onReady() {
    // this 为当前小程序页面实例
    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() {}, // 约定接收交互事件的方法名
})

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"
}

使用

使用方式、全局变量和 @leafer-ui/miniapp 一致, 只需改下包名，即可运行官网示例代码。