集成 Weex 到已有应用

集成到 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 加入如下基础依赖

    1. compile 'com.android.support:recyclerview-v7:23.1.1'
    2. compile 'com.android.support:support-v4:23.1.1'
    3. compile 'com.android.support:appcompat-v7:23.1.1'
    4. compile 'com.alibaba:fastjson:1.1.46.android'
    5. compile 'com.taobao.android:weex_sdk:0.5.1@aar'

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

代码实现

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

  • 实现图片下载接口,初始化时设置。
  1. package com.weex.sample;
  2. import android.widget.ImageView;
  3. import com.taobao.weex.adapter.IWXImgLoaderAdapter;
  4. import com.taobao.weex.common.WXImageStrategy;
  5. import com.taobao.weex.dom.WXImageQuality;
  6. /**
  7. * Created by lixinke on 16/6/1.
  8. */
  9. publicclassImageAdapterimplementsIWXImgLoaderAdapter{
  10. @Override
  11. publicvoid setImage(String url,ImageView view,WXImageQuality quality,WXImageStrategy strategy){
  12. //实现你自己的图片下载,否则图片无法显示。
  13. }
  14. }
  • 初始化
  1. package com.weex.sample;
  2. import android.app.Application;
  3. import com.taobao.weex.InitConfig;
  4. import com.taobao.weex.WXSDKEngine;
  5. /**
  6. * 注意要在Manifest中设置android:name=".WXApplication"
  7. * 要实现ImageAdapter 否则图片不能下载
  8. * gradle 中一定要添加一些依赖,否则初始化会失败。
  9. * compile 'com.android.support:recyclerview-v7:23.1.1'
  10. * compile 'com.android.support:support-v4:23.1.1'
  11. * compile 'com.android.support:appcompat-v7:23.1.1'
  12. * compile 'com.alibaba:fastjson:1.1.45'
  13. */
  14. publicclassWXApplicationextendsApplication{
  15. @Override
  16. publicvoid onCreate(){
  17. super.onCreate();
  18. InitConfig config=newInitConfig.Builder().setImgAdapter(newImageAdapter()).build();
  19. WXSDKEngine.initialize(this,config);
  20. }
  21. }
  • 开始渲染
  1. package com.weex.sample;
  2. import android.os.Bundle;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.view.View;
  5. import com.taobao.weex.IWXRenderListener;
  6. import com.taobao.weex.WXSDKInstance;
  7. import com.taobao.weex.common.WXRenderStrategy;
  8. import com.taobao.weex.utils.WXFileUtils;
  9. publicclassMainActivityextendsAppCompatActivityimplementsIWXRenderListener{
  10. WXSDKInstance mWXSDKInstance;
  11. @Override
  12. protectedvoid onCreate(Bundle savedInstanceState){
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.activity_main);
  15. mWXSDKInstance =newWXSDKInstance(this);
  16. mWXSDKInstance.registerRenderListener(this);
  17. /**
  18. * WXSample 可以替换成自定义的字符串,针对埋点有效。
  19. * template 是.we transform 后的 js文件。
  20. * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
  21. * jsonInitData 可以为空。
  22. * width 为-1 默认全屏,可以自己定制。
  23. * height =-1 默认全屏,可以自己定制。
  24. */
  25. mWXSDKInstance.render("WXSample",WXFileUtils.loadFileContent("hello.js",this),null,null,-1,-1,WXRenderStrategy.APPEND_ASYNC);
  26. }
  27. @Override
  28. publicvoid onViewCreated(WXSDKInstance instance,View view){
  29. setContentView(view);
  30. }
  31. @Override
  32. publicvoid onRenderSuccess(WXSDKInstance instance,int width,int height){
  33. }
  34. @Override
  35. publicvoid onRefreshSuccess(WXSDKInstance instance,int width,int height){
  36. }
  37. @Override
  38. publicvoid onException(WXSDKInstance instance,String errCode,String msg){
  39. }
  40. @Override
  41. protectedvoid onResume(){
  42. super.onResume();
  43. if(mWXSDKInstance!=null){
  44. mWXSDKInstance.onActivityResume();
  45. }
  46. }
  47. @Override
  48. protectedvoid onPause(){
  49. super.onPause();
  50. if(mWXSDKInstance!=null){
  51. mWXSDKInstance.onActivityPause();
  52. }
  53. }
  54. @Override
  55. protectedvoid onStop(){
  56. super.onStop();
  57. if(mWXSDKInstance!=null){
  58. mWXSDKInstance.onActivityStop();
  59. }
  60. }
  61. @Override
  62. protectedvoid onDestroy(){
  63. super.onDestroy();
  64. if(mWXSDKInstance!=null){
  65. mWXSDKInstance.onActivityDestroy();
  66. }
  67. }
  68. }

