Getting Started with Weex: Build Your First Cross-Platform Mobile UI

What is Weex?

Weex is a framework for building mobile cross‑platform UI, created by Alibaba.

Where to get Weex?

The source code can be found on GitHub at https://github.com/Laisly/weex; you can also view examples without downloading.

How to get it running?

Step 1: Install the Android development environment. Download the Android SDK from http://alibaba.github.io/weex/download.html (QR code shown).

Step 2: Install weex‑toolkit globally. npm install -g weex-toolkit Step 3: Create a file, e.g., hello.we, with the following content:

<template>
  <div>
    <text style="font-size:100px;">Hello World.</text>
    <list>
      <cell repeat="{{items}}">
        <text class="item">{{title}} ---- {{id}}</text>
      </cell>
    </list>
  </div>
</template>

<style>
.item {
  font-size: 34px;
  height: 100px;
}
</style>

<script>
module.exports = {
  data: {
    items: [
      {id: 1, title: 'Title Start'},
      {id: 2, title: 'Title Title'},
      {id: 3, title: 'Title Title'},
      {id: 4, title: 'Title Title'},
      {id: 5, title: 'Title Title'},
      {id: 6, title: 'Title Title'},
      {id: 7, title: 'Title Title'},
      {id: 8, title: 'Title Title'},
      {id: 9, title: 'Title Title'},
      {id: 10, title: 'Title Title'},
      {id: 11, title: 'Title Title'},
      {id: 12, title: 'Title Title'},
      {id: 13, title: 'Title Title'},
      {id: 14, title: 'Title Title'},
      {id: 15, title: 'Title End'}
    ]
  }
}
</script>

Run the example from the command line (maximise the terminal): weex hello.we Open the Weex Playground app and scan the QR code. Two outcomes are possible:

Success – the app runs (QR code shown).

Error – if you see an error, edit response-stream.js at line 88 in the union library to add the following code:

if (method === 'setHeader') {
    arguments[1] = encodeURIComponent(arguments[1]);
}

Additional tips:

Avoid calling require('./weex-ui'); as it slows down execution.

The automatic refresh feature is convenient.

Weex is reportedly a KPI product; its future development is uncertain.

Performance on Android is smooth.

Weex is similar to Vue or Riot in many ways.