# 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
{{user.nickName ? decodeURIComponent(user.nickName) : ""}}
{{user.point}}
下载APP
#### 轮播图&公告&资讯
##### 轮播图相关参数 linkUrl：游戏详情页
adPicUrl：图片地址
##### 公告相关参数
资讯模块与公告模块代码类似，没有贴上
linkUrl：公告详情页
title：公告标题
{{notice.title}}
#### 最近在玩 &热门精选 列表
组件名：game-icon-list & hot-game-list
##### 相关参数及代码
游戏icon ：icon
游戏名称 ：title
游戏id : gameId
{{game.title}}
#### 最新小游戏列表
组件名：game-info-item
##### 相关参数及代码
游戏icon ：icon
游戏名称 ：title
游戏描述: content
游戏开始时间 ：time
{{game.title}}
{{game.content}}
{{game.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
{{openMsg(day)}}
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
网友评论