Android项目集成Weex

根据技术胖教程学习，感谢文章的作者传送门
在搭建好环境之后，我们的目的是在android中把weex已sdk方式集成。官网
1.android的集成方式有两种，A.源码依赖 B.SDK依赖。我们将采用SDK依赖
2.当androidstudio已有项目（没有就新建工程），修改build.gradle内容

compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:recyclerview-v7:26+'
    compile 'com.android.support:support-v4:26+'
    compile 'com.android.support:appcompat-v7:26+'
    compile 'com.alibaba:fastjson:1.1.46.android'
    ##compile 'com.taobao.android:weex_sdk:0.10.0@aar'
    compile 'com.taobao.android:weex_sdk:0.16.0'
    compile 'com.taobao.android:weex_inspector:0.10.0.5'

官网上的sdk版本太老了。所以用上述的内容
3.实现图片加载接口，这是为了加载图片用的。

    public ImageWeexAdapter() {
    }

    @Override
    public void setImage(final String url, final ImageView view,
                         WXImageQuality quality, WXImageStrategy strategy) {

        WXSDKManager.getInstance().postOnUiThread(new Runnable() {

            @Override
            public void run() {
                if(view==null||view.getLayoutParams()==null){
                    return;
                }
                if (TextUtils.isEmpty(url)) {
                    view.setImageBitmap(null);
                    return;
                }
                String temp = url;
                if (url.startsWith("//")) {
                    temp = "http:" + url;
                }
                if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
                    return;
                }
                Picasso.with(WXEnvironment.getApplication())
                        .load(temp)
                        .into(view);
            }
        },0);
    }
}

4.Application中初始化

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

注：sdk更新之后，就是这个方法了。 WXFileUtils.loadAsset("dist/index.js"，并且在assets目录下有dist文件夹的话就要写dist/index.js,否则不用写。

5.开始渲染

public class MainActivity extends AppCompatActivity implements IWXRenderListener {
  WXSDKInstance mWXSDKInstance;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWXSDKInstance=new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("dist/index.js", this), null, null, WXRenderStrategy.APPEND_ASYNC);
    }
    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }
    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {

    }
    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {

    }

    @Override
    public void onException(WXSDKInstance instance, String errCode, String 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();
        }
    }

}

结构图.png

6.在manifest中注册WXApplication

<uses-permission android:name="android.permission.INTERNET" />
    <application
        android:name=".weex.WXApplication"

记得加上网络权限，图片加载后面要用。
那么肯定会问index.js怎么来的？下面揭晓

jsbundle资源生成

android加载weex和加载RN类似也是要提供个jsbundle文件。weex生成jsbundle也很简单，在weex项目下运行npm run build, 编译完成后会在dist目录下生成文件。每个vue文件会生成对应的js。 image.png

1.确保根据技术胖的文章把环境都安装好了，并生成了第一个weex项目.
在项目的src目录下创建test.vue

<template>
    <div>
        <text style="font-size:100px;">我是新建的文件</text>
    </div>
</template>

在控制台运行 npm run build 生成test.js文件，我使用的是webstorm image.png
此时会在 image.png
dist下生成test.js文件，拷贝到android assets目录。至此，集成完成。
8.接下来运行项目
image.png