Wechat mini games

Has anyone used OpenFl to develop a WeChat mini game? (e.g., as described here: https://www.lewagon.com/blog/wechat-mini-games-are-making-noise-how-can-developers-get-started-quickly)

Wonder how much massaging of the html5 output would be required to make it work.

There is this shim for Phaser.js (https://github.com/littlee/wechat-small-game-phaser) and Phaser.js uses Pixi.js so that is promising.


They system is crazy :dizzy_face:

It shouldn’t be too hard to adapt Haxe engines.

WeChat html5 mini games run in a pure JavaScript environment. There is no HTML or DOM or BOM. WeChat provides a compatibility shim to help you port your browser games. Here is an improved version of the WeChat shim: https://github.com/finscn/weapp-adapter/blob/master/README_EN.md

I’m trying to hack up the OpenFl html5 output to see how far I can get. Not very far yet, heh. Somehow I need to replace:
lime.embed("HelloWorld", "openfl-content", 0, 0, { parameters: {} });

with some code that creates the canvas and starts things up.

If anybody has any experience doing anything like this I’m all ears.


Try passing the canvas element to the second argument, instead of an ID name:

lime.embed ("HelloWorld", canvasElement, 0, 0, {});
1 Like

This is simply fantastic, WeChat mini games.

Thanks! Just needed to hack up a couple things because of the lack of DOM/BOM and it’s kinda working!

The environment supports ES6, but because my game js file is too big (712 KB after -final) it falls back to ES5: “VM169:4 The following JS file is too large (more than 500K) and ES6-to-ES5 and compression processing has been skipped:” (translated from Simplified Chinese)

I guess I have to find some way to split up the file.

What’s the issue with using ES5? Our generated code should be compatible?

Yes Haxe output is ES5 friendly - if there’s an option for that, disable ES6 processing.

Thanks – ES5 is fine and the Haxe output is compatible. My fault – I didn’t understand a particular ES5 capability.

Right now I have a “Hello World” app I’m trying to get running on an Android phone in WeChat. It works flawlessly in the WeChat simulator, but on the phone I just get a black screen. At this point I don’t have a clue. I added some straight canvas code to see if that would draw. I never see the OpenFl drawing, but the straight canvas code I added displays correctly:

  Main.prototype = $extend(openfl_display_Sprite.prototype, {
    init: function (event) {
      this.removeEventListener("addedToStage", $bind(this, this.init));
      console.info("drawing in haxe"); 
      // this works in the simulator, but not on an Android phone:
      var rect = new openfl_display_Sprite();
      rect.get_graphics().drawRect(0, 0, 200, 200);
    , __class__: Main

// main app

exports.lime.embed("HelloWorld", canvas, canvas.width, canvas.height, { parameters: {} });

console.info("drawing in js");
// this works:
// use the canvas global object to see if it will draw anything
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Just to be clear in the console I see:
drawing in haxe
drawing in js

Not sure how to debug this.


Perhaps try the Lime HelloWorld sample, which amounts to a basic fill. That would eliminate issues such as asset loading, but ultimately, a JavaScript debugger is going to be essential, probably, to get information if there is a runtime error

OpenFl uses DOM APIs, and liberally creates canvases for instance - this isn’t possible with straight WeChat runtime: window and document don’t exist! Maybe also OpenFl tries to resize the canvas and this crashes.

Aside from that, from the documentation, creating a canvas normally requires to create it from wx.createCanvas():

As linked before in this thread, a sample Phase.js adapted to WeChat IG can be found here:

It would be good to confirm that it’s working for you, then you will have to look at wrapping OpenFl.
One of the key additions is the weapp-adapter which simulates some key DOM APIs, like document.createElement for some DOM types. Although it’s webpack-compiled, the logic can be followed:

The API seem fairly rich, but everything has to be rendered using the main canvas.

If you’ve done all that, apparently there is a debugger console: