如何创建赛尔手册工具

赛尔手册工具本质上是个网页，搭建一个属于自己的网页即可正常接入到赛尔手册。
如果您知道如何搭建网站并且熟悉html css，js等您可以快速上手赛尔手册工具。

如果您不理解，您可以先了解相关内容
有关如何搭建自己的网站
推荐去淘宝购买一个10元一年的虚拟主机作为自己的初次尝试，简单快捷。
html+CSS+js 相关学习
https://www.bilibili.com/video/BV1Er4y1V7KA/

下面我们主要是说明如何引入JS，完成手册和您的工具网页之间的通信。

我们以下面2个工具作为例子
例子1：工具如何发包，并处理包
工具URL:https://cdnh5.xiaoseer.com/test/send.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>赛尔手册SDK例子2- 钻石使用查看</title>
		
		<style type="text/css">
			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
			}

			.btn-red {
				background-color: #dd524d;
			}

			.btn-yellow {
				background-color: #f0ad4e;
			}

			.desc {
				padding: 10px;
				color: #999999;
			}

		</style>
			    <script type="text/javascript" src="https://cdnh5.xiaoseer.com/test/ByteArray.js"></script>
				<script type="text/javascript" src="https://cdnh5.xiaoseer.com/test/uniapp.js"></script>
				<script type="text/javascript" src="https://cdnh5.xiaoseer.com/test/seer.js"></script>
				<!--你需要引入uniapp , seer 3个js文件-->
	</head>
	<body>

<!--这里是界面，你可以使用css 和 html自己绘制-->

		<div>
			<p class="desc">这里是赛尔手册 SDK例子，点我查看自己2014年起兑换了多少钻石</p>
			<div class="btn-list">
				<button class="btn btn-red" type="button" id="postMessage">点我查看</button>
			</div>
			<button class="btn" type="button" id="back">点我返回赛尔手册</button>
		</div>


<!--这里是js，逻辑部分-->
		<script type="text/javascript">
		  //  这里是监听页面打开，执行操作
			document.addEventListener('UniAppJSBridgeReady', function() {
                
			});


// 			这里是监听 id为 postmessage 的组件被点击执行操作
			document.getElementById('postMessage').addEventListener('click', function() {
			    //这里是发包，发包完毕后返回 packheadinfo 
                game_send_recv_text('00000021310000B3DE00000000000001E90000000100000433').then(
                    (PackHeadInfo) => {
                    //返回的packheadinfo 需要重新用 GetHeadInfo_text 打包一下
                    PackHeadInfo= GetHeadInfo_text(PackHeadInfo.Data_text)
                    //提示
                    alert('收到了包：'+PackHeadInfo.Data_text)
                    //转 ByteArray
		        	var param = new ByteArray(PackHeadInfo.Data_De);
		        	//读取第一个参 无用
		        	param.readUnsignedInt()
		        	//读取第二参数 ，钻石数量
		        	var num =param.readUnsignedInt()
		        	//提示
		        	alert('你兑换过：'+num+' 钻石')
		})

			});
// 			这里是监听 id为 back 的组件被点击执行操作		
			document.getElementById('back').addEventListener('click', function() {
			    //返回上一页
				uni.navigateBack({
					delta: 1
				});
			})
		</script>
	</body>
</html>

例子2：游戏对战处理
工具URL:https://cdnh5.xiaoseer.com/test/battle.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>赛尔手册SDK例子2- 对战例子</title>
		
		<style type="text/css">
			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
			}

			.btn-red {
				background-color: #dd524d;
			}

			.btn-yellow {
				background-color: #f0ad4e;
			}

			.desc {
				padding: 10px;
				color: #999999;
			}

		</style>
			    <script type="text/javascript" src="https://cdnh5.xiaoseer.com/test/ByteArray.js"></script>
				<script type="text/javascript" src="https://cdnh5.xiaoseer.com/test/uniapp.js"></script>
				<script type="text/javascript" src="https://cdnh5.xiaoseer.com/test/seer.js"></script>
				<!--你需要引入uniapp , seer 3个js文件-->
	</head>
	<body>

<!--这里是界面，你可以使用css 和 html自己绘制-->

		<div>
			<p class="desc">这里是赛尔手册 SDK例子，点我对战谱尼</p>
			<div class="btn-list">
				<button class="btn btn-red" type="button" id="postMessage">通用对战1次谱尼</button>
				<button class="btn btn-red" type="button" id="post2">自定义出招对战谱尼</button>
			</div>
			<button class="btn" type="button" id="back">点我返回赛尔手册</button>
		</div>


<!--这里是js，逻辑部分-->
		<script type="text/javascript">
		  //  这里是监听页面打开，执行操作
			document.addEventListener('UniAppJSBridgeReady', function() {
                
			});


// 			这里是监听 id为 postmessage 的组件被点击执行操作
			document.getElementById('postMessage').addEventListener('click', function() {
			    //这里是通用对战， 包 次数 对战延迟 
                battlemethod_common_use('00000015310000A0A90016A86C0000021500001A4A',1,5000).then(count=>{
                    alert('对战全部完成了，次数'+count)
                })

			});


//出招回调，同易语言SDK id为回调类型 battleObject为返回的对象
//id 1 对战结束 battleObject 返回 FightOverInfo 类
//	this._type
// 	this._reason 
// 	this._winnerID
// 	this.isCanSave 
// 	this.twoTimes 
// 	this.threeTimes 
// 	this.autoFightTimes 
// 	this.btlDetectTimes 
// 	this.energyTimes 
// 	this.learnTimes 
// 	this._deltaTopLv 
// 	this._daltaTopHonour 
// 	this.maxH 
// 	this.totalH 
// 	this._roundNum 

//id 0 对战出招 battleObject 返回 UseSkillInfo 类 
//	this.firstAttackInfo
//	this.secondAttackInfo 
//firstAttackInfo 包括·
//	this.userid 
// 	this._skillID
// 	this._round 
// 	this._atkTimes 
// 	this._lostHP 
// 	this._realHurtHp 
// 	this._gainHP 
// 	this._remainHp 
//this._maxHp 
//	this._state 
//	this._petStatus 
// 	this._skillList = []; 为数组 每个元素为字典包括 id 和pp

//第一次出招 返回FightPetInfo类 包括pet1 pet2
//

//id 3 切换精灵 battleObject 返回 ChangePetInfo 类
// this.userid 
// 	this.id 
// 	this.catchtime 
// 	this._petName 
// 	this._level 
// 	this.hp 
// 	this._maxHp 
// 	this._skillList = [];
    function battlemethod_callback_use5(id,battleObject,info_mypet,info_otherpet){
        if (id == 0)
    		battle_useskill(0)
    	else if (id == 3)
    		battle_changepet(0)
    }
    
    //自动84
    function battlemethod_callback_use84(id,battleObject,info_mypet,info_otherpet){
        //判断是否为出招回调
        if (id == 0){
           	if (info_mypet.id == 3512) // 表姐
			    battle_useskill(31505);
			else if (info_mypet.id == 3329 || info_mypet.id == 3045)
			    battle_useskill(19314);
			else
			    battle_useskill(0)
        }
    	else if (id == 3)
    		battle_changepet([3329, 3045],true)
    }
// 			这里是监听 id为 post2 的组件被点击执行操作
			document.getElementById('post2').addEventListener('click', function() {
			    //这里是通用对战，同易语言SDK，   包 次数 对战延迟 ，出招回调
                battlemethod_common_use('00000015310000A0A90016A86C0000021500001A4A',1,5000,battlemethod_callback_use84).then(count=>{
                    alert('对战全部完成了，次数'+count)
                })

			});
// 			这里是监听 id为 back 的组件被点击执行操作		
			document.getElementById('back').addEventListener('click', function() {
			    //返回上一页
				uni.navigateBack({
					delta: 1
				});
			})
		</script>
	</body>
</html>