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

优质

小牛编辑

134浏览

2023-12-01

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

1. 下载Weex源码

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

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

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

2.了解源码结构

代码下载完成了，那么我们看一下源码的目录结构。

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

package.json : node_modules依赖，更重要的是里面包含了npm run xxx 等快捷命令。比如之前我们运行node.js程序是这样的：$ node xx.js。这里我们可以把它配置化，例如package.json文件中的：

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

#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 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