H5游戏平台交接文档

# h5游戏平台

h5游戏平台是一个qq，微信第三方都可登录的小游戏平台,内嵌在公众号里

前期开发时需要准备的工作是公众号认证,微信支付申请

主要涉及的关键点是授权登录及微信支付，其他均为调后端接口渲染数据及列表。

目前已暂停维护,接口无数据，本地运行没有测试数据,页面运行后的战士只有静态资源。

##### 注意：本文档只作为工作交接用,并不是正式的游戏平台开发文档，文中技术模块分析不做任何解释，但会对组件参数进行解释

主要模块分为

* 登录、注销、支付

* 首页HOMEPAGE

* 礼包GIFTPAGE

* 社区

* 个人中心 PERSONPAGE

### 登录、注销

登录分为三种登录方式,qq，微信，输入账号登录，

注销即清空localStorage

点击对应不同的登录接口

脚本看vuex下login文件夹里的login.js,调相关api以及根据服务端返回的appid，token值进行路径跳转验证身份

accountType参数为数字，用来与后台沟通区分哪种方式登录的。

commit()方法用来检验用户登录是否符合账号规则

// 用户登录输入信息校验

```

initCheckLogin ({commit}){

commit(INIT_CHECK_LOGIN)

// 微信登录

wechatLogin({commit, router}){

localstorage.remove('token');

localstorage.remove('userId');

localstorage.set('accountType', 9);

window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd5fe9e6452fb6048&redirect_uri=" + config.redirect_uri + "?accountType=9&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";

// wan平台登录

wanLogin({commit}){

localstorage.set('accountType', 1);

router.push('/login/7wan');

// 微信二维码登录

wechatQrcodeLogin(){

localstorage.set('accountType', 10);

window.location.href = "https://open.weixin.qq.com/connect/qrconnect?appid=wx1cab8695f3b6d475&redirect_uri=" + encodeURIComponent(config.redirect_uri + "?accountType=10") + "&response_type=code&scope=snsapi_login&state=68_cache#wechat_redirect"

// QQ 登录

qqLogin(){

localstorage.set('accountType', 7);

var display = wanGameUtil.brower().isMobile() ? 'mobile' : 'pc';

window.location.href = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101349921&redirect_uri=" + encodeURIComponent(config.redirect_uri + "?accountType=7&state=123") + "&display=" + display + "&scope=get_user_info";

```

### pay支付

支付分为三种方式,微信支付，支付宝支付，扫二维码支付

具体视图的代码在view文件夹下pay.vue

需要支付： {{queryVars.money}}元

微信支付

微信扫码支付

支付宝支付

返回游戏

支付的脚本操作具体可以vuex文件夹下的pay文件夹,

问题比较大的是微信支付会比阿里复杂一些,

调用微信的jssdk,测试需要放在正式环境上测试

并且服务端返回一系列相关参数,这里只贴上微信支付需要的参数,具体看pay.js

微信支付的具体流程也可以查看官网api,附上地址：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

var payData = {

appId: "", // 公众号名称，由商户传入

timeStamp: "", // 时间戳

nonceStr: "", // 随机串

package: "",

signType: "", // 微信签名方式

paySign: "", // 微信签名

};

### HOMEPAGE

首页主要是加载列表及轮播图，公告资讯

首页的组件都在components文件夹里,轮播图&公告在home.vue

#### 用户信息

组件名：userInfo

登录方式：微信第三方&qq登录&输入账号登录

##### 相关参数及代码

用户名：nickName头像：icon积分：point默认头像:defaultImageSrc

下载APP

#### 轮播图&公告&资讯

##### 轮播图相关参数 linkUrl：游戏详情页

adPicUrl：图片地址

##### 公告相关参数

资讯模块与公告模块代码类似，没有贴上

linkUrl：公告详情页

title：公告标题

#### 最近在玩 &热门精选列表

组件名：game-icon-list & hot-game-list

##### 相关参数及代码

游戏icon ：icon

游戏名称：title

游戏id : gameId

马上玩

#### 最新小游戏列表

组件名：game-info-item

##### 相关参数及代码

游戏icon ：icon

游戏名称：title

游戏描述: content

游戏开始时间：time

进入

### GIFTPAGE

giftPage分为三个tab,每个tab分别对应的是游戏礼包列表、今日开服的游戏、未来一周开服游戏

关键点是用了infinite-loading预加载的插件,可实现首屏加载8-10条数据,向上刷新则重新加载,无数据则显示相关提示

##### 注意：模块的组件在gifts文件夹,复用组件在component里

#### 礼包列表

组件名:game-gift-list

这里有一个地方是判断礼包是否已领取,如果已领取则显示已领按钮,未领则显示领取按钮可点击,具体代码看组件

##### 相关参数及代码

游戏icon ：icon

礼包名称：title

礼包描述：content

礼包总数：sum

已领礼包：getCount

class="game-enter-button btn btn-default btn-sm">{{comeIn(gift)}}

### 今日开服 & 未来一周

组件名: day-service-list & week-service-list

判断是否已经开服,如果已开服则显示进入按钮,未开服显示开服时间,具体代码看组件

##### 相关参数及代码

游戏icon ：icon

游戏名称：title

游戏区服：zoneName

开服时间：openTime

style="text-align:right;">进入

v-if="!isOpen(day)">{{day.openTime}}

### 社区

点击跳转相关链接

### 个人中心

组件名:person

个人中心是用户信息及用户最近在玩列表

### 文件夹介绍

* api存储接口及ajax调用封装方法

* assets css img文件夹

* components组件文件夹

* utils第三方登录及微信支付等脚本

* view视图构造

* viex各模块对应的model

router.js配置了路由及子页面的跳转组件路径

其他文件夹均为vue-cli脚手架初始化生成,

build为webpack配置

dist是打包生成

config为引入webpack打包准备工作。可以自行了解下vue-cli脚手架

### 后续联系

h5游戏平台交接过程有不明白的地方可以联系

rtx：jo.chan

rtx： karl.zheng

rtx： xiaoyi

H5游戏平台交接文档

需要支付： {{queryVars.money}}元

你可能感兴趣的:(H5游戏平台交接文档)