# 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>，会有专人为您服务。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://beacon-help.gitbook.io/beacon-help/sdk-wen-dang/sdkji-cheng-zhi-nan/hybridjie-ru-zhi-nan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.