weex环境搭建调试

1、nodeJs下载安装

      双击 node-v6.2.0-x64.msi，开始安装nodejs，默认是安装在C:\Program Files\nodejs下面，一路next完成安装

     官网：https://nodejs.org/en/download/

 

2、安装npm相关环境

    cmd命令

  切换到nodeJs安装目录

    npm install express

    npm install jade

    npm install mysql

 

3、 nodeJs安装成功后，执行下面命令安装Weex命令行程序

      npm install -g weex-toolkit

   安装结束后，通过命令行窗口执行weex命令来检查工具是否安装正确，输入weex回车，至此环境搭载完成。

 

 

4、Weex下载，手机扫码安装

     官网：http://alibaba.github.io/weex/download.html 下载

 

5、创建test.we文件，内容如下：

<template>
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
  </div>
</template>

<style>
  .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>

 

6、cmd打开命令栏，切换到test.we所在的目录，

    输入命令：weex test.we   这样默认的浏览器中就看到了

    输入命令：weex test.we --qr 出现二维码，Weex Playground扫描二维码即可

 

7、现在尝试变更一些 test.we中的内容，在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化， 这个特性常被称为 Hot-Reload。

     （1）再添加两个列表项，weex热加载，Weex Playground中自动更新。

<template>
  <div class="container" >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image> 
       <text class="title">JavaScript</text>
    </div>
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3uo9"></image> 
       <text class="title">java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {width: 200; height: 200; }
  .title {text-align: center ; flex: 1; color: grey; font-size: 50; } 
</style>

 

    （2） 除了自己动手从最基础的标签开始编写, Weex还提供很多内置组件。Slider(滑动器)在移动App和页面中很常见，所以我们提供了一个内置的Slider组件让你能在自己的界面里轻松的添加一个滑动器。打开 test.we，把里面的内容变更如下

<template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>
 
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3uo9"></image> 
       <text class="title">java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center; flex: 1; color: grey; font-size: 50; }
  .slider {
    margin: 18;
    width: 714;
    height: 230;
  }
  .slider-pages {
    flex-direction: row;
    width: 714;
    height: 200;
  }
</style>

<script>
  module.exports = {
    data: {
      intervalValue:"1000",
      isShowIndicators:"true",
      isAutoPlay:"true",
      itemList: [
        {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'},
        {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'},
        {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'}
      ]
    },
    methods: {
      goWeexSite: function () {
        this.$openURL('http://alibaba.github.io/weex/')
      }
    }
}
</script>