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中会提示你有代码须要同步。

点击同步后，模拟器自动更新。