珠海页游

otherProgram/webGame.md

@@ -1,21 +1,21 @@
-## 多玩游戏大厅（珠海页游）
+# 多玩游戏大厅（珠海页游）
 
 > 多玩游戏大厅是fis3构建和打包（Webpack不支持IE8），通过avalon配合JQuery实现视图的逻辑(Vue和React都不支持)。页面跳转是通过多页面实现的(不是一个单页面应用)。
 
-### 开发人员
+## 开发人员
 
 - 康志鸿 百醇 唐喜君 杜文华
 
-### 项目地址
+## 项目地址
 
 - svn://svn.webdev.ouj.com/biz/page_game/trunk/web
 
-### 技术栈  
+## 技术栈  
 
 - 环境依赖 ： node6+ , fis3 ,mod.js
 - 开发技术 ： JQuery , avalon, sass  
 
-### 项目域名  
+## 项目域名  
 
 环境 | 域名  
 -|-
@@ -23,7 +23,7 @@
 测试环境 |[http://test-wan.duowan.com](http://test-wan.duowan.com)  
 预发环境 |[http://new-wan.duowan.com](http://new-wan.duowan.com)
 
-### 项目结构  
+## 项目结构  
 
 ```Text
 |- src
@@ -32,21 +32,22 @@
     |- assets                     --- 静态资源文件(图片)
     |- components                 --- 不同模块对应的小组件
     |- lib                        --- 项目引入的第三方库
-    |- mixins                     --- 全局混合
+    |- 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               // 多玩游戏充值协议
-
-      |- agreement               // 多玩游戏充值协议
+      |- 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                        --- 模板
@@ -55,13 +56,13 @@
 |- fis-conf.js                    --- fis配置文件
 ```
 
-### sdk
+## sdk
 
-- ```sdk/index```文件保存全局方法，分别给游戏大厅，游戏盒子交互的。
+```sdk/index```文件保存全局方法，分别给游戏大厅，游戏盒子交互的。
 
-### 混入方法  
+## 混入方法  
 
-- ```mixins/index```文件是全局混入的方法，在avalon定义VM的时候要通过underscore的extend方法扩展。
+```mixins/index```文件是全局混入的方法，在avalon定义VM的时候要通过underscore的extend方法扩展。
 
 ```JS
 import _ from "underscore"
@@ -69,28 +70,63 @@ var vm = avalon.define(_.extend({
 
 }),`mixins(这里加mixins的内容)`)
 ```
+提供公共方法
 
-### 上报
+```js
+checkLogin  --- 检测页面登录态
+onEnterGame ---进入游戏（要登录态）
+onEnterGameWithoutLogin ---进入游戏（不检测登录）
+onChoiceServer ---选服
+```
+## 上报方式
+
+1.多玩通用统计-目前用于自定义页游广告点击
 
-- 大厅统计pv/uv地方加上date-gid,data-poskey,data-dwgameclick标志,对应的方法
+2.大厅统计pv/uv地方加上date-gid,data-poskey,data-dwgameclick标志,对应的方法
 
 [![avatar](../image/webgame.png)](../image/webgame.png)
 
-- loginGame接口里面第三个参数(userSource)标志用户的来源，做到上报的
+3.loginGame接口里面第三个参数(userSource)标志用户的来源，做到上报的
 
 ```JS
   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引入游戏页面，游戏链接都是有时效性&登录态的，故从接口拿
 
-> 广告部分暂时有两个自定义的广告位置，一个是右上角的，有个是右边侧边栏，对应接口是一个静态的JSON文件。修改图片链接或者是其他都在JSON文件中直接修改
+2.里面含上报,任务上报和时长上报（看上面上报那点）
 
-```JSON
+## 广告
+
+广告部分暂时有两个自定义的广告位置，一个是右上角的，有个是右边侧边栏，对应接口是一个静态的JSON文件。修改图片链接或者是其他都在JSON文件中直接修改
+
+模板位置：
+
+![avatar](../image/cms61.png)
+
+```js
 // 多玩游戏大厅/模板管理/广告数据
 jsonp_dwDa({
   //web顶部导航-图文广告300*76
@@ -116,9 +152,9 @@ jsonp_dwDa({
 
 [![avatar](../image/webgame1.png)](../image/webgame1.png)
 
-### 备注  
+## 备注  
 
-> 项目启动
+### 项目启动
 
 - 安装选择的时候直接选fis-parser-node-sass
 - 配置host，需要多玩域记录登录状态
@@ -128,18 +164,20 @@ jsonp_dwDa({
 127.0.0.1  yournickname.duowan.com 
 ```
 
-> fis的语法
+### fis的语法
 
-- ```?__inline```可以实现对整个HTML文件的引入  
+- ```?__inline```可以实现对整个外部文件的引入,eg:html  
 
 - ```background（url?__sprite）```实现对图片进行整合成雪碧图
 
 
-> 暂时遇到的坑(或者你有更好的解决方法，欢迎提issue)
+### 暂时遇到的坑(或者你有更好的解决方法，欢迎提issue)
+
+1.游戏是通过iframe承载的，元素分为窗口元素和无窗口元素，在ie下窗口元素在最高层级的，设置z-index都是无效的，假如需要在游戏上面添加覆盖元素，要将覆盖的元素最下方添加一个空的iframe  
 
-- 游戏是通过iframe承载的，假如需要在游戏上面添加覆盖元素，要将覆盖的元素最下方添加一个空的iframe，设置z-index都是无效的  
+***参考*** web端游戏页游戏助手
 
-- 上报的时候，在点击关闭的时候触发onbeforeunload的方法。这个方法在JQuery引入的情况下，Chrome，Firefox浏览器都不能直接使用要套在JQuery方法里面才能使用  
+2.上报的时候，在点击关闭的时候触发onbeforeunload的方法。这个方法在JQuery引入的情况下，Chrome，Firefox浏览器都不能直接使用要套在JQuery方法里面才能使用  
 
 ```JS
 $(window).load(function () {
@@ -149,20 +187,8 @@ $(window).load(function () {
     }
 })
 ```
+3.window.open 打开异步获取的链接或被浏览器adblock拦截
 
-- page文件夹中的hezi和popup
-
-```Text
-|- 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模拟点击，尝试打开 ***结果*** 依旧被adblock拦截
+- **失败尝试1** - 异步前先打开一个空窗口，然后在window赋值，在普通浏览器可以解决被adblock拦截的情况 ***但是*** 在盒子赋值打开的链接不是同一个浏览器了，window的对象已经发生改变，导致用户访问了一个空白页面   
+- **失败尝试2** - 加个a标签动态赋值，然后js模拟点击，尝试打开 ***结果*** 依旧被adblock拦截
 ```