WEEX SDK集成到工程(Integrate to Android) #25

Open
xkli opened this Issue Jun 27, 2016 · 30 comments

Projects

None yet
@xkli
xkli commented Jun 27, 2016 edited

WEEX SDK集成到工程(Integrate to Android)

注:以下文档都是假设您已经具备一定的Android开发经验。

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的方式。
步骤如下:

  1. 创建Android工程,没有什么要特别说明的,按照你的习惯来。

  2. 修改build.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.46.android'
    compile 'com.taobao.android:weex_sdk:0.5.1@aar'
    

    注:版本可以高不可以低。

代码实现

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

  • 实现图片下载接口,初始化时设置。
package com.weex.sample;

import android.widget.ImageView;

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

/**
 * Created by lixinke on 16/6/1.
 */
public class ImageAdapter implements IWXImgLoaderAdapter {


  @Override
  public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
    //实现你自己的图片下载,否则图片无法显示。
  }
}
  • 初始化
package com.weex.sample;

import android.app.Application;

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

/**
 * 注意要在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 {

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

  • 开始渲染
package com.weex.sample;

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

import com.taobao.weex.IWXRenderListener;
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;

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

    mWXSDKInstance = new WXSDKInstance(this);
    mWXSDKInstance.registerRenderListener(this);
    /**
     * WXSample 可以替换成自定义的字符串,针对埋点有效。
     * template 是.we transform 后的 js文件。
     * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
     * jsonInitData 可以为空。
     * width 为-1 默认全屏,可以自己定制。
     * height =-1 默认全屏,可以自己定制。
     */
    mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.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();
    }
  }
}

WXSDKInstance 提供了加载远程URL的方法:

/**
url 为远程bundle的网络地址
其他参数和render方法一致
**/
  public void renderByUrl(String pageName, String url, Map<String, Object> options, final String jsonInitData, final int width, final int height, final WXRenderStrategy flag) {}

源码依赖(IDE Android Studio)

  1. 下载源码 git clone https://github.com/alibaba/weex
  2. 创建Android 工程。
  3. 通过以下路径引入SDK Module
    File->New-Import Module->选择WEEX SDK Module(weex/android/sdk)->Finish
  4. app 的build.gradle 中添加如下依赖:compile project(':weex_sdk')
  5. 其他设置请参考上面快速接入
  6. 在App的build.gradle 中需要加如下代码:
   defaultConfig {
        ndk{
            abiFilters "x86"
            abiFilters "armeabi"
        }
    }

否则会出现如下异常:

No implementation found for int com.taobao.weex.bridge.WXBridge.initFramework(java.lang.String, com.taobao.weex.bridge.WXParams) (tried Java_com_taobao_weex_bridge_WXBridge_initFramework and Java_com_taobao_weex_bridge_WXBridge_initFramework__Ljava_lang_String_2Lcom_taobao_weex_bridge_WXParams_2)
12-28 20:10:53.069 19353-19374/com.ahai.weex_demo02 E/weex: [WXBridgeManager] invokeInitFramework java.lang.UnsatisfiedLinkError: No implementation found for int com.taobao.weex.bridge.WXBridge.initFramework(java.lang.String, com.taobao.weex.bridge.WXParams) (tried Java_com_taobao_weex_bridge_WXBridge_initFramework and Java_com_taobao_weex_bridge_WXBridge_initFramework__Ljava_lang_String_2Lcom_taobao_weex_bridge_WXParams_2)
                                                                at com.taobao.weex.bridge.WXBridge.initFramework(Native Method)
                                                                at com.taobao.weex.bridge.WXBridgeManager.initFramework(WXBridgeManager.java:1037)
                                                                at com.taobao.weex.bridge.WXBridgeManager.invokeCreateInstance(WXBridgeManager.java:839)
                                                                at com.taobao.weex.bridge.WXBridgeManager.access$200(WXBridgeManager.java:273)
                                                                at com.taobao.weex.bridge.WXBridgeManager$4.run(WXBridgeManager.java:820)
                                                                at com.taobao.weex.common.WXThread$SafeRunnable.run(WXThread.java:234)
                                                                at android.os.Handler.handleCallback(Handler.java:739)
                                                                at android.os.Handler.dispatchMessage(Handler.java:95)
                                                                at android.os.Looper.loop(Looper.java:148)
                                                                at android.os.HandlerThread.run(HandlerThread.java:61)
12-28 20:10:53.069 19353-19374/com.ahai.weex_demo02 E/weex: [WXBridgeManager] invokeCreateInstance: framework.js uninitialized.

混淆规则

-keep class com.taobao.weex.WXDebugTool{*;}
-keep class com.taobao.weex.devtools.common.LogUtil{*;}
-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
-keepclassmembers class ** {
  @com.taobao.weex.ui.component.WXComponentProp public *;
}
-keep class com.taobao.weex.bridge.**{*;}
-keep class com.taobao.weex.dom.**{*;}
-keep class com.taobao.weex.adapter.**{*;}
-keep class com.taobao.weex.common.**{*;}
-keep class * implements com.taobao.weex.IWXObject{*;}
-keep class com.taobao.weex.ui.**{*;}
-keep class com.taobao.weex.ui.component.**{*;}
-keep class com.taobao.weex.utils.**{
    public <fields>;
    public <methods>;
    }
