A framework for building Mobile cross-platform UI

你可以在alibaba.github.io/weex/index.html找到的官方文档

首先安装’node.js’

然后npm install -g weex-toolkit

如何最快速上手：

weex 提供的 playground 就是你应该去的地方

一个最简单的 weex demo 长这个样子：

<template>
  <container>
    <text>Hello World</text>
  </container>
</template>

下面是计算器的demo

web端手机端均可运行

<template>
  <container style="background-color: #202020; padding-bottom:5;">
    <text class="result" id="result"></text>
    <container style="flex-direction: row">
      <text class="number" onclick="handler" id="1">1</text>
      <text class="number" onclick="handler" id="2">2</text>
      <text class="number" onclick="handler">3</text>
      <text class="operator" onclick="handler">+</text>
    </container>
    <container style="flex-direction: row">
      <text class="number" onclick="handler">4</text>
      <text class="number" onclick="handler">5</text>
      <text class="number" onclick="handler">6</text>
      <text class="operator" onclick="handler">-</text>
    </container>
    <container style="flex-direction: row">
      <text class="number" onclick="handler">7</text>
      <text class="number" onclick="handler">8</text>
      <text class="number" onclick="handler">9</text>
      <text class="operator" onclick="handler">*</text>
    </container>
    <container style="flex-direction: row">
      <text class="number" onclick="handler">0</text>
      <text class="number" onclick="handler">.</text>
      <text class="number" onclick="clear">AC</text>
      <text class="operator" onclick="calculate">=</text>
    </container>
  </container>
</template>

<style>
  .number {
    background-color: #D5D6D8;
    flex: 1;
    text-align: center;
    height: 100;
    padding: 30;
    margin: 5;
  }
  .operator {
    background-color: #F78D2A;
    flex: 1;
    text-align: center;
    height: 100;
    padding: 30;
    margin: 5;
  }
  .result {
    color: #ffffff;
    background-color: #202020;
    text-align: right;
    height: 100;
    padding: 30;
    margin: 5;
  }
</style>

<script>
  module.exports = {
    data: {
      result: ''
    },
    methods: {
      bindResult: function () {
        return this.result;
      },
      handler: function (e) {
        var value = e.target.attr["value"];
        this.result = this.result + value;
      },
      calculate: function(e) {
        var result = eval(this.result);
        this.result = this.result + " = " + result;
      },
      clear: function(e) {
        this.result = "";
      }
    }
  }
</script>

Check out the weex docs for more info on how to get the most out of weex.