跨平台方案：Weex使用小记

还记得刚接触ReactNative时有多激动，此前还没想过能有这么强大的框架，后来对看多了混合开发的资料发现这真的已经成了不许要学会的一个技能，于是招收学习起了React，效果不尽人意，可能是先接触了Vue，已经习惯了它的开发方式，对React总是用不习惯，有些知识点甚至不能掌握更别提做出格完整的项目了，于是就我而言React是没有Vue好用的，之前也在网上找过Vue有没有类似Native的框架，了解了NativeScript发现国内用的人比较少，文档都是全英文（虽并无大碍）但坑太多我自己安装起来也比较吃力，于是有放弃了对VueNative的探索，继续学习RN～～～还算入门了，但就是不习惯啊，偶然想到另一门技术Weex，之前看到过但并不知道它是基于Vue的跨平台框架于是没去学习，了解后发现它原来是阿里开发的，它原来是基于Vue的，虽然用的人还不多，但他原来有那么全的中文文档～～～卧槽。。。。

用所有的东西都是有坑的，但我坚信对我而言国内人开发的东西会极大的亲近我们，于是开始了搭建环境、学习的旅程。

环境搭建

相比NativeScript，Weex简直是水到渠成，web端一下子就能运行起来，而且代码是那么的熟悉，Vue在心中已有一席之地，想想以后的混合开发会是如此的畅快！

安装脚手架

npm install weex-toolkit -g

创建项目

weex create awesome-app

运行项目

cd awesome-app
npm install
npm start

Weex

android端运行

添加特定平台的项目

weex platform add ios
weex platform add android

官网都说了：

由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。

所以昨晚在这一步发生的错误应该就是网络的原因，今天早上网络流畅点就好了

在本地机器上打开 Android 和 iOS 项目

weex run ios
weex run android
weex run web

下面是运行中遇到的一些问题：

studio3.0对其的不兼容

坑都在这里了，我想这些坑原因应该都来自于Android Studio 3.0新版特性

无法下载到版本所对应的gradle

Error: Error: Command failed: ./gradlew assembleDebug
Exception in thread “main” javax.net.ssl.SSLException: Connection has been shutdown: javax.net.ssl.SSLException: SSL peer shut down incorrectly

原因：
由于网络被墙，无法下载到版本所对应的gradle。

解决：
将app/platforms/android/gradle/wrapper下的distributionUrl改为本地对应的版本号

distributionUrl

Gradle自定义apk名称报错

Cannot set the value of read-only property ‘outputFile’ for ApkVariantOutputImpl_Decorated{apkData=Main{type=MAIN, fullName=debug, filters=[]}} of type com.android.build.gradle.internal.api.ApkVariantOutputImpl.

AS 3.0之前自定义apk名称：

applicationVariants.all { variant ->
    variant.outputs.each { output ->
    def fileName = "${variant.versionName}_release.apk"
    def outFile = output.outputFile
    if (outFile != null && outFile.name.endsWith('.apk')) {
        output.outputFile =newFile(outFile.parent, fileName)
    }  
}

修改为：

applicationVariants.all { variant ->
    variant.outputs.all { output ->  // each 改为 all
    def fileName = "${variant.versionName}_release.apk"
    def outFile = output.outputFile
    if (outFile != null && outFile.name.endsWith('.apk')) {
        outputFileName = fileName  //  output.outputFile 改为 outputFileName 
    }    
}

把each修改为all，然后通过outputFileName修改生成apk的名称。此外，AS 3.0后打包完，除了apk包文件，还会多一个 output.json 参数文件。

/awesome-app/platforms/android/app

学习！

下面就开始各种使用它了！