# h5游戲平臺
h5游戲平臺是一個qq胜榔，微信第三方都可登錄的小游戲平臺,內嵌在公眾號里
前期開發(fā)時需要準備的工作是公眾號認證,微信支付申請
主要涉及的關鍵點是授權登錄及微信支付，其他均為調后端接口渲染數(shù)據(jù)及列表湃番。
目前已暫停維護,接口無數(shù)據(jù)吠撮，本地運行沒有測試數(shù)據(jù),頁面運行后的戰(zhàn)士只有靜態(tài)資源泥兰。
##### 注意：本文檔只作為工作交接用,并不是正式的游戲平臺開發(fā)文檔担孔，文中技術模塊分析不做任何解釋拌消，但會對組件參數(shù)進行解釋
主要模塊分為
* 登錄安券、注銷墩崩、支付
* 首頁HOMEPAGE
* 禮包GIFTPAGE
* 社區(qū)
* 個人中心 PERSONPAGE
### 登錄、注銷
登錄分為三種登錄方式,qq址貌，微信铐拐，輸入賬號登錄，
注銷即清空localStorage
點擊對應不同的登錄接口
? ? ?腳本看vuex下login文件夾里的login.js,調相關api以及根據(jù)服務端返回的appid练对，token值進行路徑跳轉驗證身份
? ? accountType參數(shù)為數(shù)字遍蟋，用來與后臺溝通區(qū)分哪種方式登錄的。
? ? commit()方法用來檢驗用戶登錄是否符合賬號規(guī)則
? ? ? // 用戶登錄輸入信息校驗
```
initCheckLogin ({commit}){
commit(INIT_CHECK_LOGIN)
},
? ? ? // 微信登錄
wechatLogin({commit, router}){
localstorage.remove('token');
localstorage.remove('userId');
localstorage.set('accountType', 9);
window.location. + 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. + 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. + encodeURIComponent(config.redirect_uri + "?accountType=7&state=123") + "&display=" + display + "&scope=get_user_info";
},
```
### pay支付
? 支付分為三種方式,微信支付螟凭，支付寶支付虚青，掃二維碼支付
? 具體視圖的代碼在view文件夾下pay.vue
需要支付： {{queryVars.money}}元
? ? ? ? ? ? ? ? 微信支付
? ? ? ? ? ? ? ? 微信掃碼支付
? ? ? ? ? ? ? ? 支付寶支付
? ? ? ? ? ? ? ? 返回游戲
? 支付的腳本操作具體可以vuex文件夾下的pay文件夾,
問題比較大的是微信支付會比阿里復雜一些,
調用微信的jssdk,測試需要放在正式環(huán)境上測試
? 并且服務端返回一系列相關參數(shù),這里只貼上微信支付需要的參數(shù),具體看pay.js
微信支付的具體流程也可以查看官網(wǎng)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登錄&輸入賬號登錄
##### 相關參數(shù)及代碼
用戶名 ：nickName頭像? ：icon積分? ：point默認頭像:defaultImageSrc
{{user.nickName ? decodeURIComponent(user.nickName) : ""}}
{{user.point}}
? ? ? ? ? ? ? ? 下載APP
####? 輪播圖&公告&資訊
? ##### 輪播圖相關參數(shù)? ? ? linkUrl：游戲詳情頁
? adPicUrl：圖片地址
? ##### 公告相關參數(shù)
? ? 資訊模塊與公告模塊代碼類似挟憔，沒有貼上
? linkUrl：公告詳情頁
? title：公告標題
{{notice.title}}
####? 最近在玩 &熱門精選? 列表
? ? 組件名：game-icon-list & hot-game-list
##### 相關參數(shù)及代碼
? ? 游戲icon? ：icon
? ? 游戲名稱? ：title
? ? 游戲id? ? : gameId
{{game.title}}
? ? ? ? ? ? ? 馬上玩
#### 最新小游戲列表
? ? 組件名：game-info-item
#####? 相關參數(shù)及代碼
? ? 游戲icon? ：icon
? ? 游戲名稱? ：title
? ? 游戲描述: content
? ? 游戲開始時間? ：time
{{game.title}}
{{game.content}}
{{game.time}}
? ? ? ? 進入
### GIFTPAGE
giftPage分為三個tab,每個tab分別對應的是游戲禮包列表钟些、今日開服的游戲烟号、未來一周開服游戲
關鍵點是用了infinite-loading預加載的插件,可實現(xiàn)首屏加載8-10條數(shù)據(jù),向上刷新則重新加載,無數(shù)據(jù)則顯示相關提示
##### 注意：模塊的組件在gifts文件夾,復用組件在component里
#### 禮包列表
? ? ? 組件名:game-gift-list
? ? ? 這里有一個地方是判斷禮包是否已領取,如果已領取則顯示已領按鈕,未領則顯示領取按鈕可點擊,具體代碼看組件
##### 相關參數(shù)及代碼
? ? ? ? ? 游戲icon? ：icon
? ? ? ? ? 禮包名稱? ：title
? ? ? ? ? 禮包描述? ：content
? ? ? ? ? 禮包總數(shù)? ：sum
? ? ? ? ? 已領禮包? ：getCount
{{gift.title}}
{{gift.content.substring(0,16)}}
? ? ? ? ? ? ? 更多
{{message(gift)}}
class="game-enter-button btn btn-default btn-sm">{{comeIn(gift)}}
### 今日開服 & 未來一周
? ? ? 組件名: day-service-list & week-service-list
? ? ? 判斷是否已經(jīng)開服,如果已開服則顯示進入按鈕,未開服顯示開服時間,具體代碼看組件
##### 相關參數(shù)及代碼
? ? ? ? ? 游戲icon? ：icon
? ? ? ? ? 游戲名稱? ：title
? ? ? ? ? 游戲區(qū)服? ：zoneName
? ? ? ? ? 開服時間? ：openTime
{{day.title}}
{{day.zoneName}}
{{openMsg(day)}}
? ? ? ? ? ? ? ? ? style="text-align:right;">進入
v-if="!isOpen(day)">{{day.openTime}}
### 社區(qū)
? ? 點擊跳轉相關鏈接
### 個人中心
? ? 組件名:person
? ? 個人中心是用戶信息及用戶最近在玩列表
### 文件夾介紹
* api存儲接口及ajax調用封裝方法
* assets? ? ? css img文件夾
* components組件文件夾
* utils第三方登錄及微信支付等腳本
* view視圖構造
* viex各模塊對應的model
router.js配置了路由及子頁面的跳轉組件路徑
其他文件夾均為vue-cli腳手架初始化生成,
build為webpack配置
dist是打包生成
config為引入webpack打包準備工作绊谭。可以自行了解下vue-cli腳手架
### 后續(xù)聯(lián)系
h5游戲平臺交接過程有不明白的地方可以聯(lián)系
rtx：jo.chan?
rtx： karl.zheng?
rtx： xiaoyi
