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

xkli · 2016-06-27T07:20:28Z

本文档已迁移至 https://weex-project.io/cn/guide/integrate-to-your-app.html ，此处不再维护，谢谢。

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

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

Android 集成有两种方式

源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
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 加入如下基础依赖

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)

下载源码 git clone https://github.com/alibaba/weex
创建Android 工程。
通过以下路径引入SDK Module
File->New-Import Module->选择WEEX SDK Module(weex/android/sdk)->Finish
app 的build.gradle 中添加如下依赖:compile project(':weex_sdk')
其他设置请参考上面快速接入
在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

The text was updated successfully, but these errors were encountered:

HelloInfo · 2016-06-28T09:27:17Z

thank you!

theseawolves · 2016-07-04T18:02:37Z

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

duyuan199010 · 2016-07-06T09:17:13Z

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

BoluoPi · 2016-07-11T02:43:22Z

引用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 · 2016-07-11T08:59:14Z

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

ndk{
            abiFilters "x86"
            abiFilters "armeabi"
        }

lnwu · 2016-07-22T13:13:12Z

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

zhengyanan1 · 2016-08-01T08:40:23Z

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

FlyangToCky · 2016-08-02T12:32:35Z

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

zoneoflkf · 2016-08-03T06:52:48Z

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

duyuan199010 · 2016-08-04T08:30:14Z

运行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!

请问有什么解决办法吗？

lanria990 · 2016-08-18T07:56:58Z

@duyuan199010 alibaba/weex#884

colys · 2016-09-11T10:27:04Z

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

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

phpup · 2016-09-15T11:15:49Z

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

Yumengjing · 2016-09-21T11:45:50Z

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

Yumengjing · 2016-09-21T11:47:10Z

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

gokoo · 2016-09-21T12:11:09Z

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

Yumengjing · 2016-09-21T14:10:47Z

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

Yumengjing · 2016-09-21T14:11:15Z

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

snailrobert · 2016-09-28T08:47:15Z

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

wqd0214 · 2016-10-08T07:25:23Z

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

zxc120301945 · 2016-10-25T10:26:18Z

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

huoyabingqian · 2016-11-07T03:58:23Z

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

yundongbot · 2016-12-09T03:08:38Z

@duyuan199010
是的，在 examples 目录下 https://github.com/alibaba/weex/tree/dev/examples/hello.we

wlxc · 2016-12-15T10:04:08Z

https://repo1.maven.org/maven2/ 找不到sdk

fearlesstrek · 2016-12-16T03:30:08Z

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

kodeflow · 2017-01-04T08:42:25Z

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

xkli · 2017-01-05T06:43:01Z

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

xkli · 2017-01-05T06:49:32Z

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

kodeflow · 2017-01-06T03:07:36Z

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

liudao01 · 2017-01-18T03:18:31Z

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

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

yundongbot · 2017-01-20T06:47:11Z

本文档已迁移至 https://weex-project.io/cn/guide/integrate-to-your-app.html ，此处不再维护，谢谢。

pandavickey · 2017-02-04T07:17:34Z

同问android不能全屏显示是什么原因啊，所有配置都参照官方demo

kodeflow · 2017-02-04T07:36:29Z

@pandavickey 试试0.8版本；
或者使用mInstance.renderByUrl(
getPageName(),
url,
options,
jsonInitData,
ScreenUtil.getDisplayWidth(this),
ScreenUtil.getDisplayHeight(this),
WXRenderStrategy.APPEND_ASYNC);
https://github.com/alibaba/weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/AbstractWeexActivity.java#L300
https://github.com/CCC2016 这个哥们儿的方案，最近有点忙，还没来得及去弄。

lbl1995713 · 2017-03-21T09:30:20Z

用现在vue版本编译的js文件就报Vue is not defined 这个错误要怎么解决啊。

yuxingfafu · 2017-04-11T03:33:09Z

最新版本的skd,用这个混淆报错的呀
04-11 11:25:22.895 6259-6276/? E/CrashHandler: java.lang.NullPointerException
at com.taobao.weex.devtools.debug.OkHttpSocketClient.connect(Unknown Source)
at com.taobao.weex.devtools.debug.SocketClient$MessageHandler.handleMessage(Unknown Source)
at android.os.Handler.dispatchMessage(Handler.java:110)
at android.os.Looper.loop(Looper.java:193)
at android.os.HandlerThread.run(HandlerThread.java:61)

guoshan-yang · 2017-11-28T02:43:55Z

为什么图片不能显示了?
view.setImageResource(R.mipmap.ic_launcher);
我设置一个固定图片也不能显示, 怎么回事了? 我也在WXApplication里面注册了

mogocat · 2017-12-20T08:29:36Z

