• 集成 Weex 到 iOS
    • 1. 配置依赖
      • 使用 CocoaPods
      • 使用 Carthage
    • 2. 初始化 Weex
    • 3. 创建一个 Weex 实例
    • 4. 销毁实例
    • 5. 扩展 Weex
    • 6. 在 iPad 中使用 Weex

    集成 Weex 到 iOS

    使用 CocoaPods 或 Carthage 可以方便地将 Weex 集成到自己的项目中。

    1. 配置依赖

    使用 CocoaPods

    从 Cocoapods 仓库中获取 WeexSDK 的最新版本。

    将 WeexSDK 添加到你的 Podfile 中。

    1. source 'git@github.com:CocoaPods/Specs.git'
    2. target 'YourTarget' do
    3.     platform :ios, '8.0'
    4.     pod 'WeexSDK', '0.20.1'
    5. end

    运行 pod install 命令安装依赖。

    使用 Carthage

    在工程中创建一个 Cartfile，Carthage 使用方法。

    添加 github "apache/incubator-weex" 到 Cartfile

    运行 carthage update。

    2. 初始化 Weex

    建议在 didFinishLaunchingWithOptions 回调中初始化 Weex，你也可以在子线程中异步初始化，但需要确保渲染 Weex 页面前初始化已经全部完成。

    1. // App configuration
    2. [WXAppConfiguration setAppGroup:@"Your app group"];
    3. [WXAppConfiguration setAppName:@"Your app name"];
    4. [WXAppConfiguration setAppVersion:@"Your app version"];
    6. //Initialize WeexSDK
    7. [WXSDKEngine initSDKEnvironment];
    9. //Register custom modules and components, optional.
    10. [WXSDKEngine registerComponent:@"myview" withClass:[MyViewComponent class]];
    11. [WXSDKEngine registerModule:@"mymodule" withClass:[MyWeexModule class]];
    13. //Register the implementation of protocol, optional.
    14. [WXSDKEngine registerHandler:[WXAppNavigationImpl new] withProtocol:@protocol(WXNavigationProtocol)];
    16. //Set the log level, optional
    17. [WXLog setLogLevel: WXLogLevelWarning];

    3. 创建一个 Weex 实例

    你既可以在全页面中使用 Weex，也可以在一个 view 中渲染 Weex。只需要创建一个 Weex 实例并指定好回调方法，提供一个合法的 URL 就可以了。在 onCreate 回调方法中将根 view 添加到你想显示内容的地方，并通过 instance.frame = 来设置它的尺寸和位置。

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

    4. 销毁实例

    必须显式地销毁 Weex 实例，否则可能引起内存泄漏。

    1. [instance destroyInstance];

    5. 扩展 Weex

    Weex 支持自定义组件、模块，可以参考以下两篇文档。

    • Extend iOS
    • Extend iOS with swift

    6. 在 iPad 中使用 Weex

    当页面渲染完成后，屏幕再旋转，页面不会自动适配。所以，如果你的 App 允许屏幕旋转，务必在页面渲染前更新屏幕宽度。

    前端样式中指定的坐标在渲染时会根据 屏幕宽度 和 当前页面的 view-port-width 进行换算。

    修改 view-port-width 的方法，会影响前端代码，通常不要设置，默认为 750px。

    1. beforeCreate(){
    2.     const meta = weex.requireModule('meta');
    3.     meta.setViewport({
    4.         width: 1536
    5.     });
    6. }

    监听 UIDeviceOrientationDidChangeNotification 通知，并调用下面方法修改屏幕尺寸（假设已经旋转完成，[UIScreen mainScreen].bounds.size.width 就是当前宽度）

    1. [WXCoreBridge setDeviceSize:[UIScreen mainScreen].bounds.size];