序
- “天下大事，合久必分，分久必合” 一直以来，前端都是“切图师”，仅有“特效师”一脉堪称翘楚。
- 大家就这样安安分分过了几年，前端一直是js的天地，直到08年的一天，node.js 横空出世，开始不安分起来。
- 在大前端的时代下，一个合格的开发者显然是 js + iOS / Android 。可以是一个熟练的前端学习一点native，或者是native程序员会js。
大前端时代即将来临，你准备好了吗？这节就让我们一起学习一下weex。
环境搭建
weex基于后端服务node.js框架构建，也就是weex和nodejs都有v8引擎，里面都可以跑js代码。至于当你用npm管理weex的包的时候需要nodejs，是因为那个npm是nodejs自带的,要在nodejs上运行，也就是说为了安装weex你需要nodejs。
1.Node.js安装
- 安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。
- 通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit, 你也可以通过 yarn 来进行安装。
下面以Mac OSX环境安装为例
1.打开终端（Terminal）输入以下命令
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装不要使用sudo执行
$ weex -v // 查看当前weex工具版本
wangguanhua:~ icbc$ sudo chmod -R 777 /usr/local/lib/node_modules/
Password:
wangguanhua:~ icbc$ npm i -g weex-toolkit
/usr/local/bin/weex -> /usr/local/lib/node_modules/weex-toolkit/bin/weex.js
> [email protected] postinstall /usr/local/lib/node_modules/weex-toolkit/node_modules/spawn-sync
> node postinstall
+ [email protected]
added 381 packages from 240 contributors in 30.485s
wangguanhua:~ icbc$ weex -v
2.0.0-beta.31 (Core 2.0.0-beta.31)
2.安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所有指令，同时，你也可以通过 weex doctor 命令检查你的本地开发环境。
wangguanhua:~ icbc$ weex help
Weex Cli
| Synopsis | Usage |
| ------------------ | --------------------------------------------------------------------- |
| General | $ weex [Command Parameters] [--command ] |
# General Commands
| Command | Description |
| ----------------------------- | ----------------------------------------------------------------------------------------------------- |
| help | Shows additional information about the commands in the terminal. |
| doctor | Checks your system for configuration problems which might prevent the Weex CLI from working properly. |
| repair | Repair cli dependencies or the core. |
| install | Install plugin for the Weex Cli. |
| uninstall | Uninstall plugin for the Weex Cli. |
# Project Development Commands
| Command | Description |
| ------------------------------------- | --------------------------------------------- |
| create [project-name] | Create a weex project. |
| debug | Start weex debugger. |
| compile [source] [target] | Compile .we/.vue file. |
| preview [file|folder] | Preview a weex page. |
| platform | Manage ios/android platforms. |
| platform add | Add ios/android platform. |
| platform remove | Remove ios/android platform. |
| platform list | List ios/android platform. |
| platform update | Update ios/android platform. |
| plugin | Manage weex plugins. |
| plugin add | Add weex ios/android/web plugin. |
| plugin remove | Remove weex ios/android/web plugin. |
| plugin install | Install plugin for specified platform. |
| plugin create [plugin] | Create a weex plugin template. |
| run | Build android/ios application and run. |
| build | Build android/ios application for production. |
| lint | Lint codes and generate code report. |
# Device Commands
| Command | Description |
| ----------------- | ----------------------------------------------------------- |
| device run | Choose one simulator to run. |
| device list | Lists all recognized connected physical or virtual devices. |
# Configuration Commands
| Command | Description |
| ------------------------ | --------------------------------- |
| config | Configure Weex Toolkit settings. |
| config set | Set key-value. |
| config get | Get value by key. |
| config list [--json] | List key-value as string or json. |
| config delete | Delete key-value by key. |
# Third Part Commands
| Command | Description |
| ----------------- | --------------------- |
# Global Options
| Option | Description |
| ---------------- | ------------------------------------------------------ |
| --help, -h | Prints help about the selected command in the console. |
| --version | Prints the client version.
至此，weex的基础开发环境以及搭建完毕！
2.初始化weex项目
wangguanhua:weex icbc$weex create weex-project
? Project name weex-project
? Project description A weex project
? Author 王冠华
? Select weex web render latest
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets)
stage-0
? Use vue-router to manage your view router? (not recommended) No
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Set up unit tests No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
# Installing project dependencies ...
# ========================
> [email protected] install /Users/jqli/www/weex/weex-project/node_modules/fsevents
> node install
node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/jqli/www/weex/weex-project/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
> [email protected] postinstall /Users/jqli/www/weex/weex-project/node_modules/core-js
> node scripts/postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> [email protected] postinstall /Users/jqli/www/weex/weex-project/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
added 1340 packages from 714 contributors and audited 13070 packages in 94.903s
found 10 vulnerabilities (5 moderate, 5 high)
run `npm audit fix` to fix them, or `npm audit` for details
Success! Created weex-project at /Users/jqli/www/weex/weex-project
Inside that directory, you can run several commands:
npm start
Starts the development server for you to preview your weex page on browser
You can also scan the QR code using weex playground to preview weex page on native
npm run dev
Open the code compilation task in watch mode
npm run ios
(Mac only, requires Xcode)
Starts the development server and loads your app in an iOS simulator
npm run android
(Requires Android build tools)
Starts the development server and loads your app on a connected Android device or emulator
npm run pack:ios
(Mac only, requires Xcode)
Packaging ios project into ipa package
npm run pack:android
(Requires Android build tools)
Packaging android project into apk package
npm run pack:web
Packaging html5 project into `web/build` folder
npm run test
Starts the test runner
To get started:
cd weex-project
npm start
Enjoy your hacking time!
3.运行项目
wangguanhua:weex icbc$ cd icbc-project/
wangguanhua:icbc-project icbc$ ls
README.md package-lock.json test
android.config.json package.json web
configs platforms webpack.config.js
ios.config.json plugins
node_modules src
wangguanhua:icbc-project icbc$ npm start
> [email protected] start /Users/icbc/www/weex/icbc-project
> npm run serve
> [email protected] serve /Users/icbc/www/weex/icbc-project
> webpack-dev-server --env.NODE_ENV=development --progress
95% emitting s
DONE Compiled successfully in 26585ms 10:38:51 AM
I Your application is running here: http://192.168.100.225:8081.
此时如果看到图一所示证明运行安装已经完成。
图一：运行成功
4.编译和运行
默认情况下 weex create 命令并不初始化 iOS 和 Android 项目，你可以通过执行 weex platform add 来添加特定平台的项目。
wangguanhua:icbc-project icbc$ weex platform add ios
✔ Add ios project success
wangguanhua:icbc-project icbc$ weex platform add android
✔ Add android project success
由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。
为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 Xcode。对于 Android，你应该安装并且配置好 Android Studio。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用：
此时在platforms目录下会多两份文件，android和ios，目录树如下。相信到了这里做android和ios的小伙伴就已经很熟悉了。
wangguanhua:icbc-project icbc$ tree platforms/
platforms/
├── android
│ ├── LICENSE
│ ├── NOTICE
│ ├── README.md
│ ├── app
│ │ ├── build.gradle
│ │ ├── proguard-rules.pro
│ │ ├── src
│ │ │ └── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── assets
│ │ │ │ └── index.js
│ │ │ ├── java
│ │ │ │ └── com
│ │ │ │ └── weex
│ │ │ │ └── app
│ │ │ │ ├── AbsWeexActivity.java
│ │ │ │ ├── SplashActivity.java
│ │ │ │ ├── WXApplication.java
│ │ │ │ ├── WXPageActivity.java
│ │ │ │ ├── extend
│ │ │ │ │ ├── BlurTool.java
│ │ │ │ │ ├── BlurTransformation.java
│ │ │ │ │ ├── ImageAdapter.java
│ │ │ │ │ └── WXEventModule.java
│ │ │ │ ├── hotreload
│ │ │ │ │ └── HotReloadManager.java
│ │ │ │ └── util
│ │ │ │ ├── AppConfig.java
│ │ │ │ ├── AppConfigXmlParser.java
│ │ │ │ ├── AppPreferences.java
│ │ │ │ ├── CommonUtils.java
│ │ │ │ └── Constants.java
│ │ │ └── res
│ │ │ ├── drawable-hdpi
│ │ │ │ ├── ic_action_refresh.png
│ │ │ │ └── ic_action_scan.png
│ │ │ ├── drawable-mdpi
│ │ │ │ ├── ic_action_refresh.png
│ │ │ │ └── ic_action_scan.png
│ │ │ ├── drawable-xhdpi
│ │ │ │ ├── ic_action_refresh.png
│ │ │ │ └── ic_action_scan.png
│ │ │ ├── drawable-xxhdpi
│ │ │ │ ├── ic_action_refresh.png
│ │ │ │ └── ic_action_scan.png
│ │ │ ├── layout
│ │ │ │ ├── activity_splash.xml
│ │ │ │ └── activity_wxpage.xml
│ │ │ ├── menu
│ │ │ │ ├── main.xml
│ │ │ │ └── main_scan.xml
│ │ │ ├── mipmap-xxxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── values
│ │ │ │ ├── attrs.xml
│ │ │ │ ├── colors.xml
│ │ │ │ ├── dimens.xml
│ │ │ │ ├── drawables.xml
│ │ │ │ ├── strings.xml
│ │ │ │ ├── styles.xml
│ │ │ │ └── themes.xml
│ │ │ ├── values-v21
│ │ │ │ └── styles.xml
│ │ │ ├── values-w820dp
│ │ │ │ └── dimens.xml
│ │ │ ├── values-zh-rCN
│ │ │ │ └── strings.xml
│ │ │ └── xml
│ │ │ └── app_config.xml
│ │ └── tools
│ │ └── debug.keystore
│ ├── build.gradle
│ ├── codeStyleSettings.xml
│ ├── gradle
│ │ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ └── settings.gradle
├── ios
│ ├── LICENSE
│ ├── Podfile
│ ├── Podfile.lock
│ ├── README.md
│ ├── WeexDemo
│ │ ├── AppDelegate.h
│ │ ├── AppDelegate.m
│ │ ├── Assets.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── Icon-29.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── Icon-40.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── Icon-76.png
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── Contents.json
│ │ │ ├── LaunchImage.launchimage
│ │ │ │ ├── Contents.json
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── Default.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iPhoneX-landscape.png
│ │ │ │ └── [email protected]
│ │ │ ├── back.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── back.png
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── reload.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── reload.png
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── scan.imageset
│ │ │ ├── Contents.json
│ │ │ ├── scan.png
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── DemoDefine.h
│ │ ├── Images.xcassets
│ │ │ └── Brand\ Assets.launchimage
│ │ │ └── Contents.json
│ │ ├── WeexConfig
│ │ │ ├── WXImgLoaderDefaultImpl.h
│ │ │ ├── WXImgLoaderDefaultImpl.m
│ │ │ ├── WeexSDKManager.h
│ │ │ └── WeexSDKManager.m
│ │ ├── WeexDemo-Info.plist
│ │ ├── WeexScanner
│ │ │ ├── UIViewController+WXDemoNaviBar.h
│ │ │ ├── UIViewController+WXDemoNaviBar.m
│ │ │ ├── WXDemoViewController.h
│ │ │ └── WXDemoViewController.m
│ │ ├── config.xml
│ │ ├── main.m
│ │ └── weex-icon.png
│ ├── WeexDemo.xcodeproj
│ │ ├── project.pbxproj
│ │ ├── project.xcworkspace
│ │ │ ├── contents.xcworkspacedata
│ │ │ └── xcuserdata
│ │ │ └── kw.xcuserdatad
│ │ │ └── UserInterfaceState.xcuserstate
│ │ ├── xcshareddata
│ │ │ └── xcschemes
│ │ │ ├── WeexDemo.xcscheme
│ │ │ └── WeexUITestDemo.xcscheme
│ │ └── xcuserdata
│ │ └── kw.xcuserdatad
│ │ └── xcschemes
│ │ └── xcschememanagement.plist
│ ├── WeexDemo.xcworkspace
│ │ ├── contents.xcworkspacedata
│ │ └── xcuserdata
│ │ ├── kw.xcuserdatad
│ │ │ └── UserInterfaceState.xcuserstate
│ │ └── zifan.xcuserdatad
│ │ └── UserInterfaceState.xcuserstate
│ ├── WeexDemoTests
│ │ ├── Info.plist
│ │ └── WeexDemoTests.m
│ ├── WeexUITestDemo-Info.plist
│ ├── WeexUITestDemoUITests
│ │ ├── Info.plist
│ │ └── WeexUITestDemoUITests.m
│ ├── bundlejs
│ │ └── index.js
│ ├── weex.png
│ └── [email protected]
└── platforms.json
5.运行WeexDemo项目
这里以iOS为例，切换到用户目录，运行 pod install 命令安装依赖。
wangguanhua:icbc-project icbc$ cd /Users/icbc/www/weex/icbc-project/platforms/ios
wangguanhua:ios icbc$ pod install
Analyzing dependencies
Downloading dependencies
Installing SDWebImage (3.7.5)
Installing SocketRocket (0.4.2)
Installing WeexPluginLoader (0.0.1.9.1)
Installing WeexSDK (0.26.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 4 dependencies from the Podfile and 4 total pods installed.
此时就可以用Xcode打开WeexDemo.xcworkspace来运行程序。
图二：iOS运行效果
此时，我们完成了weex项目的基本配置和运行。
附录
官方脚手架全家桶： weex-toolkit 、 weexpack 、 playground 、 code snippets 、 weex-devtool 。
weex-toolkit： 是用来初始化项目，编译，运行，debug所有工具。
weexpack是用来打包JSBundle的，实际也是对Webpack的封装。
playground是一个上架的App，这个可以用来通过扫码实时在手机上显示出实际的页面。
code snippets这个是一个在线的playground。
weex-devtool 开发调试神器