Weex的原生開發

weex概念與特性

---

最形象的理解就是相似react native。
Weex幾大特色：
1.幫助你構建原生應用
與 Web App、HTML5 App 或 hybrid App 不一樣，您可使用 Weex 構建一個真正的原生應用。更貼心的是你的代碼只需使用 HTML、CSS、JavaScript 能夠構建原生應用，上手很是簡單。但實際上，應用的底層是 Objective-C 或 Java， 同時，Weex 提供不少 native 組件或模塊供開發人員使用。
2.一次編寫，多端運行
Weex 提供強大的跨平臺能力，可使用相同的 API 開發 Web，Android 和 iOS 應用。 同時，咱們對接口了豐富的擴展能力。 這樣，當您須要擴展原生組件或模塊時，這將很是方便。
3.支持 Vue 語法
Weex 遵循 Web 標準，同時支持 vue.js 的語法。所以，您可使用 vue.js 語法來開發應用程序

weexpack

---

weexpack 是新一代的weex應用工程和插件工程開發套件，是基於weex快速搭建應用原型的利器。它可以幫助開發者經過命令行建立weex應用工程和插件工程，快速打包 weex 應用並安裝到手機運行，對於具備分享精神的開發者而言還可以建立weex插件模版併發布插件到weex應用市場。 使用weexpack 可以方便的在在weex工程和native工程中安裝插件。
具體介紹見：https://github.com/weexteam/weex-pack

原生開發之路

---

建立工程

首先，全局安裝weexpack

$ npm install -g weexpack

而後，建立工程

weexpack create weexpack-demo

安裝依賴

cd weexpack-demo && npm install

生成的目錄結構以下：

添加平臺應用模版

*我這裏添加的是Android

$ weexpack platform add android

添加成功後platforms目錄下會多出一個android目錄

調試

這裏的調試咱們能夠經過https://weex.apache.org/cn/guide/tools/toolkit.html的方法來進行調試。
這個調試分兩種：
在瀏覽器上進行網頁調試
經過Playground 在手機上掃描調試
可是這兩種感受Biger不夠，我想要開發原生應用的free-使用真機來調試。

真機開發調試

這裏就須要用到Android Studio了，下載AS，安裝JDK，配置環境變量這是前置步驟。
這裏就再也不贅述這些流程了，我相信你能夠（網上不少教程）。
當前置的步驟所有完成時，咱們就要開始進入大坑了。
1.第一個坑
weex推薦使用weex run android命令來運行起安卓應用，可是很快會報錯No android devices found.

Chrome中開的服務是能夠的

你可能會疑問，我已經經過USB連接了手機爲什麼仍是不行？這個坑通常會耽誤你一天左右時間。

解決方案：使用Android Studio打開咱們的weex應用。

2.第二個坑
使用AS打開應用的時候沒有發現Android應用

解決方案：應該打開weex下的platforms/android。具體能夠看：https://segmentfault.com/q/1010000010652802

選擇安卓文件後，AS須要安裝不少東西，稍等下，通常較長時間。報錯信息只要按照AS的提示進行安裝便可。
等一切完畢後，運行安卓項目。

手機上的效果

模擬器開發調試並自動熱更新

這篇文章Android Studio集成到Genymotion模擬器已經告訴了咱們如何集成模擬器

在咱們的weex項目中運行下面這個命令，將會將native JSbundle替換成新的。

$ weexpack run android

...
:weexplugin:compileDebugShaders
:weexplugin:generateDebugAssets
:weexplugin:mergeDebugAssets
:weexplugin:mergeDebugProguardFiles
:weexplugin:packageDebugRenderscript UP-TO-DATE
:weexplugin:processDebugJavaRes UP-TO-DATE
:weexplugin:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:weexplugin:transformClassesAndResourcesWithSyncLibJarsForDebug UP-TO-DATE
:weexplugin:mergeDebugJniLibFolders UP-TO-DATE
:weexplugin:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:weexplugin:transformNativeLibsWithSyncJniLibsForDebug UP-TO-DATE
:weexplugin:bundleDebug UP-TO-DATE
:weexplugin:compileDebugSources UP-TO-DATE
:weexplugin:assembleDebug UP-TO-DATE
:weexplugin:compileReleaseSources
:weexplugin:assembleRelease
:weexplugin:assemble

BUILD SUCCESSFUL

Total time: 7.404 secs
 => Install app ...
 => Running app ...

這時候在AS中會提示你有代碼須要同步。

點擊同步後，模擬器自動更新。