源码依赖(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. 其他设置请参考上面快速接入

附录

WXSample地址

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

集成到 iOS

通过 CocoaPods 或者 Carthage 集成 Weex iOS SDK到你的项目

首先假设你已经完成了安装 iOS 开发环境CocoaPods(或者Carthage)

第一步:添加依赖

导入 Weex iOS SDK 到你已有的项目, 如果没有,可以参考新建项目。
在继续下面内容之前,确保你已有的项目目录有名称为 Podfile 文件,如果没有,创建一个,用文本编辑器打开(如果使用 Carthage ,请确保已有项目目录下存在 Cartfile)。选择其中一个集成方法就可以。

  • 添加依赖

    • 使用CocoaPods
      WeexSDK 在 cocoaPods 上最新版本 可以在获取

    Podfile 文件中添加如下内容

    1. ```
    2. source 'git@github.com:CocoaPods/Specs.git'
    3. target 'YourTarget' do
    4. platform :ios, '7.0'
    5. pod 'WeexSDK', '0.17.0' ## 建议使用WeexSDK新版本
    6. end
    7. ```

    打开命令行,切换到你已有项目 Podfile 这个文件存在的目录,执行 pod install,没有出现任何错误表示已经完成环境配置。

    可以在查询到当前最新的版本。
    Cartfile 中添加如下内容
    github "apache/incubator-weex"
    在包含 Cartfile 文件目录的终端中执行 carthage update
    添加 framework 到你的工程

第二步:初始化 Weex 环境

AppDelegate.m 文件中做初始化操作,一般会在 didFinishLaunchingWithOptions 方法中如下添加。

  1. //business configuration
  2. [WXAppConfiguration setAppGroup:@"AliApp"];
  3. [WXAppConfiguration setAppName:@"WeexDemo"];
  4. [WXAppConfiguration setAppVersion:@"1.0.0"];
  5. //init sdk environment
  6. [WXSDKEngine initSDKEnvironment];
  7. //register custom module and component,optional
  8. [WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponentclass]];
  9. [WXSDKEngine registerModule:@"event" withClass:[WXEventModuleclass]];
  10. //register the implementation of protocol, optional
  11. [WXSDKEngine registerHandler:[WXNavigationDefaultImplnew] withProtocol:@protocol(WXNavigationProtocol)];
  12. //set the log level
  13. [WXLog setLogLevel:WXLogLevelAll];

第三步:渲染 weex Instance

Weex 支持整体页面渲染和部分渲染两种模式,你需要做的事情是用指定的 URL 渲染 Weex 的 view,然后添加到它的父容器上,父容器一般都是 viewController。

  1. #import <WeexSDK/WXSDKInstance.h>
  2. -(void)viewDidLoad
  3. {
  4. [super viewDidLoad];
  5. _instance =[[WXSDKInstance alloc] init];
  6. _instance.viewController =self;
  7. _instance.frame =self.view.frame;
  8. __weak typeof(self) weakSelf =self;
  9. _instance.onCreate =^(UIView*view){
  10. [weakSelf.weexView removeFromSuperview];
  11. weakSelf.weexView = view;
  12. [weakSelf.view addSubview:weakSelf.weexView];
  13. };
  14. _instance.onFailed =^(NSError*error){
  15. //process failure
  16. };
  17. _instance.renderFinish =^(UIView*view){
  18. //process renderFinish
  19. };
  20. NSURL *url =[[NSBundle mainBundle]URLForResource:@"main" withExtension:@"js"];
  21. [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
  22. }

WXSDKInstance 是很重要的一个类,提供了基础的方法和一些回调,如 renderWithURL, onCreate, onFailed 等,可以参见 WXSDKInstance.h 的声明。

第四步:销毁 Weex Instance

在 viewController 的 dealloc 阶段 销毁掉 Weex instance,释放内存,避免造成内存泄露。

  1. -(void)dealloc
  2. {
  3. [_instance destroyInstance];
  4. }

导入 Weex SDK framework 到工程

可以通过源码编译出 Weex SDK,可以在新的 feature 或者 bugfix 分支,尝试最新的 feature。

  • 使用 git clone Weex
    SSH
    1. git clone git@github.com:apache/incubator-weex.git
    或者 https
    1. git clone https://github.com/apache/incubator-weex.git
  • 打开 WeexSDK.xcodeproj in weex/ios/sdk
    切换到如下图所示 target
    img

  • 编译当前target,可以直接用快捷键 ⌘ + b

  • 最后找到产物在 weex/ios/sdk/Products 目录
    img

  • 导入 framework 到自己工程

    • 需要添加如下图系统依赖
      img
    • 添加 -ObjC 到工程设置中
      img
    • 添加 js-framework 到自己的 main bundle, js-framework 的位置在 WeexSDK.framework 中,文件名称为 native-bundle-main.js
      img