android weex module扩展 component扩展 学习，调试工具

本人不太会写文档，格式可能不是特别赏心悦目，见谅哈

1.文章内容介绍

 去年我们公司的新项目选择使用weex，这一年多的开发过程中。。。采坑无数，遗憾的是很少有记录（有问题可以留言探讨，看到后能帮忙我会尽量帮）。

如今项目已经成型并且上线，现在项目体量比较大，再添加一些扩展功能，测试起来很繁琐，每次都需要重新编译安装我们已经做完的app，非常浪费时间，影响效率，所以我突然想做一个demo工程，集成好weex，加上扫一扫功能，并把代码公开，这样的话，有需要的朋友就可以下载这个demo功能，在官网上写一些简单的weex测试代码，会自动生成一个二维码，使用这个扫一扫功能，就可以很方便的调试和查看效果。

此demo工程适合安卓开发者和weex 前段开发者，相互配合联调也非常方便。

我打算从以下几点完成此文档。

app如何接入weex

接入weex的步骤

demo工程如何使用

2.app如何接入weex

首先就是创建个安卓工程嘛，默认大家都会。然后是进入一系列相关的sdk。我会一步一步来，所以先引入最基本的sdk。

    compile 'com.android.support:recyclerview-v7:26.1.0'
    compile 'com.android.support:appcompat-v7:26.1.0'
    compile 'com.android.support:support-v4:26.1.0'    

    compile 'com.taobao.android:weex_sdk:0.16.0'
    compile 'com.taobao.android:weex_inspector:0.10.0.5'

 这里注意一下，除了weex的两个包，support的三个包也是必须存在的，不然可能会导致 WXSDKEngine 初始化失败，造成闪退。support包后边的版本号，需要跟自己系统的版本号对应。安卓新建项目应该会导入一个support的appcompat包，后边会有个版本号，全改成这个就行了。

然后就是application，初始化weex的相关配置

public class WXApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // weex
        InitConfig config = (new InitConfig.Builder())
                .setImgAdapter(new WXImageAdapter())
                .setHttpAdapter(new WXHpptAdapter())
                .build();
        WXSDKEngine.initialize(this, config);
    }

}

可以看到，这里有两个类，WXImageAdapter和WXHpptAdapter，这两个类是辅助weex页面加载图片和访问网络的适配器类，代码就不贴了，有兴趣的下载源码自己查看，涉及到网络图片加载和网络请求。现在可以先创建两个类，不实现里边的方法。

写完application不要忘了在Manifest里配置一下。

然后就是官网上的东西了。

创建个LocalActivity，做个测试页。继承借口类 IWXRenderListener ，创建 WXSDKInstance 对象 加载本地weex的js页面。（本地weex压面需要放到 assets 目录下，并且该js页面是使用weex重新编译过的特殊格式）

具体代码下载demo查看。

跑通后查看效果，能正常加载weex页面，并且正常显示，说明weex正常接入了。

///////////////////

其间可能会出现这么个问题

Error:/Users/mac/AndroidStudioProjects/WeexLean/app/src/main/AndroidManifest.xml:13:18-45 Error:
	Attribute application@allowBackup value=(false) from [com.taobao.android:weex_inspector:0.18.10] AndroidManifest.xml:13:18-45
	is also present at [:zxing] AndroidManifest.xml:28:9-35 value=(true).
	Suggestion: add 'tools:replace="android:allowBackup"' to <application> element at AndroidManifest.xml:28:5-49:19 to override.
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : Attribute application@allowBackup value=(false) from [com.taobao.android:weex_inspector:0.18.10] AndroidManifest.xml:13:18-45
  	is also present at [:zxing] AndroidManifest.xml:28:9-35 value=(true).
  	Suggestion: add 'tools:replace="android:allowBackup"' to <application> element at AndroidManifest.xml:28:5-49:19 to override.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s

 让我们在manifest中加入 tools:replace="android:allowBackup，照做

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mac.weexlean"
    xmlns:tools="http://schemas.android.com/tools"
    >
.
.
.
<application
        tools:replace="android:allowBackup"
        android:name=".WXApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        >

 然后又会出现个问题

Error:/Users/mac/AndroidStudioProjects/WeexLean/app/src/main/AndroidManifest.xml:28:5-49:19 Error:
	tools:replace specified at line:28 for attribute android:allowBackup, but no new value specified
/Users/mac/AndroidStudioProjects/WeexLean/app/src/main/AndroidManifest.xml Error:
	Validation failed, exiting
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed with multiple errors, see logs

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s

 哎~各种坑，我们没有加 allowBackup ，加上再试试

<application
        tools:replace="android:icon,android:label,android:allowBackup"
        android:allowBackup="false"
        android:name=".WXApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        >

 ok，终于跑通了。。

3.图片库和网络库接入，并完成 WXImageAdapter 和 WXHpptAdapter。

这里图片库选择 Glide，网络库选择 okhttp3

    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.squareup.okhttp3:okhttp:3.7.0'
    compile 'com.squareup.okio:okio:1.12.0'

创建个TestActivity，做个测试页，先保证两个库正常接入并且可以正常使用。

然后完成WXImageAdapter 和 WXHpptAdapter。参考playground，具体代码下载demo查看。

4.接入zxing，实现扫一扫功能

zxing是google提供的二维码扫描插件，我这里选择源码依赖，并且对zxing进行了优化，删除了与扫描二维码无关的其他类，增加了竖屏显示，处理了变形问题，增加了识别率。网上都有，方法很多，我只是整理了一下，就不具体说了。具体代码下载demo查看。

5.处理扫描结果

我这边是startActivityForResult,所以在result中处理了一下结果，就是为了吧zxing和主工程分隔开，方便大家单独使用。

处理 onActivityResult 吧扫描结果传递给WeexActivity，weexActivity展示即可。

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data)
    {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode==1001 && resultCode== Activity.RESULT_OK)
        {
            String result=data.getStringExtra(CaptureActivity.KEY_DATA);
            Intent intent = new Intent(MainActivity.this,WeexActivity.class);
            intent.putExtra("weexUrl",result);
            startActivity(intent);
        }
    }

 WeexActivity部分代码

 @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        createWeexInstance();
        mInstance.onActivityCreate();
        mUrl = getIntent().getStringExtra("weexUrl");

        mInstance.renderByUrl(
                getPageName(),
                mUrl,
                null,
                null,
                -1,
                -1,
                WXRenderStrategy.APPEND_ASYNC
        );
//        renderPageByURL(mUrl);
    }

运行项目，点击扫描二维码，查看结果（weex页面第一次加载会比较慢，别着急） 

 

代码下载地址

发现下载代码需要5积分，所以加个github地址吧

https://github.com/ligaozeng/WeexLean