我们有收到很多反馈：在开放数据域做UI界面太难了！！
“我只是想绘制一个简单的好友列表，最多加个赠送或者邀请按钮，在开放数据域做UI界面太难了！！” “开放数据域引入一个独立的游戏引擎会占据好多代码包体积” “纯canvas开发真的太麻烦，代码可读性差，事件处理也很麻烦” 这是很多开发者的心声。 为此，开发哥哥们也提供了开放数据域UI绘制的解决方案——轻量级的canvas渲染引擎。 体积小！性能还杠杠的！上面的demo就是用它完成的。 轻量级的canvas渲染引擎 这款轻量级的canvas渲染引擎，它具有以下特点： · 引擎体积很小，压缩之后仅~50kb； · 类Web开发，只需提供XML + CSS即可渲染界面，提高代码可维护性； · 性能强大：长列表滚动可跑满60帧； | 使用教程： · step 1：克隆本项目到合适的文件夹，引用引擎
// 通过Git的方式安装git clone https://github.com/wechat-miniprogram/minigame-canvas-engine// 引用渲染引擎import Layout from 'minigame-canvas-engine' |
· step 2：为UI界面编写模板和样式
let template = `<view > <text value="hello canvas"> </text></view>`let style = { container: { width: 200, height: 100, backgroundColor: '#ffffff', justContent: 'center', alignItems: 'center', }, testText: { color: '#ff0000', width: 200, height: 100, lineHeight: 100, fontSize: 30, textAlign: 'center', }} |
· step 3：调用渲染API，执行真正的渲染
// 将模板和样式传给渲染引擎，渲染引擎会生成布局树和渲染树等，准备渲染到canvas上面Layout.init(template, style); // sharedContext自行创建Layout.layout(sharedContext);/** * 设置sharedCancas在主域绘制的物理尺寸和位置信息，这一步非常重要， * 因为子域渲染引擎并不关心外部使用的引擎是什么，而是自己监听触摸事件来进行事件处理， * 因此需要拿到真实的物理尺寸、位置信息来执行事件处理。 */Layout.updateViewPort({ width : 200, height: 100, x : 100, y : 100}); |
· step 4：效果预览
|| TIPS： 详细的教程可以查看文档； 为了方便调试，还可以使用在线编辑功能； 上面的邀请好友获得激励的demo示例，也是用这个canvas渲染引擎实现的喔。 对定向分享奖励还有什么疑问或者经验分享？希望了解哪些方面的实践教程？欢迎在评论区留言。
给按钮绑定click事件后点击没有反应，不知道是没有效果还是点击区域发生了偏移
请问下要如何适配不同机型大小