Universal Canvas Engine - A unified canvas rendering engine supporting multiple platforms including WeChat Mini Programs
npm install @universal-canvas/enginebash
npm install @universal-canvas/engine
`
在微信小程序中使用
$3
在微信开发者工具中使用此包,需要执行以下步骤:
1. 确保已在项目根目录下执行 npm install 安装所有依赖
2. 在微信开发者工具中,点击菜单栏的 "工具" -> "构建 npm"
3. 构建完成后,会在项目中生成 miniprogram_npm 目录
$3
在小程序页面中引入 WeappAdapter:
`javascript
import { WeappAdapter } from '@universal-canvas/engine'
Page({
data: {},
onLoad() {
// 初始化适配器
const adapter = new WeappAdapter();
// 初始化配置
const config = {
containerId: '#canvas-container' // 页面中canvas容器的ID选择器
};
// 初始化适配器
adapter.init(config).then(() => {
console.log('WeappAdapter initialized successfully');
}).catch(err => {
console.error('Failed to initialize WeappAdapter:', err);
});
}
})
`
$3
在对应的 WXML 文件中添加容器元素:
`xml
`
$3
#### "module not defined" 错误
如果遇到类似以下错误:
`
Error: module 'miniprogram_npm/@universal-canvas/engine/adapter/weapp.js' is not defined
`
请按以下步骤排查:
1. 确认已经执行了 "构建 npm" 步骤
2. 检查 miniprogram_npm 目录是否已生成且包含 @universal-canvas/engine 文件夹
3. 如果问题仍然存在,请清理 miniprogram_npm 目录后重新构建:
- 删除 miniprogram_npm 文件夹
- 重新执行 "工具" -> "构建 npm"
4. 确保在小程序开发者工具中重新编译项目
#### 适配器环境检查
WeappAdapter 内部包含了环境检查,确保只在微信小程序环境中使用。如果在非小程序环境中使用会抛出错误。
API 参考
$3
#### 方法
##### init(config)
初始化适配器
参数:
- config {Object} 配置对象
- containerId {String} Canvas 容器的选择器
返回值:Promise
##### getContainerRect(id)
获取容器的位置和尺寸信息
参数:
- id {String} 容器元素的选择器
返回值:Promise
开发指南
$3
`bash
npm run build
`
该命令会:
1. 编译 TypeScript 代码到 dist 目录
2. 将编译结果复制到 miniprogram_npm/@universal-canvas/engine 目录,用于小程序环境
$3
`
src/
├── adapter/
│ └── weapp.ts # 微信小程序适配器
├── engine.ts # 引擎接口定义
├── index.ts # 默认入口文件
├── index.miniprogram.ts # 小程序专用入口文件
└── types.ts # 类型定义
dist/ # 编译后的代码
miniprogram_npm/ # 小程序npm包目录
`
$3
为了更好地支持微信小程序环境,我们提供了专门的小程序入口文件 index.miniprogram.js,并通过 package.json 中的 miniprogram` 字段指定。