# WebView js 封装接入指南

---

本文档是对 WebView h5 游戏的 Android Studio 模板工程的说明， [下载模板工程](https://sdkftp.4399doc.com/external/operateBZ/2.4.4/operateBZ-js-2.4.4+40.zip)
工程下有三个模块:

- `app`：由第三方框架 [Tari](https://v2.tauri.org.cn/start) 生成的 h5 游戏模板
- `demo`：使用 Android 原生 WebView 的游戏模板
- `operateBZjs`：对版署 SDK 的 js 封装

在正式接入前，要按其他4399游戏那样注册并获取游戏 id，即 `game key`

## 集成流程

### 引入SDK
- **确认 SDK 版本**：在 `operateBZjs/build.gradle`中
```
dependencies {
    // 运营 SDK，建议使用最新版本，可通过浏览仓库地址或向运营咨询版本
    implementation "cn.m4399.sdk:operateBZ:2.4.4"
}
```

### 调整游戏打包配置
在 app 或 demo 的 `build.gradle` 中

- **修改应用`applicationId`** ：注意不同的游戏包要确定好包名
- **确认并修改版本`versionCode, versionName`**
```
android {
    defaultConfig {
        applicationId "cn.m4399.oeprate.h5demo" // 游戏包名
        versionCode 1                           // 版本数字 
        versionName "1.0.0"                     // 版本名称
    }
}
```

#### AndroidManifest.xml
在 app 或 demo 的 `AndroidManifest.xml` 中

- **修改游戏包名`package`** ：此设置与`applicationId`可以一致
- **修改游戏图标`android:icon`和`android:roundIcon`**
- **修改游戏名`android:label`**

```
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.rpgsample">

    <application
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:theme="@style/AppTheme"
        tools:ignore="UnusedAttribute">
		
</manifest>
```

## 接口调用

### 封装 js 接口
版署 SDK 用 java 开发，而 h5 游戏无法直接调用 java 接口，因此要先将 SDK 接口封装成可被注入到 js 接口类    
具体做法参考 `operateBZjs/src/main/java/com/operatebz/js/OperateBZJsApi`  

游戏可以按需要自由定制

### 注册本地对象

h5 游戏都由某种 WebView 加载，同时也可以注入一个 js 对象，词对象是上面封接口类的示例，比如  

```kotlin
mWebView.addJavascriptInterface(OperateBZJsApi(this, mWebView), "operateBZNativeApi")
```

这之后，游戏 js 脚本中就可以通过 `operateBZNativeApi` 调用接口，如  
```javascript
operateBZNativeApi.initSDK(gameId, screenOrientation, compatNotch, cbName, logoutCbName);
```

但是，为了在游戏代码中调用方便，比如方便参数转换，可以对 `operateBZNativeApi` 再次封装  
具体做法参考 `demo/src/main/assets/js/operateBZ_h5_test.js`  

### 调用 js 接口

游戏代码先引入此 js 文件，如 `demo/src/main/assets/index.html`
```html
<script src="js/operateBZ_h5_test.js" type="text/javascript"></script>
```

此后，可以调用 js 接口，如 `demo/src/main/assets/index.html` 所示

```javascript
function _init(gameId, screenOrientation, compatNotch) {
    operateBZJsApi.init(gameId, screenOrientation, compatNotch, initCallback);
    _setUserListener();
}

function initCallback(code, message) {
    console.log('initCallback')
    console.log(message)
    document.getElementById('ext-board').value=' 状态/状态码：' + code + '\n ' + message;
    if (+code === 0) {
        let isLoggedIn = operateBZJsApi.isLogin();
        if (isLoggedIn) {
            _getUser();
        }
    }
}

_init('40001', 0, true)
```

### 接口调用
以下接口比较重要，接口说明见 `demo/src/main/assets/js/operateBZ_h5_test.js` 的 ·operateBZJsApi· 对象下的方法:  

- `init`：初始化SDK
- `login`：登录
- `isLogin`：是否登录
- `getUser`：获取当前登录账号
- `logout`：登出
- `recharge`：充值
- `getArchive`：获取游戏存档
- `setArchive`：存档
- `getSdkVersion`：获取 SDK 版本

更多信息可以参考原始的 Android java 接口

## 打包

### 签名
游戏应使用`apktool`或 as 生成签名文件，或使用已有签名文件  
并参考`app/build.gradle`中`signingConfigs`定义与使用方式配置打包签名

## 替换游戏包
最后，设置游戏地址或将打包好的游戏拷贝到项目。  
以后一种方式为例，**删除`demo/src/main/assets`下原有所有文件，并将编译好h5游戏文件移动到其下**

完成最后的步骤后，同步项目，即可打包验证