-keep class com.taobao.weex.view.**{*;}
-keep class com.taobao.weex.module.**{*;}

附录

WXSample地址
https://github.com/xkli/WXSample.git

@HelloClouds

thank you!

@theseawolves

请问为什么初始化必须要.setImgAdapter(new ImageAdapter())。其他的adapter也没见有初始化呢

@duyuan199010

Demo中的hello.js是用.we文件转化而来的吗?

@BoluoPi
BoluoPi commented Jul 11, 2016

引用sdk主要是下面这3个目录,src,armeabi,assets
weex-dev/android/sdk/libs/armeabi

weex-dev/android/sdk/src/main/java

weex-dev/android/sdk/assets
如果报[WXBridgeManager] invokeCreateInstance: framework.js uninitialized.就是没有复制
weex-dev/android/sdk/assets/main.js到自己的assets目录。

@xkli
xkli commented Jul 11, 2016 edited

如果报[WXBridgeManager] invokeCreateInstance: framework.js uninitialized,请确认当前手机是否是64位
兼容64位方法:
在app.gradle 中添加如下过滤:

ndk{
            abiFilters "x86"
            abiFilters "armeabi"
        }
@bulesyk
bulesyk commented Jul 22, 2016

看了这个只能先去学学安卓了。。。

@zhengyanan1
zhengyanan1 commented Aug 1, 2016 edited

试了下这个demo,但没明白到底想干个啥

@FlyangToCky

很奇怪,这样的集成方式,有什么理由让不会Android的用weex

@zoneoflkf

@FlyangToCky 即使是集成到IOS也是一样要了解IOS,这种方式我认为是很有好处的,每个平台根据自己的特性去实现图片的维护,并且可以自由选择更合适的图片框架。并且作为weex,它并不能直接访问到界面生命周期,这个跟平台自身有关。

@duyuan199010
duyuan199010 commented Aug 4, 2016 edited

运行Demo,有时候会报如下异常:
ReportException : ReferenceError: weex_define is not defined
at Object. ((weex):47:3)
at webpack_require ((weex):20:30)
at (weex):40:18
at (weex):43:10
E/weex: [WXBridgeManager] invokeCreateInstance: framework.js uninitialized.
D/weex: WXDebugTool not found!

请问有什么解决办法吗?

@colys
colys commented Sep 11, 2016 edited

为什么我换成home.js,运行起来还是helloword?
mWXSDKInstance.render("圈子金融", WXFileUtils.loadFileContent("home.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

home.js是we文件编译过来的,也在assets目录下

@phpup
phpup commented Sep 15, 2016

@colys 这个是旧版本的,很多控件不支持,所以有些运行可以成功,有些不显示。

@Yumengjing

出现compile project(':weex_sdk')的路径找不到怎么处理

@Yumengjing

弄了很久,就一个hello.js的内容能显示,换成其他如tabbar之类的就显示不出来,请问是什么问题

@280772270

@Yumengjing 需要添加weex的控件 在根目录下执行 npm install weex-components --save

@Yumengjing

@280772270 这个我知道,可是集成到Android里面就没有办法显示,上网权限已经给了

@Yumengjing

@280772270 你有什么好的解决方法吗

@snailrobert

可不可以加载远程的JS?我加载老是失败?

@wqd1994
wqd1994 commented Oct 8, 2016

请问我在fragnment 文件中可以加载weex 文件吗

@zxc120301945

js已经更改,我怎么在当前页面刷新weex呢?现在是刷新后并没有改变,只有重新开启这个页面才会更改

@huoyabingqian

@Yumengjing
我现在的问题跟你的一样儿的,就是一个hello.js能显示出来,一集成到as当中就不行了,那些tabbar就显示不出来,怎么调也不行,你有没有好的办法

@fearlesstrek

为什么配置好了。跑起来了 ,activity_main为何不适用hello.js的布局显示,还是显示activity_main?

@1149863953

在Android Studio->Open Module Settings->Dependencies中搜索不到weex_sdk

@xkli
xkli commented Jan 5, 2017

@wenluoxicheng weex SDK没有发布在mavenCenter,而是发布在了jcenter https://bintray.com/alibabaweex

@xkli
xkli commented Jan 5, 2017

统一回复一下,使用AndroidStudio引入weex playground只需要把源码git clone后,用AndroidStudio 中的 Open an existing Android Studio project ->weex/android/playground/build.gradle 就会自动引入playground和其他module。如果长时间build,可能需要你翻墙。有些依赖需要从国外服务器拉取。

@1149863953

接入android时页面没有全屏显示,rander时width、height都传入的-1
IOS接入显示正常,这是什么问题啊,weex_sdk版本是0.9.4

@liudao01

Error:Execution failed for task ':app:weex'.

execCommand == null!
遇到这个错 有人知道么

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment