H5游戏接入文档

## 一.适用范围
该SDK适用于果盘H5游戏接入

## 二.如何集成
果盘游戏H5SDK推荐使用标签方式引入JS

```javascript
<script async src="https://h5.guopan.cn/h5-publish/GuoPanSDK.js"></script>
```
1. 请保持 https://h5.guopan.cn/h5-publish/GuoPanSDK.js 域名及路径不变，我们会保持版本最新，请不要下载下来使用，避免受到旧版本的影响
2. 引入类库后,系统会自动调用初始化
3. 调用登录方法,从登录方法的回调中获取用户uid和token
4. 根据场景调用角色上报、支付等其他接口
5. 将集成好的游戏地址链接填入至[果盘开放平台](https://developer.guopan.cn/ "果盘开放平台")获取测试码，`注意：最后提供的游戏地址务必使用https协议`
5. 使用测试码通过调试工具进行接入测试，`注意： H5游戏无法通过浏览器调试，需要依赖测试工具运行`,接入测试工具下载地址: http://downapk.guopan.cn/2025-03-25/663650497f80db9666c2a3e8e70473b0.apk

## 三.接口调用

### 3.1 初始化（必接）
```javascript
var appid = '800018' // 游戏ID，通过火烈鸟开放平台获取
GuoPanSDK.init(appid,function(res){
	const {code,msg} = res
	if(code == 0) {
		console.log("init success")
	}
})
```
回调参数说明：

| 参数名 | 参数类型 | 参数说明  |
| --- | --- | --- |
| code | number | 回调状态，0-成功，其他-失败 |
| msg | string | 回调消息 |

### 3.2 登录（必接）
```javascript
GuoPanSDK.login(function (res) {
	const {code,uid,token} = res
	if(code == 0) {
		console.log("login success")
	}
});
```
回调参数说明：

| 参数名 | 参数类型 | 参数说明  |
| --- | --- | --- |
| code | number | 登录回调状态，0-成功，其他-失败（**失败可以尝试重新调用登录函数**） |
| uid | string | 登录成功返回的用户标识 |
| token | string | 登录成功返回的用户登录态 |

### 3.3 支付（必接）

| 参数名            | 参数类型   | 必填 | 参数说明     |
|----------------|--------|----|----------|
| cp_order_no         | string | 是  | 订单号    |
| item_price        | number | 是  | 商品价格，单位：分，不能为0   |
| item_id     | string | 是  | 商品id |
| item_count    | number | 是  | 商品数量 |
| item_name     | string | 是  | 商品名称 |
| item_des     | string | 是  | 商品描述 |
| role_id       | string | 是  | 角色id     |
| role_name  | string | 是  | 角色名称 |
| role_level  | string | 是  | 角色等级 |
| server_id    | string | 是  | 服务器id |
| server_name    | string | 是  | 服务器名称 |
| reserved   | string | 否  | 透传参数 |

调用示例如下:

```javascript
let payObj = {
	   cp_order_no: "88888888"
	   item_price: 88,
	   item_id: '1',
	   item_count: 1,
	   item_name: '元宝',
	   item_des: '用于抽奖的元宝',
	   role_id: '1',
	   role_name: '张三',
	   role_level: '100',
	   server_id: '1',
	   server_name: '一区'
};
GuoPanSDK.pay(payObj,function(res) {
	const {code,msg} = res
	if(code==0) {
		console.log("pay success")
	}
});
```

回调参数说明：

`注意：支付回调函数的成功与否,应以服务器通知为准`

| 参数名 | 参数类型 | 参数说明  |
| --- | --- | --- |
| code | number | 支付回调状态，0-成功，其他-失败 |
| msg | string | 回调消息 |

### 3.4 角色上报（必接）

调用场景如下：

info_type参数说明：

| 场景            | 值   | 必填 | 备注     |
|----------------|--------|----|----------|
| 进入游戏         | 100 | 是  | 所有必传字段     |
| 等级提升         | 101 | 是  | 所有必传字段    |
| 创建角色       | 102 | 是  | 所有必传字段     |
| 退出游戏   | 103 | 是  | 所有必传字段 |

接口参数说明：

| 参数名            | 参数类型   | 必填 | 参数说明     |
|----------------|--------|----|----------|
| info_type         | string | 是  | 见上述几种情况，根据不同情况传入参数值     |
| player_id         | string | 是  | 角色id，不得超过32个字符     |
| player_nickname       | string | 是  | 角色名称     |
| player_level      | string | 是  | 角色等级     |
| server_id   | string | 是  | 角色所在区服id，不得超过32个字符 |
| server_name | string | 是  | 角色所在区服名称 |
| player_vip      | string | 否  | 玩家VIP等级     |
| player_balance      | string | 否  | 玩家游戏币余额     |
| player_partyname      | string | 否  | 玩家帮派/公会名     |
| player_power      | string | 否  | 玩家战斗力     |
| reserved      | string | 否  | 透传参数     |

调用示例如下:

```javascript
let userObj = {
	"info_type":"100",
	"player_id":"23333",
	"player_nickname":"角色名称",
	"player_level":"12",
	"server_id":"1000",
	"server_name":"区服名称",
	"player_partyname":"玩家帮派",
	"player_vip":"12",
	"player_balance":"0",
	"reserved":""
}
GuoPanSDK.uploadGameRoleInfo(userObj,function (res) {
	const {code,msg} = res
	if(code==0) {
		console.log('uploadGameRoleInfo success ')
	}
});
```

回调参数说明：

| 参数名 | 参数类型 | 参数说明  |
| --- | --- | --- |
| code | number | 上报回调状态，0-成功，其他-失败 |

## 四.其他接入调试指南（可选）

### 4.1 前端Chrome://inspect 调试
1. 通过测试码进入游戏，测试码通过[果盘开放平台](https://developer.guopan.cn/ "火烈鸟开放平台")获取
2.  打开Chrome浏览器，在地址栏中输入chrome://inspect/#devices，确保打钩选中Discover USB devices
3. 在Chrome中找到对应的应用地址，点击inspect进入调试

![](/media/202502/545B08BF-F676-4dc4-81D8-F0D7606D6B57_1739960526.png)