> For the complete documentation index, see [llms.txt](https://beacon-help.gitbook.io/beacon-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://beacon-help.gitbook.io/beacon-help/sdk-wen-dang/sdkji-cheng-zhi-nan/hybridjie-ru-zhi-nan.md).

# Hybrid集成指南

## **一、获取SDK**

登录灯塔首页，创建应用，填入基本应用信息，即可获取独一无二的AppKey，并下载SDK；

iOS SDK：[点此下载SDK for iOS](/beacon-help/sdkhuo-qu/sdk-for-ios.md)

Android SDK：[点此下载SDK for Android](/beacon-help/sdkhuo-qu/sdk-for-android.md)

## **二、使用iOS Hybrid功能** 

**1. 导入 SDK**

Hybrid 统计是在Native统计基础上进行的，在开始之前，请确保已按照[iOS集成指南](https://docs.beacon.qq.com/beaconhelp/iosji-cheng-zhi-nan.html)正常接入灯塔iOS SDK

SDK包功能介绍：

***BeaconAPI\_Base.framework*** ---基础统计功能，必选

***BeaconAPI\_Hybrid.framework*** ---Hybrid功能，可选

添加系统库和相关配置（具体代码参考Demo工程）

**2.添加相关的代码**

**2.1.UIWebView控件**

* 当JavaScript调用灯塔上报事件，需在UIWebView的Delegate实现中添加代码：

```
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    // 处理Beacon混合统计请求的代码
    if ([BeaconHybrid handleRequest:request fromWebView:webView]) {
        return NO;
    }

    // 原有的代码
    return YES;
}
```

* 开启Native和JavaScript的通信，需在UIWebView的Delegate实现中添加代码：

```
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 开启Native和JS通信的开关
    [BeaconHybridInterface enableHybrid:webView enable:YES];

    // 原有的代码
}
```

**2.2.WKWebView控件**

当JavaScript调用灯塔上报事件，需在WKWebView的Delegate实现中添加代码：

```
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    // 处理Beacon混合统计请求的代码
    if ([BeaconHybridInterface handleRequest:navigationAction.request webView:webView]) {
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }

    // 原有的代码
    decisionHandler(WKNavigationActionPolicyAllow);
}
```

* 开启Native和JavaScript的通信，需在WKWebView的Delegate实现中添加代码：

```
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    // 开启Native和JS通信的开关
    [BeaconHybridInterface enableHybrid:webView enable:YES];

    // 原有的代码
}
```

**2.3.HTML页面引用JS文件**

```
<script type="text/javascript" src="http://3gimg.qq.com/mig_op/beacon/js/hybrid/beacon_hybrid.js"></script>
```

**2.4.HTML页面调用Native接口**

* **获取设备ID**

```
var display = function(qimei) {
    alert(qimei);
}
function getQIMEI() {;
    BeaconHybrid.getQIMEI(display);
}
<input type="button" class="btn" value="获取设备ID" id="test1" onclick="getQIMEI();" />
```

* **非实时事件**

```
function onUserAction() {
    BeaconHybrid.onUserAction("testName1");
}
<input type="button" class="btn" value="实时事件" id="test2" onclick="onUserAction();" />
```

* **实时事件**

```
function onDirectUserAction() {
    BeaconHybrid.onDirectUserAction("testName2", {"city":"shenzhen", "country":"china"});
}
<input type="button" class="btn" value="非实时事件" id="test3" onclick="onDirectUserAction();" />
```

* **页面统计**

```
function onPage() {
    BeaconHybrid.onPage();
    window.location = "index2.html";
}
<input type="button" class="btn" value="页面统计" id="test4" onclick="onPage();" />
```

还有疑问？欢迎反馈给<tbeacon@tencent.com>，会有专人为您服务。