第2篇 了解Weex源码结构,修改example

其实,前面一节,我们发现,写一个简单的带有样式的界面还是挺简单的。这一节,我们不学习如何去了解一个工程,我们去学习了解官方的github代码库。一方面,可以让大家体验修改Demo的乐趣,同时可以大家可以直观的了解一个开源代码库的结构。

1. 下载Weex源码

首先,你得安装了git。至于如何安装git,可以google/baidu了。Mac OSX的同学可以使用brew命令安装。如果没有brew,请先安装homebrew。
这里,就当作大家git 命令和基础知识已经准备妥当。

打开:https://github.com/alibaba/weex 网站,就可以看到weex的源码。我们使用git克隆代码到本地:

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

2.了解源码结构

代码下载完成了,那么我们看一下源码的目录结构。
2. 了解Weex源码结构,修改example - 图1

这里说几个比较重要的目录和文件:

  • package.json : node_modules依赖,更重要的是里面包含了npm run xxx 等快捷命令。比如之前我们运行node.js程序是这样的:$ node xx.js。这里我们可以把它配置化,例如package.json文件中的:
    2. 了解Weex源码结构,修改example - 图2

  • start文件: 启动程序文件,里面包换编译和启动脚本:

    1. #called by native
    2. THIS_DIR=$(dirname "$0")
    3. pushd "$THIS_DIR"
    4. npm run build:native
    5. npm run build:browser
    6. npm run serve &
    7. npm run dev:examples
    8. popd

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

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

3.跑起程序

以下摘录weex github仓库README.md,按照下面步骤即可跑起来。

Android

  1. Prerequisites
    1. Install Node.js 4.0+
    2. Under project root
      1. npm install, install project
      2. ./start
    3. Install Android Environment
  2. 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 2. 了解Weex源码结构,修改example - 图3 (Run button)
  3. Add an example

Runtime

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

iOS

  1. 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
  2. Run playground
    1. cd ios/playground
    2. pod install
    3. Open WeexDemo.xcworkspace in Xcode
    4. Click 2. 了解Weex源码结构,修改example - 图4 (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

运行的结果,如下图:
2. 了解Weex源码结构,修改example - 图5
但是,我们也希望在浏览器中看到效果,那么输入如下网站也可:

  1. http://127.0.0.1:12580

4.修改example

2. 了解Weex源码结构,修改example - 图6
其中index.we是入口文件。因此可以在example中增加一个文件。然后在index.we中增加一个name和title。
2. 了解Weex源码结构,修改example - 图7

点击模拟器刷新按钮即可查看效果。

5.如何学习

到这里基本上已经可以修改个钟demo,查看各种效果。当不了解一个组件和api如何使用时,查阅官方文档和阅读Demo就显得尤为重要。