集成到 IOS 应用
使用 CocoaPods 或 Carthage 可以方便地将 Weex 集成到自己的项目中。
1. 配置依赖
使用 CocoaPods
从 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
命令安装依赖。
使用 Carthage
在工程中创建一个 Cartfile,Carthage 使用方法。
添加 github "apache/incubator-weex"
到 Cartfile
运行 carthage update
。
2. 初始化 Weex
建议在 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];
3. 创建一个 Weex 实例
你既可以在全页面中使用 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];
}
4. 销毁实例
必须显式地销毁 Weex 实例,否则可能引起内存泄漏。
[instance destroyInstance];
5. 扩展 Weex
Weex 支持自定义组件、模块,可以参考以下两篇文档。
6. 在 iPad 中使用 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];
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论