weex源码解析（四）- android引入sdk

上一章，我们简单说明了下js文件的生成。那本篇文章，会先简单使用下这个sdk，将上一章生成的js文件，进行加载，以便页面展示手机端上。

Android客户端引入weex sdk

关于Android 端引入weex 的 sdk，大家可以直接看下官网的做法，就可以了。集成 Weex 到已有应用，我们这里就只讲build gradle的引入方式，简单来说可以分为以下几个步骤：

build.gradle里引入sdk

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.18.0@aar'

注:版本可以高不可以低。 weex_sdk最新版本可以在这里看

代码实现

注:附录中有完整代码地址

实现图片下载接口，初始化时设置。

package com.example.linshaoyou.weexapp;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

/**
 * Created by linshaoyou on 18/4/5.
 */
public class ImageAdapter implements IWXImgLoaderAdapter {


    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        //实现你自己的图片下载，否则图片无法显示。这里不一定要用glide，可以使用其他任意的图片加载框架
        Glide.with(WXApplication.mInstance).load(url).into(view);
    }
}

初始化

package com.example.linshaoyou.weexapp;

import android.app.Application;

import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;

/**
 * Created by linshaoyou on 18/4/4.
 *
 * 注意要在Manifest中设置android:name=".WXApplication"
 * 要实现ImageAdapter 否则图片不能下载
 * gradle 中一定要添加一些依赖，否则初始化会失败。
 * compile 'com.android.support:recyclerview-v7:23.1.1'
 * compile 'com.android.support:support-v4:23.1.1'
 * compile 'com.android.support:appcompat-v7:23.1.1'
 * compile 'com.alibaba:fastjson:1.1.45'
 */

public class WXApplication extends Application {

    public static WXApplication mInstance;
    @Override
    public void onCreate() {
        super.onCreate();
        mInstance = this;
        InitConfig config = new InitConfig.Builder()
                .setImgAdapter(new ImageAdapter())
                .build();
        WXSDKEngine.initialize(this, config);
    }
}

开始渲染

package com.example.linshaoyou.weexapp;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKEngine;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;

public class MainActivity extends AppCompatActivity implements IWXRenderListener {
    WXSDKInstance mWXSDKInstance;

    private Handler mHandler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        loadPage();
    }

    private void loadPage() {
        if (!WXSDKEngine.isInitialized()) {
            mHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    loadPage();
                }
            }, 500);
        } else {
            loadPageReally();
        }
    }

    private void loadPageReally() {
        /**
         * WXSample 可以替换成自定义的字符串，针对埋点有效。
         * template 是.we或.vue, 在上一章中 transform 后的 js文件。这里的hello.js，是放在assets目录下的
         * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
         * jsonInitData 可以为空。
         */
        mWXSDKInstance.render("WXSample", WXFileUtils.loadFileOrAsset("hello.js", this), null, null, WXRenderStrategy.APPEND_ASYNC);
    }

    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
        Log.e("LSY", "onRenderSuccess");
    }

    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
        Log.e("LSY", "onRenderSuccess widh == " + width + ", height == " + height);
    }

    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
        Log.e("LSY", "onRefreshSuccess width == " + width + ", height == " + height);
    }

    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {
        Log.e("LSY", "onException errCode == " + errCode + ", MSG == " + msg);
    }


    @Override
    protected void onResume() {
        super.onResume();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityResume();
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityPause();
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityStop();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityDestroy();
        }
    }
}

附录

Native WXSample地址
https://github.com/apache/incubator-weex/tree/master/android/playground/app https://github.com/apache/incubator-weex/tree/master/ios/playground

Vue WXSample地址：
https://hanks10100.github.io/weex-vue-examples/