• 集成 Weex 到已有应用
    • 集成到 Android
      • Android 集成有两种方式
      • 前期准备
      • 快速接入
        • 代码实现
      • 源码依赖(IDE Android Studio)
        • 附录
    • 集成到 iOS
      • 通过 CocoaPods 或者 Carthage 集成 Weex iOS SDK到你的项目
        • 第一步：添加依赖
        • 第二步：初始化 Weex 环境
        • 第三步：渲染 weex Instance
        • 第四步：销毁 Weex Instance
      • 导入 Weex SDK framework 到工程

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

    源码依赖(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，没有出现任何错误表示已经完成环境配置。

      • 使用 Carthage

      可以在这查询到当前最新的版本。
      在 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"];
    6. //init sdk environment
    7. [WXSDKEngine initSDKEnvironment];
    9. //register custom module and component，optional
    10. [WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];
    11. [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
    13. //register the implementation of protocol, optional
    14. [WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
    16. //set the log level
    17. [WXLog setLogLevel: WXLogLevelAll];

    第三步：渲染 weex Instance

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

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

    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