美文网首页
Weex android集成

Weex android集成

作者: 比目鱼26 | 来源:发表于2018-01-11 18:38 被阅读0次

Android 集成有两种方式

  1. 源码依赖:能够快速使用WEEX最新功能,可以根据自己项目的特性进行相关改进。
  2. SDK依赖:WEEX 会在jcenter 定期发布稳定版本。jcenter
    注:国内可能需要翻墙

前期准备

  • 已经安装了JDK version>=1.7 并配置了环境变量
  • 已经安装Android SDK 并配置环境变量。
  • Android SDK version 23 (compileSdkVersion in build.gradle)
  • SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  • Android Support Repository >= 17 (for Android Support Library)

快速接入

如果你是尝鲜或者对稳定性要求比较高可以使用依赖SDK的方式。
步骤如下:

创建Android工程,没有什么要特别说明的,按照你的习惯来。
修改build.gradle 加入如下基础依赖

implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.alibaba:fastjson:1.1.67.android'
implementation 'com.taobao.android:weex_sdk:0.10.0@aar'
implementation ('com.github.bumptech.glide:glide:4.5.0') {
        exclude group: 'com.android.support'
}

注:版本可以高不可以低。Glide作为一个图片渲染库,不是必选项,可自行实现或者选择其他轮子,比如Picasso、Fresco

代码实现

  • 实现图片下载接口,初始化时设置。
import android.widget.ImageView;

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

/**
 * Created by wsl on 18/1/11.
 */

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        Glide.with(WXEnvironment.getApplication()).load(url).into(view);
    }
}

  • 初始化
import android.app.Application;

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

/**
 * Created by wsl on 18/1/11.
 */

public class WeexApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig.Builder builder = new InitConfig.Builder();
        builder.setImgAdapter(new ImageAdapter());

        InitConfig config = builder.build();
        WXSDKEngine.initialize(this, config);
    }
}
  • 开始渲染
public class MainActivity extends AppCompatActivity implements IWXRenderListener {
    private WXSDKInstance mWXSDKInstance;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render(getLocalClassName(), WXFileUtils.loadAsset("index.js", this),
                null, null, -1, -1, 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();
        }
    }
}

重要的是这三行代码:

mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
mWXSDKInstance.render(getLocalClassName(), WXFileUtils.loadAsset("index.js", this),
                null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

render里面对应的js文件是通过weex-toolkit打包出来的.

这里也可以把渲染出来的view加到已有的layout里

  
 @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        FrameLayout layout = findViewById(R.id.xxx);
        layout.addView(view);
        //setContentView(view);
    }

这样整个过程就完成了

参考连接

https://weex.apache.org/cn/guide/integrate-to-your-app.html
https://yq.aliyun.com/articles/58743
http://yifeng.studio/2016/11/11/weex-series-two-android-integration/

相关文章

  • weex集成到Android

    weex集成到Android是指在Android里面加载weex页面; 1、app module下添加依赖 2、a...

  • weex和android 真机联调

    如果还不知道weex怎么集成到android项目,请移步到这里 https://weex.apache.org/z...

  • Weex android集成

    Android 集成有两种方式 源码依赖:能够快速使用WEEX最新功能,可以根据自己项目的特性进行相关改进。 SD...

  • Swift 中的 weex

    weex ios 集成参阅:Weex学习与实践:iOS原理篇 swift集成weex 首先将weexsdk集成到项...

  • Weex集成到Android

    1、Weex开发环境网上很多了。 2、Weex的demo可以参考:https://github.com/dingc...

  • Android项目集成Weex

    根据技术胖教程学习,感谢文章的作者传送门在搭建好环境之后,我们的目的是在android中把weex已sdk方式集成...

  • weex集成到 Android

    修改build.gradle 加入如下基础依赖 compile'com.android.support:recyc...

  • Android集成weex汇总

    weex指北针https://weex.apache.org/zh/guide/develop/integrate...

  • Weex从零开始(二)Android weex集成

    添加依赖 将weex集成到现有Android项目中,首先需要添加如下依赖 (版本可更高但不可低) 添加ImageA...

  • ios 集成weex源码遇到的坑

    集成源码weex的时候 发现按weex官网的步骤集成 renderUrl 永远是失败的最后发现官网的集成文档里 少...

网友评论

      本文标题:Weex android集成

      本文链接:https://www.haomeiwen.com/subject/puytoxtx.html