# 多玩游戏大厅（珠海页游）
多玩游戏大厅是 fis3 构建和打包（Webpack 不支持 IE8），通过 avalon 配合 JQuery 实现视图的逻辑(Vue 和 React 都不支持)。页面跳转是通过多页面实现的(不是一个单页面应用)。
# 开发人员
- 康志鸿 百醇 唐喜君 杜文华
# 项目地址
- svn://svn.webdev.ouj.com/biz/page_game/trunk/web
# 技术栈
- 环境依赖 ： node6+ , fis3 ,mod.js
- 开发技术 ： JQuery , avalon, sass
# 项目域名
| 环境 | 域名 |
|---|---|
| 正式环境 | http://wan.ouj.com (opens new window) |
| 测试环境 | http://test-wan.ouj.com (opens new window) |
| 预发环境 | http://new-wan.ouj.com (opens new window) |
# node版本
"node": "6.11.5"
# 项目结构
|- src
|- api --- 通用的http请求api(封装http请求)
|- modules --- 按模块分类的api
|- assets --- 静态资源文件(图片)
|- components --- 不同模块对应的小组件
|- lib --- 项目引入的第三方库
|- mixins --- 全局混合(按需引入)
|- modules --- 封装的插件(lazhload,md5,qrcode...)
|- page --- 页面代码
|- bt --- bt页游
|- fcm --- 防沉迷
|- hezi --- 目前dnf旧版&新版盒子，lol盒子,坦克世界盒子左侧游戏tab入口（2个尺寸）
|- lolbox --- lol盒子和旧版dnf
|- box --- 坦克世界盒子和新版dnf
|- index --- 首页
|- popup --- 多玩游戏大厅盒子-内嵌webview弹窗页面
|- propCenter --- 道具中心-主要入口为运营推广广告
|- self --- 多玩游戏大厅盒子-左侧个人中心
|- agreement.html --- 多玩游戏充值协议
|- asset.html --- 各页面通用配置-若js没有<!--ignore-->标志会自动编译到下面的
|- index.html --- 首页
|- list.html --- 游戏列表-精品游戏
|- sdk --- 全局对象DW_APP_SDK 用于调用SDK的API
|- style --- 样式表(components,modules,page)
|- tpl --- 模板
|- typeing --- 类型检查
|- eslintrc.js --- eslint配置文件
|- fis-conf.js --- fis配置文件
# sdk
sdk/index文件保存全局方法，分别给游戏大厅，游戏盒子交互的。
# 混入方法
mixins/index文件是全局混入的方法，在 avalon 定义 VM 的时候要通过 underscore 的 extend 方法扩展。
import _ from "underscore"
var vm = avalon.define(_.extend({
}),`mixins(这里加mixins的内容)`)
提供公共方法
checkLogin --- 检测页面登录态
onEnterGame ---进入游戏（要登录态）
onEnterGameWithoutLogin ---进入游戏（不检测登录）
onChoiceServer ---选服
# 上报方式
1.多玩通用统计-目前用于自定义页游广告点击
2.大厅统计 pv/uv 地方加上 date-gid,data-poskey,data-dwgameclick 标志,对应的方法
3.loginGame 接口里面第三个参数(userSource)标志用户的来源，做到上报的
getLoginGame ({ gid, sid, userSource }) {
return ax.get('/loginGame.do', {
params: { gid, sid, userSource }
})
}
4.游戏页
- 任务上报 判断是否有 channel 参数（道具中心来源），然后获取道具中心的对应任务，匹配则在结束时上报
- 时长上报 关闭浏览器 tab 页时上报游戏时长，暴露上报方法给大厅盒子检测用户关闭时调用上报
5....
# 充值
1.充值页，大厅盒子充值弹框，游戏页充值弹框都为同一个组件
2.默认帮用户选择游戏和区服（通过链接的&game_code=DZ&server_code=s4 主动选择）
3.初始化方法暴露了一个 initPayPopup 方法，主要用于引入的页面主动调起初始化，避免多余请求
4.微信支付是后端返回一个支付链接前端生成二维码，支付宝支付则是后端返回支付宝的页面，前端通过 iframe 引入再用 css 调整显示二维码位置
# 游戏页
1.iframe 引入游戏页面，游戏链接都是有时效性&登录态的，故从接口拿
2.里面含上报,任务上报和时长上报（看上面上报那点）
# 广告
广告部分暂时有两个自定义的广告位置，一个是右上角的，有个是右边侧边栏，对应接口是一个静态的 JSON 文件。修改图片链接或者是其他都在 JSON 文件中直接修改
模板位置：
// 多玩游戏大厅/模板管理/广告数据
jsonp_dwDa({
//web顶部导航-图文广告300*76
headerRight: {
title: "xx",
clientLink: "http://www.duowan.com/", // 客户端打开的链接
webLink: "http://pgame.duowan.com/dwgame.html", // web downLoad的链接
img: "http://img.dwstatic.com/yxdt/adPic/1907topright.png",
report: "dwgame_nav_youshangjiao" //上报id
},
//主页-右侧广告-宽250
mainRight: {
title: "xx",
clientLink: "dwgame://yygame", // 客户端打开的链接
webLink: "http://wan.yy.com/", // web 打开的链接
img: "http://img.dwstatic.com/yxdt/adPic/1906right.jpg",
report: "dwgame_main_youce" //上报id
}
});
- 在发布器中，对应项目中的模板中会可以看到对应的广告。增加广告或者是删除广告等。
# 备注
# 项目启动
- 安装选择的时候直接选 fis-parser-node-sass
- 配置 host，需要多玩域记录登录状态
// hosts文件在C:\Windows\System32\drivers\etc
127.0.0.1 yournickname.duowan.com
# fis 的语法
?__inline可以实现对整个外部文件的引入,eg:htmlbackground（url?__sprite）实现对图片进行整合成雪碧图
# 暂时遇到的坑(或者你有更好的解决方法，欢迎提 issue)
1.游戏是通过 iframe 承载的，元素分为窗口元素和无窗口元素，在 ie 下窗口元素在最高层级的，设置 z-index 都是无效的，假如需要在游戏上面添加覆盖元素，要将覆盖的元素最下方添加一个空的 iframe
参考 web 端游戏页游戏助手
2.上报的时候，在点击关闭的时候触发 onbeforeunload 的方法。这个方法在 JQuery 引入的情况下，Chrome，Firefox 浏览器都不能直接使用要套在 JQuery 方法里面才能使用
$(window).load(function () {
window.onunload = function () {
_this.gameReport()
return "Are you sure"
}
})
3.window.open 打开异步获取的链接或被浏览器 adblock 拦截
- 失败尝试 1 - 异步前先打开一个空窗口，然后在 window 赋值，在普通浏览器可以解决被 adblock 拦截的情况 但是 在盒子赋值打开的链接不是同一个浏览器了，window 的对象已经发生改变，导致用户访问了一个空白页面
- 失败尝试 2 - 加个 a 标签动态赋值，然后 js 模拟点击，尝试打开 结果 依旧被 adblock 拦截
← hi运动商城