webGame.md 3.5 KB
多玩游戏大厅（珠海页游）
多玩游戏大厅是fis3构建和打包（Webpack不支持IE8），通过avalon配合JQuery实现视图的逻辑(Vue和React都不支持)。页面跳转是通过多页面实现的(不是一个单页面应用)。
开发人员
- 康志鸿 百醇 唐喜君 杜文华
技术栈
- 环境依赖 ： node6+ , fis3 ,mod.js
- 开发技术 ： JQuery , avalon, sass
项目域名
环境 | 域名
-|-
正式环境 |http://wan.duowan.com
测试环境 |http://test-wan.duowan.com
预发环境 |http://new-wan.duowan.com
项目结构
|- src
|- api --- 通用的http请求api(封装http请求)
|- modules --- 按模块分类的api
|- assets --- 静态资源文件(图片)
|- components --- 不同模块对应的小组件
|- lib --- 项目引入的第三方库
|- mixins --- 全局混合
|- modules --- 封装的插件(lazhload,md5,qrcode...)
|- page --- 页面代码
|- 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的内容)`)
上报
- 大厅统计pv/uv地方加上date-gid,data-poskey,data-dwgameclick标志,对应的方法
- loginGame接口里面第三个参数(userSource)标志用户的来源，做到上报的
getLoginGame ({ gid, sid, userSource }) {
return ax.get('/loginGame.do', {
params: { gid, sid, userSource }
})
},
广告
- 在发布器中，对应项目中的模板中会可以看到对应的广告。增加广告或者是删除广告等。
备注
fis的语法
?__inline可以实现对整个HTML文件的引入background（url?__sprite）实现对图片进行整合成雪碧图
暂时遇到的坑
游戏是通过iframe承载的，假如需要在游戏上面添加覆盖元素，要将覆盖的元素最下方添加一个空的iframe，设置z-index都是无效的
上报的时候，在点击关闭的时候触发onbeforeunload的方法。这个方法在JQuery引入的情况下，Chrome，Firefox浏览器都不能直接使用要套在JQuery方法里面才能使用
$(window).load(function () {
window.onunload = function () {
_this.gameReport()
return "Are you sure"
}
})
page文件夹中的hezi和popup
|- page // hezi和lolbox是通过channel这个参数去识别 var channel = getParam('channel') || 'lol'
|- hezi // 坦克世界和dnf
|- lolbox // lol盒子和旧版dnf
|-...
|- popup // 都是大厅里面的弹窗
|- propCenter // 道具中心在盒子client中广告中体现(暂时)