H5客户端

IMPORTANT

本文档介绍U8 H5聚合SDK客户端工程配置，以及部署方式等；H5客户端采用js，html等前端文件，您可以下载XBuilder，VSCode等编辑器进行项目的编辑和管理

项目结构

U8SDK H5客户端源码工程叫u8-h5-client，该工程实际上是一个vue3.0的标准工程格式，首次打开工程，我们可以看到如下的工程结构：

1、 public： 工程编译后，会生成到编译后目录(dist)下的文件；内部有测试游戏html、u8聚合SDK框架的js文件、各个H5渠道接入文件
	--u8sdk.h5.js : U8 H5聚合SDK的js文件
	--u8sdk.test.js: U8母包测试UI的js文件
	--u8sdk.test.parter.js: U8母包测试UI的对外接入js文件
	--channels： 所有H5渠道的接入js文件，都放在这里（不要随意修改目录名称）
		----none.js: 默认空渠道的js接入文件
		----u8sdk.base.js: 母包测试渠道的js接入文件
		----其他文件： 其他H5渠道的js接入文件
		
2、 src： 母包测试UI相关的代码文件
3、 .env： 内部包含测试UI的u8server地址配置
4、 其他文件： 一般不需要改动

参数配置

1、 配置母包测试渠道连的Server地址：

u8-h5-client/.env中，VITE_APP_API_BASE_URL设置为U8Server地址

VITE_APP_API_BASE_URL = https://uniapi.u8sdk.com

2、 配置聚合H5 JS文件中连的U8Server地址：

u8-h5-client/public/js/u8sdk.h5.js中（约第92行），修改U8ServerURL为U8Server地址；修改U8JSURL为你那边聚合H5项目发布后的访问地址/js。

var U8ServerURL = 'https://uniapi.u8sdk.com';       //服务端U8Server地址
var U8JSURL = 'http://oss.u8sdk.com/super/js';         //渠道接入的JS文件存储目录地址（指定到channels目录的父级目录即可）

3、 配置测试游戏的appID和appKey参数：

u8-h5-client/public/game_test.html中，此文件是Demo游戏页面，演示聚合H5 API的调用； appID和appKey从U8后台-》游戏控制台中获取。

//appID, appKey, debug
U8SDK.init(appID, appKey, true, function(data) {
    // 需要在初始化回调后， 才能读取到渠道号
    alert('sdk init success:' + U8SDK.getChannelID())
});

WARNING

如果你不知道如何获取这些参数， 可以参考获取参数文档。

编译运行

进入u8-h5-client目录执行：npm install （如果没有安装nodejs，可以先安装nodejs 16+版本）， 安装依赖。

安装完成后，可以使用如下命令，本地直接开发模式启动：

npm run dev

运行无问题后，可以执行如下命令，编译输出发布目录u8-h5-client/dist目录：

npm run build

编译成功后，在dist目录下生成的就是H5发布文件。

配置和部署H5项目

将上面生成的dist目录下所有的内容， 部署到web服务即可。 比如nginx、 apache、 OSS等。

部署之后，再次检查上面需要修改参数的几个文件中，相应参数是否都改为线上地址。 特别是部署目录/js/u8sdk.h5.js文件中， 如下两个参数：

var U8ServerURL = 'https://uniapi.u8sdk.com';       	//服务端U8Server地址
var U8JSURL = 'http://oss.u8sdk.com/super/js';         //渠道接入的JS文件存储目录地址（指定到channels目录的父级目录即可）