weex原始碼解析（四）- android引入sdk

TechShare3g6發表於2018-04-05
原始碼Android

上一章，我們簡單說明了下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/

相關文章