对一个前端开发者来说，想成功打包一个安卓app是如此艰难。不是说这个东西有多复杂，只是对第一次接触Android studio的人来说，这个流程写的实在太简略了，这其中各种版本不对应，比如gradle和java版本对应，vue版本和sdk版本对应，各种配置都描述的很模糊，网上的相关资料也很少。
希望能有走在前面的同志帮忙补充点资料信息，我花了一整天时间也还是没打包成功，只在模拟器跑了个helloworld。

非常感谢

csxiaoyaojianxian · 2017-12-22T08:18:53Z

@FlappyHeart 请问你打包成功了吗？我和你的情况真是一模一样，哈哈

mogocat · 2017-12-22T08:25:58Z

@csxiaoyaojianxian 强烈推荐试试apicloud在线打包，免费的。weex好像不支持mint-ui一类的UI库，我基本放弃了。

xiachaoxulu · 2018-02-11T07:03:46Z

任何的UI都要在三端实现

goldze · 2018-03-06T09:42:21Z

前端使用weex-ui组件后，android这边无法渲染, 报这个错误是什么原因啊？该如何解决？
03-06 17:41:24.430 6950-6983/com.goldze.weex E/jsengine: ReportException : SyntaxError: Use of const in strict mode.
at Jt ((weex):4:2004)
at Object.Dt [as createInstance] ((weex):3:31729)
at Object.R [as createInstance] ((weex):1:7385)
at global.(anonymous function) ((weex):7:1148)
03-06 17:41:24.434 6950-6983/com.goldze.weex E/weex: reportJSException >>>> instanceId:17, exception function:createInstance, exception:SyntaxError: Use of const in strict mode.

SearchSunny · 2018-08-08T01:56:36Z

目前工程使用中出现这种错误不清楚是什么原因？另外WXSDKInstance初始能否放到Application中？Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.taobao.weex.WXSDKInstance.fireGlobalEventCallback(java.lang.String, java.util.Map)' on a null object reference

duyuan199010 mentioned this issue Jul 6, 2016

Weex 第一眼 #22

Open

xkli mentioned this issue Jan 9, 2017

Android Weex Native接入进阶 #125

Open

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

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

Comments

xkli commented Jun 27, 2016 • edited by yundongbot Loading

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

Android 集成有两种方式

前期准备

快速接入

代码实现

源码依赖(IDE Android Studio)

混淆规则

附录

HelloInfo commented Jun 28, 2016

theseawolves commented Jul 4, 2016

duyuan199010 commented Jul 6, 2016

BoluoPi commented Jul 11, 2016

xkli commented Jul 11, 2016 • edited Loading

lnwu commented Jul 22, 2016

zhengyanan1 commented Aug 1, 2016 • edited Loading

FlyangToCky commented Aug 2, 2016

zoneoflkf commented Aug 3, 2016

duyuan199010 commented Aug 4, 2016 • edited Loading

lanria990 commented Aug 18, 2016

colys commented Sep 11, 2016 • edited Loading

phpup commented Sep 15, 2016

Yumengjing commented Sep 21, 2016

Yumengjing commented Sep 21, 2016

gokoo commented Sep 21, 2016

Yumengjing commented Sep 21, 2016

Yumengjing commented Sep 21, 2016

snailrobert commented Sep 28, 2016

wqd0214 commented Oct 8, 2016

zxc120301945 commented Oct 25, 2016

huoyabingqian commented Nov 7, 2016

yundongbot commented Dec 9, 2016

wlxc commented Dec 15, 2016

fearlesstrek commented Dec 16, 2016

kodeflow commented Jan 4, 2017

xkli commented Jan 5, 2017

xkli commented Jan 5, 2017

kodeflow commented Jan 6, 2017

liudao01 commented Jan 18, 2017

yundongbot commented Jan 20, 2017

pandavickey commented Feb 4, 2017

kodeflow commented Feb 4, 2017

lbl1995713 commented Mar 21, 2017

yuxingfafu commented Apr 11, 2017

guoshan-yang commented Nov 28, 2017

mogocat commented Dec 20, 2017 • edited Loading

csxiaoyaojianxian commented Dec 22, 2017

mogocat commented Dec 22, 2017

xiachaoxulu commented Feb 11, 2018

goldze commented Mar 6, 2018

SearchSunny commented Aug 8, 2018

xkli commented Jun 27, 2016 •

edited by yundongbot

Loading

xkli commented Jul 11, 2016 •

edited

Loading

zhengyanan1 commented Aug 1, 2016 •

edited

Loading

duyuan199010 commented Aug 4, 2016 •

edited

Loading

colys commented Sep 11, 2016 •

edited

Loading

mogocat commented Dec 20, 2017 •

edited

Loading