2022 Weex 工程搭建流程

---

前言

随着移动跨平台技术的不断更新发展，weex也渐渐被性能更好的uni-app和flutter所替代

---

一、目的

由于公司项目是基于weex搭建的，之前也做过这方面的开发，但是一段时间没做之后忘记的差不多了，这篇文章主要是讲述如何基于最新的Android Studio 2021.1.1大黄蜂版本构建weex的原始工程，当然现在已经有很多优秀的weex框架可以代替原始的工程，如基于weex并一直在维护的: eeui 框架，编写文章的目的是从官方原始工程的角度去理解weex是如何实现的

二、如何创建

1. 工程创建

本文是基于VsCode创建的，官方的脚手架工具 Weex Studio 由于没有一直被维护，所以很拉跨，建议还是从VsCode着手。

1. 首先你得安装Vscode,然后在商店搜索vscode-weex插件，这些步骤我也是参考官网的 链接 （第一次创建项目可能会不成功 多试试！！！）
2. 假设你已经跟着上述官网描述搭建好框架之后，确保没问题在vscode 通过CTRL + SHIFT + P 执行 weex doctor 检查一下有没有缺东西
3. 然后创建weex的launch.json文件，这个文件主要配置启动Android调试所需要的信息，在左侧列表选择运行和调试（CTRL + SHIFT + D）然后点击创建launch.json文件，然后选择Weex Debug: Launch android，如图：
   
   

---

创建过程中的问题

接下来就是解决weex原始工程在高版本Android Studio 不兼容问题

1. 使用Android Studio 打开weex的Android 工程，当工程打开完毕会报如下错误：
   
   这是因为构建工程的grad了 插件默认是2.14.1，而我们现在用的是比这高的版本，还有一个就是Android Studio现在默认使用Jdk 11

配置步骤

1. 添加阿里镜像，不然Google的下载依赖很慢
2. 然后修改gradle 插件版本为3.4.0

maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
maven { url 'https://maven.aliyun.com/repository/central' }
maven { url 'https://maven.aliyun.com/repository/google' }

添加后结构如下：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' }//jcenter
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }//gradle-plugin
        maven { url 'https://maven.aliyun.com/repository/central' }//central
        maven { url 'https://maven.aliyun.com/repository/google' }//google
        mavenLocal()
        jcenter()
        mavenCentral()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        //这里将2.2.2修改为3.4.0
        classpath 'com.android.tools.build:gradle:2.2.2'
        classpath 'com.taobao.android:weexplugin-gradle-plugin:1.3'
    }
}

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' }//jcenter
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }//gradle-plugin
        maven { url 'https://maven.aliyun.com/repository/central' }//central
        maven { url 'https://maven.aliyun.com/repository/google' }//google
        mavenLocal()
        jcenter()
        mavenCentral()
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

subprojects {
    ext {
        compileSdkVersion=26
        buildToolsVersion="26.0.0"
        minSdkVersion=14
        appMinSdkVersion=15
        targetSdkVersion=26
        supportLibVersion="26.1.0"
        fastjsonLibVersion="1.1.46.android"
    }
}

3. Android 插件 3.0.0 引入了一些移除特定功能的 API 变更，output.outputFile变成了只读属性，不能再往里面写东西了，所以我们要修改，将variant.outputs.each 改variant.outputs.all
   然后output.outputFile = new File(parent,fileName);改为outputFileName = fileName
   修改前：
   
   修改后：

applicationVariants.all { variant ->
        variant.outputs.all { output ->
            def outputFile = output.outputFile
            if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
                def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
                outputFileName = fileName
            }
        }
    }

4. 修改gradle版本和jdk
   在Android studio 工具栏 File->Project Structure…将Gradle Version版本修改为5.1.1，Gradle Plugin Version不用管我们之前已经改过了
   
   然后修改jdk版本为1.8
   
   然后点击apply,然后等待Android Studio构建完毕，构建时间看网络情况变化决定
   构建完成后会有如下错误，不用慌
   
   点击右侧列表的Gradle,选择assembleDeug进行汇编调试
   
   此时会报如下错误
   
   在错误信息中已经告知我们原因并提示如何修改，错误信息：注释处理器现在必须显式声明。发现编译类路径的以下依赖项包含注释处理器。请将它们添加到 annotationProcessor 配置中，在查阅资料后添加如下代码

javaCompileOptions {
            annotationProcessorOptions {
                includeCompileClasspath = true
            }
        }

在module的defaultConfig 下添加，如图：

然后点击 右上角的Sync Now 编译，编译完成后再此执行assembleDebug此时Android Studio端错误已经完美解决

Weex js页面跳转问题

由于weex官网在跳转说明的很模糊，Android端的跳转方案，官方文档并没有详细说明，对于新人来说，根本就无从下手，我也是踩坑过来的，感兴趣可以阅读源码。

1. 首先在WXPageActivity添加以下intent-filter

<activity
            android:name="com.weex.app.WXPageActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait">
<!--            添加以下intent-filter-->
            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="com.taobao.android.intent.category.WEEX"/>
                <category android:name="android.intent.category.BROWSABLE"/>
<!--                这几个根据需要可选-->
                <data android:scheme="http"/>
                <data android:scheme="https"/>
                <data android:scheme="file"/>
                <data android:scheme="wxpage" />
                <data android:scheme="local" />
            </intent-filter>
        </activity>

将WXPageActivity中的代码

        if (mUri == null) {
            mUri = Uri.parse(AppConfig.getLaunchUrl());
        }

修改为：

        if (mUri == null) {
            if (uri.toString().startsWith("file:")) {
                mUri = uri;
            } else {
                mUri = Uri.parse(AppConfig.getLaunchUrl());
            }
        }

这样就可以在test.vue进行页面跳转了

 
    register(event) {
      navigator.push(
        {
          url: 'file://assets/Register.js',
          animated: 'true'
        },
        event => {
          modal.toast({
            message: 'callback:' + event
          })
        }
      )
    }

解决Android 7.0 以上，使用以上方案Weex页面无法成功跳转的问题

因为从Android 7.0开始，一个应用提供自身文件给其他应用使用时，如果给出一个file://格式的URI的话，应用会抛出FileUriExposedException异常，这是由于Google认为目标App可能不具有文件权限，会造成潜在的问题，所以让这一行为快速失败。解决方案，只需在Android端代码WXApplication文件的onCreate()方法中加上如下代码即可

    //Android 5.0 6.0不会出现问题，但是
    //Android 7.0以上，使用file:///会失败，通过这个判断去掉限制。
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
      StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
      StrictMode.setVmPolicy(builder.build());
    }

参考文章有以下：
链接

总结

希望这篇文章对大家有帮助.