先说下我的开发流程： 先打开这个教程链接： https://wechat-miniprogram.github.io/minigame-canvas-engine/api/guide.html#%E5%AE%89%E8%A3%85 滑到 快速入门 页签 - 安装 // npm安装方式 npm install minigame-canvas-engine --save 下载好了之后 ，打开安装目录 node_modules 。 找到 minigame-canvas-engine/index.js。 这个就是 集成了 Layout 的库。复制拷贝到我们的子域工程目录。（这里我改掉了库的文件名，从index.js -> minigame-canvas-engine.js） 可以看到，这时候我们的子域工程目录结构是这样的 。doT.js（生成xml的脚本）、 index.js（子域启动脚本）、 minigame-canvas-engine.js（Layout库） [图片] 贴上doT.js /** * xml经过doT.js编译出的模板函数 * 因为小游戏不支持new Function，模板函数只能外部编译 * 可直接拷贝本函数到小游戏中使用 */ function anonymous(it) { var out = '<view class="container" id="main"> <view class="header"> <text class="title" value="等级"></text> </view> <view class="rankList"> <scrollview class="list"> '; var arr1 = it.data; if (arr1) { var item, index = -1, l1 = arr1.length - 1; while (index < l1) { item = arr1[index += 1]; out += ' '; if (index % 2 === 1) { out += ' <view class="listItem listItemOld"> '; } out += ' '; if (index % 2 === 0) { out += ' <view class="listItem"> '; } out += ' <text class="listItemNum" value="' + (index + 1) + '"></text> <image class="listHeadImg" src="' + (item.avatarUrl) + '"></image> <text class="listItemName" value="' + (item.nickname) + '"></text> <text class="listItemScore" value="' + (item.rankScore) + '"></text> <text class="listScoreUnit" value="分"></text> </view> '; } } out += ' </scrollview> <text class="listTips" value="仅展示前50位好友排名"></text> <view class="listItem selfListItem"> <text class="listItemNum" value="' + (it.selfIndex) + '"></text> <image class="listHeadImg" src="' + (it.self.avatarUrl) + '"></image> <text class="listItemName" value="' + (it.self.nickname) + '"></text> <text class="listItemScore" value="' + (item.rankScore) + '"></text> <text class="listScoreUnit" value="分"></text> </view> </view></view>'; return out; } module.exports = { anonymous: anonymous } 贴上index.js var canvas = wx.getSharedCanvas(); var context = canvas.getContext('2d'); var engine = require('minigame-canvas-engine'); var Layout = engine.default; var doT = require("doT") 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) console.log("canvas =", canvas.offsetWidth,canvas.offsetHeight) // 设置canvas的尺寸和样式的container比例一致 canvas.width = Layout.renderport.width; canvas.height = Layout.renderport.height; Layout.updateViewPort({ x: pos.x, y: pos.y, width: canvas.width, height: canvas.height, }); Layout.layout(context); } wx.onMessage(data => { console.log("game.js -> index.js :", data); if (data["type"] == "display" || data["type"] == "undisplay") { return; } init(); }); 然后问题来了 ： 1，文档上的 bitmaptext 会有报错，这边我用text替换了。 具体是如何加载到字体？   out += ' <bitmaptext font="fnt_number-export" class="listItemNu 报错信息： [图片] 2，文档中的 avatarUrl = https://res.wx.qq.com/wechatgame/product/webpack/userupload/20191119/wegoing.jpeg 头像不显示 ，报错说 不在后台可信域。 求解决方案~

官方反馈的问题是：提交的小游戏需是一个完成品，iOS/安卓无法正常体验，要求可以打开、可以运行，且不得为测试版。 我们发布的体验版本可以进入且关闭了调试模式，确定可以运行。所以无法定位到官方的反馈问题。。。

报错：Pack indices and data do not match in size [图片] [图片] [图片]