Run vanilla JavaScript hello world in Weex

Just some initial steps I figured out about Weex runtime. Since Weex is based on Vue itself, the docs is still in progress, I have to figure out some of the details by myself.

In this post I'm going to run a basic demo without Vue. So this is not a Weex guide...


You need somethings:

This playground is like a web browser.


I digged into the code:

const globalObjects = Object.assign({
  define: bundleDefine,
  require: bundleRequire,
  bootstrap: bundleBootstrap,
  register: bundleRegister,
  render: bundleRender,
  __weex_define__: bundleDefine, // alias for define
  __weex_bootstrap__: bundleBootstrap, // alias for bootstrap
  __weex_document__: bundleDocument,
  __weex_require__: bundleRequireModule,
  __weex_viewmodel__: bundleVm,
  weex: weexGlobalObject
}, timerAPIs, services)

I think it's not useful enough. But here are the gobals. Internally Weex is doing bundling itself so these are the APIs. More details on bundling can be found at:


I tried a bit but luckily I found an example on about to run vanilla js in Weex.

var body = document.createElement('div', {
  classStyle: { alignItems: 'center', marginTop: 120 }

var text = document.createElement('text', {
  attr: { value: 'Hello World' },
  classStyle: { fontSize: 48 }


finishCreate event

In the demo of Vanilla js, there's one more line of code to send events to notify that rendering is finished and it's ok to remove the loading icon. It looks like this:

sendTasks(id, [{ module: 'dom', method: 'createFinish', args: []}])

In the code, id is refering to, but anyway there are two undefined functions. There are from the framework provided by Weex platform. It's written in Chinese does but not yet translated.

At the top of the file there's a comment line. Actually it's useful in telling the framework. It could be Vue, here it's Vanilla:

// { "framework": "Vanilla" }

Run the demo

Save file > Generate QR code from URL to the file > Scan in Weex!

The words now shows on screen. I use console.log to debug at first. I can find logs with:

adb logcat | grep jsengine

Weex comes with a debugger similar to React Native. Here we need to install weex-devtool from npm and run it:


Follow the guides to open the debugger. I found the logs in Console. Good, it's working with things I'm familiar with.

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

No Comments Yet