kerkee在iOS上的快速上手指南

这篇文章将介绍kerkee如何在iOS上快速上手!

kerkee是一个多主体共存型Hybrid框架,具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有Debug环境、彻底解决跨域问题。

Github上的地址:https://github.com/kercer/kerkee_ios
OSChina上的地址:http://git.oschina.net/zihong/kerkee_ios
官网地址:http://www.kerkee.com

kerkee的native部分目前支持Android和iOS平台,两个平台的架构设计及接口设计保持一致,大大降低了跨平台的成本,下面介绍一下如何集成kerkee以及如何上手快速做出一款自己的demo

kerkee的集成有:包的方式集成和源码集成两种方式,你可以选择其中的一种方式集成

包方式集成

iOS的kerkee使用CocoaPods进行管理,在集成的时候很方便。


简述: 如果你已知道CocoaPods如何使用,你只需在Podfile中添加pod ‘kerkee’, ’~> 1.0.1’ 或者 pod ‘kerkee’,然后即可走起,此时你可不用看以下的详细说明了


CocoaPods的安装及深入使用:请点击这里

前提:cocopods安装,安装非常简单,本来想略去这一部分的,但还是贴一下命令吧,如果不明白网络上搜索一搜一大把。

1
2
sudo gem install cocoapods
pod setup

1、 创建Podfile
使用也比较简单,cd到你的工程的根目录$projectPath

1
2
cd $projectPath
pod init

这个命令就会再工程根目录下面生成一个Podfile文件,podfile用文本编辑就行了

2、 配置Podfile
在你工程的Podfile文件添加

1
pod ‘kerkee’, ’~> 1.0.1’

或者你想直接使用最新版可把版本号去掉,使用以下这句

1
pod ‘kerkee’

我帖出个podfile文件配置的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Uncomment this line to define a global platform for your project
# platform :ios, '8.0'
# Uncomment this line if you're using Swift
# use_frameworks!
target 'TestKerkeePod' do
#or this way,If it is a team work,please do not use this way.
#because it use last version of kerkee,it is a bad way
#pod ‘kerkee’
pod ‘kerkee’, ’~> 1.0.1’
end
target 'TestKerkeePodTests' do
end
target 'TestKerkeePodUITests' do
end

3、执行导入命令

使用终端cd 到你的Podfile所在的目录,然后再使用pod install就可以把这些开源库导入,CocoaPods就开始为我们做下载源码、配置依赖关系、引入需要的framework等一些列工作。

1
2
cd $projectPath
pod install --verbose

安装完,这些库都放在一个Pods的工程中,然后会用xcode的workspace来管理这个工程和你自己的工程。以后就打开yourproject.xcworkspace就行了。

至此,基本集成已完成!!!恭喜你已经集成了kerkee,接下来就代码走起!!!

源码集成

  • 1、拉取源码
    git clone https://github.com/kercer/kerkee_ios.git
    
  • 2、拷贝根目录下的kerkee目录到你的工程目录(这步也可以忽略)
  • 3、打开你的工程,把kerkee.xcodeproj文件拉到你的工程里进行lib依赖
  • 4、找到你工程的TARGETS,在Embedded Binaried添加kerkee.framework

iOS快速上手指南

简述:
只需三步即可代码快速上手

  1. 注册js与native对应的类
  2. 实现native部分与js对应的方法
  3. 创建KCWebview进行调用

以下详情说明一下如何快速上手

  • 注册对应的接口类或模块

在使用之前,你必须先注册对应的接口类或模块,使得js对象能与Native类进行映射,全局只需要注册一次就够了

1
2
3
4
5
6
7
8
9
10
//have rewritten jsBridgeClient in kerkee
//you can use this way, first you can import "KCJSDefine.h"
//[KCJSBridge registClass:[KCApiOverrideJSBridgeClient class] jsObjName:kJS_jsBridgeClient];
[KCJSBridge registJSBridgeClient:[KCApiOverrideJSBridgeClient class]];
[KCJSBridge registClass:[KCApiTest class] jsObjName:kJS_TestModule];
//you can regist class which inherit from KCJSObject,js call static function
//[KCJSBridge registClass:[KCApiJSObjExample class] jsObjName:kJS_JSObjExampleModule];
[KCJSBridge registObject:[[KCApiJSObjExample alloc]init] ];

  • 实现JS对应的Native接口

