我们有收到很多反馈：在开放数据域做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渲染引擎实现的喔。 对定向分享奖励还有什么疑问或者经验分享？希望了解哪些方面的实践教程？欢迎在评论区留言。
赞啊
这也太麻烦了吧 不会CSS这些web技术的怎么拼哇 官方能否给给可视化的
给按钮绑定click事件后点击没有反应，不知道是没有效果还是点击区域发生了偏移
请问下要如何适配不同机型大小
emm。搞了比较久 ，还是没太明白。
目前有三个问题：
1，bitmaptext 会有报错，这边我用text替换了。
2，scrollview滑动不了。
3，https://res.wx.qq.com/wechatgame/product/webpack/userupload/20191119/wegoing.jpeg 不显示 ，报错说 不在后台可信域。
目前demo的开发状态如下：
附上index.js代码：
var canvas = wx.getSharedCanvas(); var context = canvas.getContext('2d'); var engine = require('minigame_Layout'); var Layout = engine.default; var doT = require("doT") var isInited = false let style = { container: { width: 720, height: 1410, borderRadius: 12, }, header: { height: 60, width: 720, flexDirection: 'column', alignItems: 'center', backgroundColor: '#ffffff', borderBottomWidth: 0.5, borderColor: 'rgba(0, 0, 0, 0.3)', }, title: { width: 144, fontSize: 48, height: 60, lineHeight: 50, textAlign: 'center', fontWeight: 'bold', borderBottomWidth: 6, borderColor: '#000000', verticalAlign: 'middle' }, rankList: { width: 720, height: 300, backgroundColor: '#ffffff', }, list: { width: 720, height: 300, backgroundColor: '#ffffff', marginTop: 0, }, listItem: { backgroundColor: '#F7F7F7', width: 720, height: 30, flexDirection: 'row', alignItems: 'center', }, listItemOld: { backgroundColor: '#ffffff', width: 720, height: 30, flexDirection: 'row', alignItems: 'center', }, listItemNum: { fontSize: 32, fontWeight: 'bold', lineHeight: 32, height: 32, textAlign: 'center', width: 120, verticalAlign: 'middle' }, listHeadImg: { borderRadius: 6, width: 30, height: 30, }, listItemScore: { fontSize: 28, fontWeight: 'bold', marginLeft: 10, height: 150, lineHeight: 150, width: 10, textAlign: 'right', }, listItemName: { fontSize: 36, height: 150, lineHeight: 150, width: 350, marginLeft: 30, }, listScoreUnit: { opacity: 0.5, color: '#000000', fontSize: 20, height: 150, lineHeight: 150, marginLeft: 8, }, selfListItem: { width: 720, height: 30, borderRadius: 20, marginTop: 50, backgroundColor: '#ffffff', }, listTips: { width: 720, height: 90, lineHeight: 90, textAlign: 'center', fontSize: 30, color: 'rgba(0,0,0,0.5)', backgroundColor: '#ffffff', borderRadius: 10, } } function init() { // 创建mock数据 let item = { nickname: "zim", rankScore: 1, avatarUrl: 'res/layabox.png', }; let datasource = { data: [], selfIndex: 1, self: item } for (let i = 0; i < 20; i++) { var cp = JSON.parse(JSON.stringify(item)); cp.rankScore = Math.floor(Math.random() * 1000 + 1) datasource.data.push(cp); } // getElementPagePosition为IDE内置函数 let pos = { x: 0, y: 0 }; // 每次初始化之前先执行清理逻辑保证内存不会一直增长 Layout.clear(); let resultText = doT.anonymous(datasource); // 初始化引擎 Layout.init(resultText, style); console.log(Layout) // 设置canvas的尺寸和样式的container比例一致 canvas.width = Layout.renderport.width; canvas.height = Layout.renderport.height; Layout.updateViewPort({ x: pos.x, y: pos.y, width: canvas.offsetWidth, height: canvas.offsetHeight, }); Layout.layout(context); } wx.onMessage(data => { console.log("game.js -> index.js :", data); if (isInited) { return; } isInited = true init(); });把下方代码替换一下就好
Layout.updateViewPort({x: pos.x,y: pos.y,width: canvas.width,height: canvas.height,});真机开增强编译 会报错，如何解决？ 报这个 @babel/runtime/helpers/interopRequire有无具体类似白鹭，laya 和cco 引擎应用案例呢？这块案例可以拓展一下
难道开发gg不知道github被q限速了 clone 很慢吗？ 为何放到国内服务器上面呢。。 🐤
真是福音呀！但现在的引擎只支持image标签显示图片，而我们游戏在子域有很多等级段位图片需要显示，希望能扩展支持sprites图集，可以类似div的背景图片显示