初识Weexdemo-Example

了解Weex源码结构，修改example

其实，写一个简单的带有样式的界面还是挺简单的。接下来就是要学习官方给的example示例，看一下官方的目录结构以及示例代码，开发过程中遇到的不明白的问题其实很多都能在官方demo里找到答案。

1. 下载Weex源码

weexGithub
这里可以用 git clone 或者直接download

$ git clone https://github.com/alibaba/weex.git

2.了解源码结构

代码下载完成了，先看一下源码的目录结构。

有几个比较重要的目录和文件：

package.json : node_modules依赖，更重要的是里面包含了npm run xxx 等快捷命令。这里我们可以把它配置化，例如package.json文件中的：

start文件: 启动程序文件，相当于Windows下面的*.bat脚本文件：

#called by native   
THIS_DIR=$(dirname "$0")
pushd "$THIS_DIR"

npm run build:native
npm run build:browser
npm run serve &
npm run dev:examples

popd

其中npm run就是执行package.json中的定义好的脚本别名。

examples: 示例Demo
android/ios/html：各平台代码
build：打包各平台的脚本，配置在package.json中。

3.运行Weex

下面是weex github仓库README.md，按照下面步骤即可跑起来。

Android

Prerequisites
1. Install Node.js 4.0+
2. Under project root
  1. npm install, install project
  2. ./start
3. Install Android Environment
Run playground, In Android Studio
1. Open android/playground
2. In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP
3. Click (Run button)
Add an example

Runtime

On Android Platform , Weex code is executed in weex_v8core which is based on Google V8 JavaScript engine.

iOS

Prerequisites
1. Install Node.js 4.0+
2. Under project root
  1. npm install, install project
  2. ./start
3. Install iOS Environment
4. Install CocoaPods
Run playground
1. cd ios/playground
2. pod install
3. Open WeexDemo.xcworkspace in Xcode
4. Click (Run button) or use default shortcut cmd + r in Xcode
5. If you want to run the demo on your device. In DemoDefine.h(you can search this file by Xcode default shortcut cmd + shift + o), modify CURRENT_IP to your local IP