前言
由于项目的需要,最近接触了一下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 'git@github.com: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 <WeexSDK/WXSDKEngine.h>
#import <WeexSDK/WXDebugTool.h>
#import <WeexSDK/WXLog.h>
#import <WeexSDK/WXAppConfiguration.h>
在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 <WeexSDK/WXSDKInstance.h>
@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 <Foundation/Foundation.h>
#import <WeexSDK/WeexSDK.h>
#import <SDWebImageManager.h>
@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>
@end
WXImgLoaderDefaultImpl.m
#import "WXImgLoaderDefaultImpl.h"
#import <SDWebImage/UIImageView+WebCache.h>
#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<WXImageOperationProtocol>)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<WXImageOperationProtocol>)[[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
这里输入信息测试的话可以随便填写,即使随便填写了,在项目中也是可以修改的。