使用 CocoaPods 或 Carthage 可以方便地将 Weex 集成到自己的项目中。
从 Cocoapods 仓库中获取 WeexSDK 的最新版本。
将 WeexSDK 添加到你的 Podfile 中。
source 'git@github.com:CocoaPods/Specs.git' target 'YourTarget' do platform :ios, '8.0' pod 'WeexSDK', '0.20.1' end
运行 pod install
命令安装依赖。
在工程中创建一个 Cartfile,Carthage 使用方法。
添加 github "apache/incubator-weex"
到 Cartfile
运行 carthage update
。
建议在 didFinishLaunchingWithOptions
回调中初始化 Weex,你也可以在子线程中异步初始化,但需要确保渲染 Weex 页面前初始化已经全部完成。
// App configuration [WXAppConfiguration setAppGroup:@"Your app group"]; [WXAppConfiguration setAppName:@"Your app name"]; [WXAppConfiguration setAppVersion:@"Your app version"]; //Initialize WeexSDK [WXSDKEngine initSDKEnvironment]; //Register custom modules and components, optional. [WXSDKEngine registerComponent:@"myview" withClass:[MyViewComponent class]]; [WXSDKEngine registerModule:@"mymodule" withClass:[MyWeexModule class]]; //Register the implementation of protocol, optional. [WXSDKEngine registerHandler:[WXAppNavigationImpl new] withProtocol:@protocol(WXNavigationProtocol)]; //Set the log level, optional [WXLog setLogLevel: WXLogLevelWarning];
你既可以在全页面中使用 Weex,也可以在一个 view 中渲染 Weex。只需要创建一个 Weex 实例并指定好回调方法,提供一个合法的 URL 就可以了。在 onCreate
回调方法中将根 view 添加到你想显示内容的地方,并通过 instance.frame =
来设置它的尺寸和位置。
#import <WeexSDK/WXSDKInstance.h> - (void)viewDidLoad { [super viewDidLoad]; _instance = [[WXSDKInstance alloc] init]; _instance.viewController = self; _instance.frame = self.view.frame; __weak typeof(self) weakSelf = self; _instance.onCreate = ^(UIView *view) { [weakSelf.weexView removeFromSuperview]; weakSelf.weexView = view; [weakSelf.view addSubview:view]; }; _instance.onFailed = ^(NSError *error) { //process failure, you could open an h5 web page instead or just show the error. }; _instance.renderFinish = ^ (UIView *view) { //process renderFinish }; NSURL *url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"js"]; [_instance renderWithURL:url options:@{@"bundleUrl":[self.url absoluteString]} data:nil]; }
必须显式地销毁 Weex 实例,否则可能引起内存泄漏。
[instance destroyInstance];
Weex 支持自定义组件、模块,可以参考以下两篇文档。
当页面渲染完成后,屏幕再旋转,页面不会自动适配。所以,如果你的 App 允许屏幕旋转,务必在页面渲染前更新屏幕宽度。
前端样式中指定的坐标在渲染时会根据 屏幕宽度 和 当前页面的 view-port-width 进行换算。
修改 view-port-width 的方法,会影响前端代码,通常不要设置,默认为 750px。
beforeCreate(){ const meta = weex.requireModule('meta'); meta.setViewport({ width: 1536 }); }
监听 UIDeviceOrientationDidChangeNotification 通知,并调用下面方法修改屏幕尺寸(假设已经旋转完成,[UIScreen mainScreen].bounds.size.width 就是当前宽度)
[WXCoreBridge setDeviceSize:[UIScreen mainScreen].bounds.size];