先说下我的开发流程：

先打开这个教程链接：

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 头像不显示 ，报错说 不在后台可信域。

求解决方案~