dwdoc/web: Web前端框架、Web前端入门 @ faae46a13e8e950264aa3192b5163e606183b9e1

多玩游戏大厅（珠海页游）

多玩游戏大厅是fis3构建和打包（Webpack不支持IE8），通过avalon配合JQuery实现视图的逻辑(Vue和React都不支持)。页面跳转是通过多页面实现的(不是一个单页面应用)。

开发人员

康志鸿百醇唐喜君杜文华

项目地址

svn://svn.webdev.ouj.com/biz/page_game/trunk/web

技术栈

环境依赖： node6+ , fis3 ,mod.js
开发技术： JQuery , avalon, sass

项目域名

项目结构

|- 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 }
    })
  },

// 多玩游戏大厅/模板管理/广告数据
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可以实现对整个HTML文件的引入
background（url?__sprite）实现对图片进行整合成雪碧图

page文件夹中的hezi和popup

|- page //  hezi和lolbox是通过channel这个参数去识别  var channel = getParam('channel') || 'lol'
    |- hezi   // 坦克世界和dnf
    |- lolbox // lol盒子和旧版dnf
    |-...
    |- popup  // 都是大厅里面的弹窗
    |- propCenter // 道具中心在盒子client中广告中体现(暂时)

暂时遇到的坑(或者你有更好的解决方法，欢迎提issue)

游戏是通过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中广告中体现(暂时)

window.open 打开异步获取的链接或被浏览器adblock拦截

① 失败尝试 -异步前先打开一个空窗口，然后在window赋值，在普通浏览器可以解决被adblock拦截的情况但是在盒子赋值打开的链接不是同一个浏览器了，window的对象已经发生改变，导致用户访问了一个空白页面
②加个a标签动态赋值，然后js模拟点击，尝试打开（还没尝试） ```

webGame.md 5.5 KB Verlauf Originalformat

多玩游戏大厅（珠海页游）

开发人员

项目地址

技术栈

项目域名

项目结构

sdk

混入方法

上报

广告

备注

webGame.md 5.5 KB

Verlauf Originalformat