集成 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.   3. import android.widget.ImageView;
    4.   5. import com.taobao.weex.adapter.IWXImgLoaderAdapter;
    6. import com.taobao.weex.common.WXImageStrategy;
    7. import com.taobao.weex.dom.WXImageQuality;
    8.   9. /**
    10.  * Created by lixinke on 16/6/1.
    11.  */
    12. public class ImageAdapter implements IWXImgLoaderAdapter {
    13.   14.   15.   @Override
    16.   public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
    17.     //实现你自己的图片下载，否则图片无法显示。
    18.   }
    19. }

  • 初始化

    1. package com.weex.sample;
        1. import android.app.Application;
        1. import com.taobao.weex.InitConfig;
      3. import com.taobao.weex.WXSDKEngine;
        1. /**
        • 注意要在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'
      12. */
      13. public class WXApplication extends Application {
        1. @Override
      15. public void onCreate() {
      16. super.onCreate();
      17. InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
      18. WXSDKEngine.initialize(this,config);
      19. }
      20. }

  • 开始渲染

    1. package com.weex.sample;
        1. import android.os.Bundle;
      2. import android.support.v7.app.AppCompatActivity;
      3. import android.view.View;
        1. import com.taobao.weex.IWXRenderListener;
      5. import com.taobao.weex.WXSDKInstance;
      6. import com.taobao.weex.common.WXRenderStrategy;
      7. import com.taobao.weex.utils.WXFileUtils;
        1. public class MainActivity extends AppCompatActivity implements IWXRenderListener {
        1. WXSDKInstance mWXSDKInstance;
        1. @Override
      11. protected void onCreate(Bundle savedInstanceState) {
      12. super.onCreate(savedInstanceState);
      13. setContentView(R.layout.activity_main);
        1. mWXSDKInstance = new WXSDKInstance(this);
      15. mWXSDKInstance.registerRenderListener(this);
      16. /**
        • WXSample 可以替换成自定义的字符串，针对埋点有效。
        • template 是.we transform 后的 js文件。
        • option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
        • jsonInitData 可以为空。
        • width 为-1 默认全屏，可以自己定制。
        • height =-1 默认全屏，可以自己定制。
      23. */
      24. mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
      25. }
        1. @Override
      27. public void onViewCreated(WXSDKInstance instance, View view) {
      28. setContentView(view);
      29. }
        1. @Override
      31. public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
        1. }
        1. @Override
      34. public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
        1. }
        1. @Override
      37. public void onException(WXSDKInstance instance, String errCode, String msg) {
        1. }
          1. @Override
      40. protected void onResume() {
      41. super.onResume();
      42. if(mWXSDKInstance!=null){
      43. mWXSDKInstance.onActivityResume();
      44. }
      45. }
        1. @Override
      47. protected void onPause() {
      48. super.onPause();
      49. if(mWXSDKInstance!=null){
      50. mWXSDKInstance.onActivityPause();
      51. }
      52. }
        1. @Override
      54. protected void onStop() {
      55. super.onStop();
      56. if(mWXSDKInstance!=null){
      57. mWXSDKInstance.onActivityStop();
      58. }
      59. }
        1. @Override
      61. protected void onDestroy() {
      62. super.onDestroy();
      63. if(mWXSDKInstance!=null){
      64. mWXSDKInstance.onActivityDestroy();
      65. }
      66. }
      67. }

源码依赖(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"]; 5. 6. //init sdk environment 7. [WXSDKEngine initSDKEnvironment]; 8. 9. //register custom module and component，optional 10. [WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]]; 11. [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]]; 12. 13. //register the implementation of protocol, optional 14. [WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)]; 15. 16. //set the log level 17. [WXLog setLogLevel: WXLogLevelAll];

第三步：渲染 weex Instance

Weex 支持整体页面渲染和部分渲染两种模式，你需要做的事情是用指定的 URL 渲染 Weex 的 view，然后添加到它的父容器上，父容器一般都是 viewController。 1. #import 2. - (void)viewDidLoad 3. { 4. [super viewDidLoad]; 5. 6. _instance = [[WXSDKInstance alloc] init]; 7. _instance.viewController = self; 8. _instance.frame = self.view.frame; 9. 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. }; 16. 17. _instance.onFailed = ^(NSError *error) { 18. //process failure 19. }; 20. 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