序
- “天下大事酷窥，合久必分，分久必合” 一直以來伴网，前端都是“切圖師”蓬推，僅有“特效師”一脈堪稱翹楚。
- 大家就這樣安安分分過了幾年澡腾，前端一直是js的天地沸伏，直到08年的一天，node.js 橫空出世动分，開始不安分起來毅糟。
- 在大前端的時(shí)代下，一個(gè)合格的開發(fā)者顯然是 js + iOS / Android 刺啦×籼兀可以是一個(gè)熟練的前端學(xué)習(xí)一點(diǎn)native，或者是native程序員會js。
大前端時(shí)代即將來臨蜕青，你準(zhǔn)備好了嗎苟蹈？這節(jié)就讓我們一起學(xué)習(xí)一下weex。
環(huán)境搭建
weex基于后端服務(wù)node.js框架構(gòu)建右核，也就是weex和nodejs都有v8引擎慧脱，里面都可以跑js代碼。至于當(dāng)你用npm管理weex的包的時(shí)候需要nodejs贺喝，是因?yàn)槟莻€(gè)npm是nodejs自帶的,要在nodejs上運(yùn)行菱鸥，也就是說為了安裝weex你需要nodejs。
1.Node.js安裝
- 安裝 Node.js 方式多種多樣躏鱼，最簡單的方式是在 Node.js 官網(wǎng) 下載可執(zhí)行程序直接安裝即可氮采。
- 通常，安裝了 Node.js 環(huán)境染苛，npm 包管理工具也隨之安裝了鹊漠。因此，直接使用 npm 來安裝 weex-toolkit, 你也可以通過 yarn 來進(jìn)行安裝茶行。
下面以Mac OSX環(huán)境安裝為例
1.打開終端（Terminal）輸入以下命令
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安裝不要使用sudo執(zhí)行
$ weex -v // 查看當(dāng)前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
> spawn-sync@1.0.15 postinstall /usr/local/lib/node_modules/weex-toolkit/node_modules/spawn-sync
> node postinstall
+ weex-toolkit@2.0.0-beta.31
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.安裝結(jié)束后你可以直接使用 weex help 命令驗(yàn)證是否安裝成功躯概，它會顯示 weex 支持的所有指令，同時(shí)畔师，你也可以通過 weex doctor 命令檢查你的本地開發(fā)環(huán)境娶靡。
wangguanhua:~ icbc$ weex help
Weex Cli
| Synopsis | Usage |
| ------------------ | --------------------------------------------------------------------- |
| General | $ weex <Command> [Command Parameters] [--command <Options>] |
# General Commands
| Command | Description |
| ----------------------------- | ----------------------------------------------------------------------------------------------------- |
| help <Command> | 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 <Command> | Repair cli dependencies or the core. |
| install <Package> | Install plugin for the Weex Cli. |
| uninstall <Package> | Uninstall plugin for the Weex Cli. |
# Project Development Commands
| Command | Description |
| ------------------------------------- | --------------------------------------------- |
| create <template-name> [project-name] | Create a weex project. |
| debug <file|folder> | Start weex debugger. |
| compile [source] [target] | Compile .we/.vue file. |
| preview [file|folder] | Preview a weex page. |
| platform | Manage ios/android platforms. |
| platform add <Platform> | Add ios/android platform. |
| platform remove <Platform> | Remove ios/android platform. |
| platform list | List ios/android platform. |
| platform update <Platform> | Update ios/android platform. |
| plugin | Manage weex plugins. |
| plugin add <Plugin> | Add weex ios/android/web plugin. |
| plugin remove <Plugin> | Remove weex ios/android/web plugin. |
| plugin install <Platform> | Install plugin for specified platform. |
| plugin create [plugin] | Create a weex plugin template. |
| run <Platform> | Build android/ios application and run. |
| build <Platform> | Build android/ios application for production. |
| lint <file|folder> | 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 <key> <value> | Set key-value. |
| config get <key> | Get value by key. |
| config list [--json] | List key-value as string or json. |
| config delete <key> | 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的基礎(chǔ)開發(fā)環(huán)境以及搭建完畢看锉！
2.初始化weex項(xiàng)目
wangguanhua:weex icbc$weex create weex-project
? Project name weex-project
? Project description A weex project
? Author 王冠華 <wbwanggh01@icbc.com.cn>
? 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 ...
# ========================
> fsevents@1.2.9 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
> core-js@2.6.9 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 -)
> uglifyjs-webpack-plugin@0.4.6 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.運(yùn)行項(xiàng)目
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
> icbc-project@1.0.0 start /Users/icbc/www/weex/icbc-project
> npm run serve
> icbc-project@1.0.0 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.
此時(shí)如果看到圖一所示證明運(yùn)行安裝已經(jīng)完成姿锭。
圖一：運(yùn)行成功
4.編譯和運(yùn)行
默認(rèn)情況下 weex create 命令并不初始化 iOS 和 Android 項(xiàng)目，你可以通過執(zhí)行 weex platform add 來添加特定平臺的項(xiàng)目度陆。
wangguanhua:icbc-project icbc$ weex platform add ios
? Add ios project success
wangguanhua:icbc-project icbc$ weex platform add android
? Add android project success
由于網(wǎng)絡(luò)環(huán)境的不同艾凯，安裝過程可能需要一些時(shí)間，請耐心等待懂傀。如果安裝失敗趾诗，請確保自己的網(wǎng)絡(luò)環(huán)境暢通。
為了能在本地機(jī)器上打開 Android 和 iOS 項(xiàng)目蹬蚁，你應(yīng)該配置好客戶端的開發(fā)環(huán)境恃泪。對于 iOS，你應(yīng)該安裝并且配置好 Xcode犀斋。對于 Android贝乎，你應(yīng)該安裝并且配置好 Android Studio。當(dāng)開發(fā)環(huán)境準(zhǔn)備就緒后叽粹，運(yùn)行下面的命令览效，可以在模擬器或真實(shí)設(shè)備上啟動應(yīng)用：
此時(shí)在platforms目錄下會多兩份文件却舀，android和ios，目錄樹如下锤灿。相信到了這里做android和ios的小伙伴就已經(jīng)很熟悉了挽拔。
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
│ │ │ │ ├── Icon-29@2x-1.png
│ │ │ │ ├── Icon-29@2x.png
│ │ │ │ ├── Icon-29@3x.png
│ │ │ │ ├── Icon-40.png
│ │ │ │ ├── Icon-40@2x-1.png
│ │ │ │ ├── Icon-40@2x.png
│ │ │ │ ├── Icon-40@3x.png
│ │ │ │ ├── Icon-60@2x.png
│ │ │ │ ├── Icon-60@3x.png
│ │ │ │ ├── Icon-76.png
│ │ │ │ ├── Icon-76@2x.png
│ │ │ │ └── Icon-83.5@2x.png
│ │ │ ├── Contents.json
│ │ │ ├── LaunchImage.launchimage
│ │ │ │ ├── Contents.json
│ │ │ │ ├── Default-4.7@2x.png
│ │ │ │ ├── Default-568h@2x-1.png
│ │ │ │ ├── Default-568h@2x.png
│ │ │ │ ├── Default.png
│ │ │ │ ├── Default@2x-1.png
│ │ │ │ ├── Default@2x.png
│ │ │ │ ├── Default@3x-1.png
│ │ │ │ ├── Default@3x.png
│ │ │ │ ├── iPhoneX-landscape.png
│ │ │ │ └── iPhoneX@3x.png
│ │ │ ├── back.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── back.png
│ │ │ │ ├── back@2x.png
│ │ │ │ └── back@3x.png
│ │ │ ├── reload.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── reload.png
│ │ │ │ ├── reload@2x.png
│ │ │ │ └── reload@3x.png
│ │ │ └── scan.imageset
│ │ │ ├── Contents.json
│ │ │ ├── scan.png
│ │ │ ├── scan@2x.png
│ │ │ └── scan@3x.png
│ │ ├── 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
│ └── weex@2x.png
└── platforms.json
5.運(yùn)行WeexDemo項(xiàng)目
這里以iOS為例，切換到用戶目錄但校，運(yùn)行 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.
此時(shí)就可以用Xcode打開WeexDemo.xcworkspace來運(yùn)行程序状囱。
圖二：iOS運(yùn)行效果
此時(shí)亭枷，我們完成了weex項(xiàng)目的基本配置和運(yùn)行。
附錄
官方腳手架全家桶： weex-toolkit 匹表、 weexpack 、 playground 冻晤、 code snippets 鼻弧、 weex-devtool 攘轩。
weex-toolkit： 是用來初始化項(xiàng)目度帮，編譯稿存，運(yùn)行瓣履，debug所有工具袖迎。
weexpack是用來打包JSBundle的，實(shí)際也是對Webpack的封裝悯蝉。
playground是一個(gè)上架的App泉粉，這個(gè)可以用來通過掃碼實(shí)時(shí)在手機(jī)上顯示出實(shí)際的頁面嗡靡。
code snippets這個(gè)是一個(gè)在線的playground讨彼。
weex-devtool 開發(fā)調(diào)試神器