KCApiOverrideJSBridgeClient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#import "KCApiOverrideJSBridgeClient.h"
#import "KCBaseDefine.h"
#import "KCJSBridge.h"
@implementation KCApiOverrideJSBridgeClient
+(void)testJSBrige:(KCWebView*)aWebView argList:(KCArgList*)args
{
NSString* jsonInfo = [args getString:@"info"];
KCLog(@"%@", jsonInfo);
}
+(void)commonApi:(KCWebView*)aWebView argList:(KCArgList*)args
{
NSString* jsonInfo = [args getString:@"info"];
KCLog(@"%@", jsonInfo);
NSMutableDictionary *dic = [NSMutableDictionary dictionary];
[dic setObject:@"OK!" forKey:@"info"];
NSString *json = [[NSString alloc] initWithData:[NSJSONSerialization dataWithJSONObject:dic options:0 error:nil] encoding:NSUTF8StringEncoding];
KCAutorelease(json);
//回调
[KCJSBridge callbackJS:aWebView callBackID:[args getObject:@"callbackId"] jsonString:json];
}
@end

KCApiTest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#import "KCApiTest.h"
#import "KCBaseDefine.h"
#import "KCJSBridge.h"
@implementation KCApiTest
+(void)testInfo:(KCWebView*)aWebView argList:(KCArgList*)args
{
NSString* jsonInfo = [args getString:@"testInfo"];
KCLog(@"%@", jsonInfo);
KCJSCallback* callback = [args getCallback];
if (callback)
{
[callback callbackJS:aWebView jsonString:@"{}"];
}
//也可以这么回调
//[KCJSBridge callbackJS:aWebView callBackID:[args getString:@"callbackId"] string:@"This is testInfo callball"];
}
@end

KCApiJSObjExample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#import "KCApiJSObjExample.h"
#import "KCJSObjDefine.h"
@implementation KCApiJSObjExample
- (NSString*)getJSObjectName
{
return kJS_JSObjExampleModule;
}
-(void)objExampleNotStaticFunction:(KCWebView*)aWebView argList:(KCArgList*)args
{
KCLog(@"objExampleNotStaticFunction");
}
+(void)objExampleStaticFunction:(KCWebView*)aWebView argList:(KCArgList*)args
{
KCLog(@"objExampleStaticFunction");
}
@end

  • 创建KCWebView

在ViewController中,添加成员变量

1
2
3
4
5
6
@interface ViewController ()
{
KCWebView* m_webView;
KCJSBridge* m_jsBridge;
}

初始化KCWebView和KCJSBridge对象

1
2
3
4
5
m_webView = [[KCWebView alloc] initWithFrame:self.view.bounds];
//add webview in your view
[self.view addSubview:m_webView];
//you can implement webview delegate
m_jsBridge = [[KCJSBridge alloc] initWithWebView:m_webView delegate:self];
  • 实现KCWebView代理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#pragma mark --
#pragma mark KCWebViewProgressDelegate
-(void)webView:(KCWebView*)webView identifierForInitialRequest:(NSURLRequest*)initialRequest
{
}
#pragma mark - UIWebView Delegate
- (void)webViewDidFinishLoad:(UIWebView *)aWebView
{
NSString *scrollHeight = [aWebView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"];
NSLog(@"scrollHeight: %@", scrollHeight);
NSLog(@"webview.contentSize.height %f", aWebView.scrollView.contentSize.height);
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:aWebView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:[scrollHeight floatValue]];
// [aWebView addConstraint:heightConstraint];
NSLog(@"webview frame %@", NSStringFromCGRect(aWebView.frame));
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
}
- (BOOL)webView:(UIWebView *)aWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
return YES;
}

至此,简单Demo即可运行起来