前言
由于项目的需要，最近接触了一下weex开发，本人刚入门不久，由于weex官方文档的坑太多.....这里主要介绍的是集成weex到iOS项目中所需要做的工作，以及运行出一个初级Demo，本文默认读者有一定的iOS基础
环境前端搭建
首先，你需要 Node.js (Node.js 为前端开发环境)
安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。
对于 Mac，可以使用 Homebrew 进行安装：
$ brew install node
安装完成后，可以使用以下命令检测是否安装成功：
通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。
$ npm install -g weex-toolkit
升级weed-toolkit子依赖
$ weex update weex-devtool@latest
升级完之后查看版本以及子依赖
$ weex -v
到这里前端的环境就搭建完毕了。
搭建前端项目
创建一个文件夹，用于存放weex项目，通过终端cd 到该路径下
在该路径下执行weex命令创建项目
$ weex create weexDemo
执行完命令后，在目录中就创建了一个使用 Weex 和 Vue 的模板项目。
这里，你可以cd到weexDemo 目录下，执行前端依赖操作
$ npm install
该操作会将package.json目录下的依赖安装到weex项目中
之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。
npm run dev & npm run serve
跳出这个界面，weex前端项目搭建完成
嵌入iOS项目
使用cocoaPod 导入weex项目以及相关第三方框架
在Podfile 文件中加入以下依赖
source '[email protected]:CocoaPods/Specs.git'
target 'weexDemo' do
platform :ios, '7.0'
pod 'WeexSDK'
pod 'SDWebImage', '3.7.5'
pod 'WXDevtool', '0.15.3'
pod 'ATSDK-Weex', '0.0.1'
end
执行pod install 安装依赖
$ pod install
安装成功后我们需要在iOS项目中搭建weex环境
在appDelegate 中导入 weexSDK
#import
#import
#import
#import
在didFinishLaunchingWithOptions 方法中添加 weex 环境
//业务配置，非必需
[WXAppConfiguration setAppGroup:@"AliApp"];
[WXAppConfiguration setAppName:@"WeexDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
//初始化SDK环境
[WXSDKEngine initSDKEnvironment];
在要显示的界面上添加代码
//
// ViewController.m
// weexDemo
//
// Created by yumq on 2017/11/22.
// Copyright © 2017年 yumq. All rights reserved.
//
#import "ViewController.h"
#import
@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
@property (nonatomic, assign) CGFloat weexHeight;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
_weexHeight = self.view.frame.size.height - 64;
[self.navigationController.navigationBar setHidden:YES];
[self render];
}
- (void)dealloc
{
[_instance destroyInstance];
}
- (void)render
{
_instance = [[WXSDKInstance alloc] init];
_instance.viewController = self;
CGFloat width = self.view.frame.size.width;
_instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
};
_instance.onFailed = ^(NSError *error) {
NSLog(@"failed %@",error);
};
_instance.renderFinish = ^(UIView *view) {
NSLog(@"render finish");
};
_instance.updateFinish = ^(UIView *view) {
NSLog(@"update Finish");
};
NSString *url = [NSString stringWithFormat:@"file://%@/index.js",[NSBundle mainBundle].bundlePath];
[_instance renderWithURL:[NSURL URLWithString:url] options:@{@"bundleUrl":url} data:nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
到这里，我们iOS的简单界面基本搭建完毕，接下来，我们需要使用之前创建的前端框架打包生成js 文件，放入项目中，让iOS 加载并生成界面
我们cd 到之前创建的项目的src目录下执行打包操作
weex compile ./ ../assets/
打包完后，在assets 下会多出index.js 文件，将文件拷入iOS 项目中，
由于是加载bundle的文件，所以导入的时候不能仅仅是引用，请注意
接下来运行项目
创建成功
Tip ：这里你可能会遇到图片加载不出来的问题
据我所知，weex需要一个适配器去让框架了解图片的加载方式才能加载出图片
这里，引用官方适配器
创建一个WXImgLoaderDefaultImpl 类，在WXImgLoaderDefaultImpl中添加以下代码
WXImgLoaderDefaultImpl.h
#import
#import
#import
@interface WXImgLoaderDefaultImpl : NSObject
@end
WXImgLoaderDefaultImpl.m
#import "WXImgLoaderDefaultImpl.h"
#import
#define MIN_IMAGE_WIDTH 36
#define MIN_IMAGE_HEIGHT 36
#if OS_OBJECT_USE_OBJC
#undef WXDispatchQueueRelease
#undef WXDispatchQueueSetterSementics
#define WXDispatchQueueRelease(q)
#define WXDispatchQueueSetterSementics strong
#else
#undef WXDispatchQueueRelease
#undef WXDispatchQueueSetterSementics
#define WXDispatchQueueRelease(q) (dispatch_release(q))
#define WXDispatchQueueSetterSementics assign
#endif
@interface WXImgLoaderDefaultImpl()
@property (WXDispatchQueueSetterSementics, nonatomic) dispatch_queue_t ioQueue;
@end
@implementation WXImgLoaderDefaultImpl
#pragma mark -
#pragma mark WXImgLoaderProtocol
- (id)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
{
if ([url hasPrefix:@"//"]) {
url = [@"http:" stringByAppendingString:url];
}
return (id)[[SDWebImageManager sharedManager]downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
} completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
if (completedBlock) {
completedBlock(image, error, finished);
}
}];
}
@end
并在appDelegate中添加环境
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
运行
打包
weex 也有命令可以直接打包出iOS/android项目
执行weex platform add ios 添加iOS平台
weex platform add ios
执行
weex build ios 构建项目
weex build ios
这里输入信息测试的话可以随便填写，即使随便填写了，在项目中也是可以修改的。