[关闭]
@shenguotao 2018-01-25T18:07:36.000000Z 字数 16079 阅读 1091

广告到达页开发指南

概述

什么是广告到达页？

广告到达页也是一种静态的 WEB页面，它与普通静态页面的区别在于，它内嵌了一个注册功能，并以广告的形式投放在一些比较热门的游戏平台或者是社区上，例如：5173、17173、多玩游戏、百度游戏等等。通过在以上平台投放广告，借助他们的流量，将浏览者接入到我们的页面（广告到达页）中，从而提高注册量，增加我们的用户群体。

img1.jpg-33.1kB

既然是以广告的形式投放，那么烧钱是肯定的，既然是烧钱的，那么在做页面的时候，也一定要仔细再仔细，小心再小心。
本篇“广告到达页开发指南”不会以具体的教程形式来教你如何编码或者是如何制作页面，而是建立在大纲层面上，重点向你阐述“到达页”的形式、结构，以及制作时提供的参考意见，列出值得注意的事项，开发时值得详细说明的功能。

广告到达页的地址

“广告到达页”存放在 http://hd.[game].iwgame.com 域名下，hd 三级域名表示为“活动”的意思，而 game则是代指，它根据不同游戏产品其名称也不相同，例如天之禁1是 "tzj"、天之禁2是 "tzj2"、权御是"qy"、守护神是 "shs" 所以，我们每个游戏都有属于自己的到达页地址，例如：

#权御下的某个到达页地址。
http://hd.qy.iwgame.com/360/36001/
#天之禁1下的某个到达页地址。
http://hd.tzj.iwgame.com/5173/517306/
#天之禁2下的某个到达页地址。
http://hd.tzj2.iwgame.com/baidu/bd03/

你完全可以自己打开上述链接，实际感受下广告到达页的形式。
在项目的命名上，我们习惯将页面所要投放的平台加上当前制作的这版广告到达页是该平台下的第几版来结合进行命名。
例如：

http://hd.qy.iwgame.com/360/36001/ #36001 说明这是360游戏平台下的第1版广告到达页
http://hd.tzj.iwgame.com/5173/517306/ #517306 说明这是5173下的第6版广告到达页

注意，.com是我们的正式地址，把 .com 改成 .test 后便可以访问对应的测试地址（当然你得在公司的内部网络中）。

http://hd.qy.iwgame.test/360/36001/
http://hd.tzj.iwgame.test/5173/517306/
http://hd.tzj2.iwgame.test/baidu/bd03/

广告到达页的组成要素

就如生活充满套路，“广告到达页”也是如此，为了吸引用户注册，运营方会把能够吸引人眼球的游戏元素使劲的加入到广告到达页中。例如游戏的角色介绍，游戏内的场景截图，礼包宣传图片或者是一些奖品的滚动信息等等。
基本上来说，一个“广告到达页”会有以下组成部分，首先是头部，头部总会有一张游戏的概念图，而常常包含的内容有：Slogn文字、活动标题、相关的时间点信息、礼包奖品说明文字等。

img2.png-239.3kB

接着就是我们页面最重要的地方，那就是“注册”。而礼包或者是奖品的说明通常都是伴随“注册”出现的好基友！

img3.png-120kB

为了提高吸引力或者是关注度，像“角色以及职业的说明”、“游戏场景截图”、“游戏概念宣传”等基本上都是“广告到达页”的必备套路了

OCC.png-224.8kB

最后，“注册”，“下载”两不误，毕竟我们更希望的结果是，用户不仅注册了，还会下载我们的游戏，然后去体验游戏。

donload_03.png-111.4kB

总的来说，上面我列举的一些内容，基本上是所有“广告到达页”都具有的内容，我的意思是说，虽然“广告到达页”的形式并非都是上面那种，但是每个“广告到达页”基本上都会包含上述内容以及元素。

为什么要介绍这些？因为我希望能给你一种全面的感觉(或者说混个脸熟)，其次最重要的就是结合我下章“开始编写”要说的内容，在切页面的时候，明白该怎么最优的方式去切页面，明白要准备哪些功能(例如轮播图、文字滚动效果)等，从而提高我们的开发效率，减少后期频繁修改情况。

生成项目目录

由于我们的项目使用到了 gulp这种前端自动化工具，因此我们需要特定的目录结构以及一些特殊的依赖文件，但是，如果每次都要我们自己去手动建立这些目录或者是反复拷贝粘贴这些依赖文件，那么将是一件很麻烦的事情，而且还容易出错。
所以，如果我们能建立一个通用的项目目录结构并包含了依赖文件，然后存放在远程服务器上，当我们需要的时候，通过某种方式，从远程直接拷贝下来然后使用，避免自己手动建立项目，我想，这必然会是一种非常好的解决方案，而下面，我们要说的就是如何通过命令的方式来复制远程的模板目录到本地建立自己新的项目。

首先，你需要安装一些环境，比如，NODE,JADK,MAVN等。这里，请仔细按照下面的教程去安装即可。

http://wiki.iwgame.tec/pages/viewpage.action?pageId=22424058

当必备的环境与软件安装好后，我们在“命令行工具”中去执行下面的命令，并输入对应的参数，便可以在本地创建一个目录。

  1. mvn archetype:generate -DarchetypeGroupId=com.iwgame.xweber -DarchetypeArtifactId=xweber-hd-archetype -DarchetypeVersion=1.0.12 -Dversion=1.0.0-SNAPSHOT -X

下面时是命令执行时需要输入的参数说明：
groupId: 项目所属的group，即所属游戏，例如天之禁2就是 : hd.tzj2.iwgame.com
下面是其它游戏的group:

hd.shs.iwgame.com （守护神）
hd.tzj.iwgame.com （天之禁）

artifactId: 项目的具体名称，在命名上请根据上面我对广告到达页的命名的说明进行命名，例如这里以bd04为例。
package: 不用填，直接回车即可。

到了这里，我们便会在本地就会生成一个 bd04的项目，其目录结构以及所包含的资源文件如下：

bd04
　|-- assets
　　|-- css
　　|-- img
　　|-- js
　　|-- lib
　　|-- music
　　|-- index.html
|-- .gitignore
|-- .gitlab-ci.yml
|-- config.js
|-- gulpfile.js
|-- package.json
|-- pom.xml

assets
assets 目录用于存放我们编写的代码和资源文件。我们的html、css、js、images等都保存在其中。

.gitignore
.git的忽略文件。

.gitlab-ci.yml
.gitlab-ci.yml 是 gitlab CI (Continuous Integration）持续集成系统的配置文件，放在项目的根目录，用于规定 GitLab-Runner的作业方式。简单的说，我们每次向 gitlab push代码（代码有变动），都会让 GitLab-CI去解析这个文件，再根据其中的配置去调用 runner来重新打包（或者编译)和处理我们提交的代码。

config.js
gulp执行的配置文件。

gulpfile.js
gulp执行的核心文件，gulp要执行的功能都编写在其中。

package.json
用于管理gulp所依赖的npm包以及模块。

pom.xml
pom (Project Object Model) 即“项目对象模型”的简称，它是MAVN项目中必备的文件，类似于NPM中的 package.json。用于管理 Maven项目的信息以及项目的依赖。
一个最简单的 pom.xml的定义必须包含modelVersion、groupId、artifactId和version这四个元素，当然这其中的元素也是可以从它的父项目中继承的。在Maven中，使用groupId、artifactId和version组成groupdId:artifactId:version的形式来唯一确定一个项目。

最后，在掌握了如何生成目录，了解了目录结构以及各个依赖文件的所具有的功能后，如果你想在本地启动直接 gulp，想看看自己的页面被gulp打包后具体如何，那么还需要进入到项目的根目录，也就是bd04目录去执行下面这条命令：

  1. npm install

它会将 package.json中 所有gulp依赖的包都下载到本地，然后再去命令行中启动gulp。

  1. gulp dev # 启动gulp开发模式下打包
  2. gulp watchDev  #启动gulp监控

更多关于gulp的功能，你可以阅读gulpfile.js中的代码。

开始编写

恭喜你！骚年~~ 到了这里，你就要开始正式的编写“广告到达页”了。前面我们介绍了已经在本地生成项目目录，所以现在便可以直接在 bd04 目录中的assets文件夹中依次建立html、css、js等文件。
同样的，对于怎么切图！怎么编写页面，我并不会去说，我重点要说的是在编写页面时一些建议与注意事项，避免后续给自己挖坑！
那么，现在让我们来看看一个广告到达页，在编写是都有哪些注意事项吧！

公用资源

对于一些常用的资源，我们都会提供一个可供引用的公用地址，例如 jQuery、重置页面样式的reset.css等，这些资源也是存放在 http://hd.game.iwgame.com 这个域名下。
下面是各个游戏产品公用资源的绝对地址示例：

#天之禁1
http://hd.tzj.iwgame.com/js/jquery.min.css
http://hd.tzj.iwgame.com/css/base.min.css //reset.css

#天之禁2
http://hd.tzj2.iwgame.com/js/jquery.min.css
http://hd.tzj2.iwgame.com/css/base.min.css

#权御
http://hd.qy.iwgame.com/js/jquery.min.css
http://hd.qy.iwgame.com/css/base.min.css

因为这些公用资源与我们的广告到达页同属相同的域名与地址，所以在引用中，我们可以采用“相对路径”进行引用，当然如果你是在本地新建目录进行开发，你可以暂时引用上述的绝对地址，只要记着后期上线的时候，修改成相对目录即可。

设计稿(PSD)中的logo图片一律不用，更不要直接切在背景上，因为每个游戏都会有一个官网，所以关于LOGO图片，我们统一引用对应游戏产品官网上的LOGO图片即可。
例如，天之禁2的官网是 http://tzj2.iwgame.com，对应LOGO地址是 http://tzj2.iwgame.com/images/v4/common/logo.png。其它游戏产品的LOGO，可以到对应游戏官网上去获得。
这样做的好处在于后期一旦需求方需要修改LOGO图片，我们只需要修改官网的LOGO即可。

图片品质

切图时“图片品质”请控制60%-65%之间，一般都是60%。

插入图 VS 背景图

切图时，什么样的图作为背景图？什么样的图作为插入图？这是值得考虑的事情。
总的来说，对具有价值的图片值得放在HTML里做成插入图，而一些装饰性的图片，背景图片等都放在CSS里面做成背景图，什么样的图片是具有价值的图片？通俗的来说可以为图片添加alt说明文字的图，都可以作为插入图使用，再具体点的，例如用作轮播的图片，LOGO，礼包或者是奖品的图片等。

文字 VS 切图

有些文案必须单独做出文字，方便后期的修改，例如开发时间点的文字，或者规则说明文字，以及单纯的文字内容。
那么，我们一般都会对哪些文字直接做切图处理呢？比如一些装饰性的文字，或者是具有效果难于的文字，例如SLOGN文字都会具有一定的效果以及采用特殊字体，对于这样的文字，我们都会直接切图操作。

精灵图

精灵图可谓前端的基础中的基础，这里我要说明的是，精灵图适合将一些零碎体积小的图片组合成一张大图进行使用，而不是所有零碎的图片都适合做精灵图，另外能用jpg格式的图片，不用使用Png,因为相同体积下，png由于带有一个透明通道(alpha)其生成文件的提交要远远大于jpg格式。

游戏下载

广告到达页中的下载按钮在点击时要么跳转外链跳转到对应游戏的下载页面，要么就是直接下载游戏客户端，对于前者很简单，而对于后者，你则需要引入一个JS文件，这个JS文件中定义了一个对象用来保存游戏客户端以及补丁的相关信息和下载链接。
这个下载信息配置的JS由每个游戏的官网进行生成和维护，所以每个游戏产品都有自己的下载配置JS，其名称为:down_version_json.js，这里我就以tzj2的 down_version_json.js为例。

首先引入JS：

  1. <script src=" http://tzj2.iwgame.com/js/client/11/down_version_json.js" ></script>

接着获取 down_version_json.js 中的 version_data 对象，获取下载信息以及下载链接。具体使用如下：

  1. $('.download-btn').attr('href', version_data.list.R[0].downurl);

推荐的脚本位置

因为脚本具有阻塞的作用，所以我们强烈建议将脚本的引用放置在HTML的结束区域，例如结束的body中。

  1.     ....
  2.     <script src="js/index.js" ></script>
  3. </body>

文网文

文网文就是网页的版权信息，默认位于页面的底部，在制作时并不需要去重新编写文网文，因为我们已将将其封装在一个名为 footer.min.js的JS文件中了，其原理是通过 document.write方法 向文档流中插入内容，因此使用时，你只需要引入这个JS文件，以及对应的样式文件即可。

具体事例如下（这里以tzj2为例）
首先引入文网文的样式文件:footer_black.min.css

  1.  <head>
  2.     <link rel="stylesheet" href="http://hd.tzj2.iwgame.com/css/base.min.css" />
  3.     <link rel="stylesheet" href="http://tzj2.iwgame.com/css/footer_black.min.css" />
  4.     ......

接着引入footer.min.js，来向文档流中插入文网文所需的HTML代码：

  1.     ....
  2.     <script src="http://tzj2.iwgame.com/js/footer.min.js" ></script>
  3. </body>

同样的为了方便管理，每个游戏不同类型的页面（包括广告到达页）都会统一引入自己官网中的文网文。

统计代码

统计代码用于统计网页的访问量，我们公司主要采用两种统计方式，一种是百度统计平台的，另一个则是我们公司自己开发的统计功能。
在使用时向页面中引入包含统计功能的JS文件即可：

  1. <!--百度统计-->
  2. <script src=" http://www.iwgame.com/js/iwbd.min.js"></script> 
  3. <!--公司自己的统计功能-->
  4. <script src="http://www.iwgame.com/js/hm.js?v=1.0.0&p=7"></script>

注意：在开发时，两种统计方式都要引入。

核心功能：注册

到了这里，我们就要开始做“广告到达页”真正核心的功能，那就是“注册”，对于注册功能，我们一定要更加用心与小心，万不能出现丝毫差错。

注册的形式

先简单介绍下我们注册的形式，在我们公司注册都是以一种单点的形式来重复使用（实际上登录也是如此），这个单点不仅是JS功能，就连HTML,CSS也是如此。简单的说我们的注册就是在 http://passport.iwgame.com 域名下的一个单独的页面，使用时通过iframe来内嵌到我们需要的页面(比如，广告到达页)中。

你可以在浏览器中打开这个页面看看：http://passport.iwgame.test/nest/ngregpage.html

如何使用？

前面我们已经提到过，在使用时，我们会通过 iframe 来嵌入到需要注册功能的页面中，其代码如下：

  1. <iframe frameborder="0"  allowtransparency="true" scrolling="no" src="http://passport.iwgame.com/nest/ngregpage.html"></iframe>

但在具体的使用场景中，根据需求的不同，我们总会需要对注册页面进行非功能性的调整，例如需要修改注册的默认样式，使其与“广告到达页”具有一致的页面风格，在这种需求场景下，我们可以通过为注册页面地址附加URL参数的方式来自定义注册页面的样式或者是某些行为。

具体事例如下：

  1. <iframe frameborder="0" width="380" height="314" allowtransparency="true" scrolling="no" id="iframe1" src="http://passport.iwgame.com/nest/ngregpage.html?regback=http://hd.tzj2.iwgame.com/js/regback.html&rsurl=http://hd.tzj2.iwgame.com/baidu/bd03/&csspath=http://hd.tzj2.iwgame.com/baidu/bd03/css/reg-dd97e15009.css&pid=p-p7&t=1514448546236"></iframe>

下面是对一些常用的URL参数进行特别的说明：

regback:用于指定注册的回调页面。
rsurl：用于指定注册的来源页面
csspath：用来自定义注册页面的样式文件
pid：游戏产品ID，每个游戏都有属于自己唯一的ID，例如天之禁:p-p4,天之禁2:p-p7
t:时间戳

是不是感觉非常麻烦？既需要引入iframe，还需要配置一大堆的 URL参数，而且 URL地址过长时还容易出错。实际上在使用时，你只需要在页面中放入一个空的 iframe标签，然后再引入一个名为 hdpublic的JS文件，最后调用 urlLoginReg 方法即可。

urlLoginReg 方法通过接收一个对象作为参数(对象的属性就是上面的URL参数)然后生成并返回我需要的URL地址。

关于hdpublic.js，它的实际地址：http://www.iwgame.com/js/hdpublic.js ，有兴趣的可以查看源代码。

具体用例如下：

  1. <iframe frameborder="0"  allowtransparency="true" scrolling="no" ></iframe>
  2. <script src="http://www.iwgame.com/js/hdpublic.js"></script>
  3. <script>
  4.  $('iframe').attr('src',urlLoginReg({
  5.      'jointype':'reg',  //用于指定嵌入页面的类型，reg表示注册。
  6.      'csspathpr':'css/reg.css', //用于指定自定义注册样式的样式文件，对应URL参数中的 csspath
  7.      'isback':true, //是否开启注册回调,对应URL参数中的 regback
  8.      'ng':true  //是否开启新版注册
  9.  }));
  10. </script>

调整注册样式

关于这个自定义的CSS文件，你可以在你的本地项目目录新建一个reg目录(与img,css,js等目录同级即可)，然后在reg目录中再新建一个reg.css（具体文件名你可以自定义），最后在这个样式文件中写入你想调整的css样式即可。

最后调用 urlLoginReg() 方法并指定 csspathpr 参数的值为我们刚才自定义的reg.css文件：

代码示例：

  1. $(iframe).attr('src',urlLoginReg({csspathpr:'reg/reg.css'}))

能够通过自定义一个css文件来调整内嵌注册页的默认样式，其原理在于内嵌注册页内置了读取URL中csspathpr属性值的功能，当接收到csspathpr的值后，会创建一个link标记并将其作为href属性的值，然后插入到 head的最底部，使得这个自定义的 CSS 文件其优先级要高于内嵌注册页的默认样式文件，从而实现内嵌注册页样式的自定义化。

注册回调

注册回调功能非常有用，例如一旦用户注册成功，我们可以给用户一个反馈，比如弹出一个恭喜注册成功的弹窗，甚至我们还能在这个反馈中显示更多与用户相关的信息(用户名，账号ID等），使注册功能具有更好的互动性。

在前面我们通过对“注册形式”的说明，使我们知道“注册页”是在http://passpart.iwgame.com域名下的一个独立页面，而“广告到达页”则是在 http://hd.game.iwgame.com 域名下的一个页面，虽然通过iframe将两者紧密的链接在一起，但域名不同，便会受制于浏览器的同源策略影响从而产生跨域的问题。跨域会使父(广告到达页)子(内嵌注册页)页面（通过iframe建立的关系）无法进行任何通信，自然就无法实现注册的回调功能。

先搁置跨域，那么如何实现回调功能呢？先说下思路，玩家在“广告到达页”上进行注册操作时，操作的并不是用户看到页面(广告到达页)，而是“广告到达页”中通过iframe内嵌的一个独立注册页，而一旦注册完成，我们就希望注册页，能通过iframe向父级(广告到达页)发出一个注册成功的消息，然后父级根据这个消息去执行一个注册的回调动作，这就是注册回调功能！其实，实现起来也很简单，但是跨域却使问题复杂化了，那么如何解决跨域呢？

为了解决跨域，我们引入了一个“回调页面”。这个回调页面与我们的“广告到达页”同属一个域，也就是说“回调页面”也是存放在 http://hd.game.iwgame.com 域名下，当在内嵌注册页面中注册成功后，内嵌的注册页面会通过 location.href 跳转到这个“回调页面”，并将一些注册的相关信息通过URL参数的附加在要跳转的地址上，这样当注册成功，内嵌的注册页通过 location.href 跳转到与“广告到达页”同域的“注册回调页”，便可以解决跨域的问题了，最后“注册回调页”再通过iframe将自己URL上的注册信息发送到父页面(广告到达页)中。

具体图示如下：

QQ截图20171219155549.jpg-19.4kB

前面说的都是回调的思路，只是让你更好的理解，更好的去使用它，具体的实际工作中，我们会在父页面（广告到达页）中定义一个全局的回调函数，这个函数的名称为：regCallBack ，然后将我们要执行的回调功能放入在这个函数中。

具体事例代码：

  1. function regCallBack(_accid, _sign,time,_accname){
  2.     //alert('恭喜你，注册成功！');
  3. }

regCallBack 函数还可以接收一些参数，其中参数 _accid 表示账号ID，_sign表示签名,time表示时间，_accname表示账号名。

另外，你可能会疑惑，为什么回调函数的名称必须是 regCallBack 呢？如果想知道答案，非常简单，打开我们的注册回调页，查看其源码即可。http://hd.tzj2.iwgame.com/js/regback.html

重中之重：注册ID

如果说注册功能是广告到达页的核心，那么注册ID则是注册功能的核心，所以重中之重。

注册ID的作用

注册ID是唯一的，它用来唯一标示一个注册页面，自然也包括内嵌注册页面的“广告到达页”。
注册ID会在页面打开时，被写入到cookie中，当用户完成注册时，账号中心会自动读取cookie中的注册ID，然后一同保存在数据库中。所以通过注册ID我们可以统计完成注册的用户的来源。从而帮助分析人员分析不同平台，不同广告到达页的注册情况。

实际上注册ID有两种形式，一种是我们前端开发人员定义的注册ID，它维护在我们部门内部的 Wiki上，还有一种是运营方投放广告时自己生成的标识ID，这个标识ID会被添加在URL地址上。
示例：

http://hd.tzj2.iwgame.com/baidu/bd03/?stat=1741000002

其中 1741000002 就是属于运营方自己指定的注册ID,相比较，运营指定的注册ID优先级高于我们自定义的注册ID，只有当运营没有指定注册ID时才会采用我们定义的注册ID。

而这里，我们要介绍的就是我们自己定义的注册ID。

创建注册ID

我们自己创建的注册ID，是维护在公司内部的 WIKI中，打开下面这个地址，你可以看到公司全部游戏产品的注册ID情况：

http://wiki.iwgame.tec/pages/viewpage.action?pageId=21696031

这里，我们依然以天之禁2为例：

QQ截图20171219165658.jpg-28.2kB

第1步：单击右上角的“编辑”按钮，然后将光标插入到表格的第一行中。
第2步：点击向上增加一行按钮，增加一行
第3步：输入相关内容即可，其中活动ID以7开头自增，url是注册ID所应用的注册页面的地址，其它选项可以参照之前的示例填写即可。

最后点击“保存”按钮，一个注册ID 就这样被我们创建好了！

使用注册ID

注册ID创建好后，我们需要将其作为“隐藏域”的值来放置到 HTML页面中，在实际使用中，我强烈建议你复制下面代码，直接粘贴放到自己的项目中

  1. <input type="hidden" name="act_id" id="act_id" value="70009"/>  /*此值按上面表对应*/
  2. <input type="hidden" name="fstype" id="fstype" value="hd"/>      /*值：hd 或 ad，默认hd */
  3. <input type="hidden" name="accid" id="accid" value=""/>
  4. <input type="hidden" name="reg_sign" id="reg_sign" value=""/>

放置好上面的一段HTML代码后，还需要执行一个方法，将注册ID写入到 cookie中，以供用户注册时让账号中心读取，这里我也建议，请直接将下面的代码复制粘贴到自己的项目中：

  1.  set_cookie_hdtv($("#fstype").val(),$("#act_id").val());

PS：如果你有仔细阅读 hdpublic.js的源码的话，你会发现该方法再其中便有定义。

运营投放说明

虽然我们不能确定运营方是否指定了投放的广告ID，但是“未雨绸缪”总是对的，不论运营方有没有指定广告ID，而将这个广告ID写入到cookie中的功能，却是我们这边控制的，所以不论有没有ID，我们都要读取，写入广告ID的功能准备好。

将运营投放的ID写入到cookie的功能，我们已经有了一个统一封装好的JS来实现，这个JS文件保存在 media.game.iwgame.com/ 域名下。因此在做广告到达页或者是具有注册功能的其它页面，我们都要通过script标签引入这个JS。

下面以天之禁2为例：

  1.     ....
  2.     <script src="http://media.tzj2.iwgame.com" ></script>
  3. </body>

完整模板参考

上面我们提到了很多需要引用的外部JS脚本以及一些零碎的代码片段，下面我把这些整理整合在一起，给出一个广告到达页基本都具有的内容模板，以供我们编写时做参考。同样的，这里我强烈建议，直接拷贝这个广告到达页模板，然后按照自己的游戏产品进行相应的修改即可。

这里任然以tzj2为例：

  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="renderer" content="webkit">
  8.     <meta name="keywords" content="">
  9.     <meta name="description" content="">
  10.     <title></title>
  11.     <link rel="stylesheet" href="http://hd.tzj2.iwgame.com/css/base.min.css">
  12.     <link rel="stylesheet" href="http://tzj2.iwgame.com/css/footer_black.min.css">
  13.     <link rel="stylesheet" href="css/index.css">
  14. </head>
  15. <body>
  17.     <!--LOGO-->
  18.     <h1 class="logo">
  19.         <a href="http://tzj2.iwgame.com" target="_blank">
  20.             <img src="http://tzj2.iwgame.com/images/v4/common/logo.png" alt="天之禁2" />
  21.         </a>
  22.     </h1>
  24.     <!-- Your Content -->
  25.     <div class="wrap">
  26.         <!-- contents -->
  27.     </div>
  29.     <!--注册Iframe -->
  30.     <iframe frameborder="0"  allowtransparency="true" scrolling="no" src="http://passport.iwgame.com/nest/ngregpage.html"></iframe>
  32.     <!--存放自定义注册ID-->
  33.     <input type="hidden" name="act_id" id="act_id" value="">
  34.     <input type="hidden" name="fstype" id="fstype" value="hd">
  35.     <input type="hidden" name="accid" id="accid" value="">
  36.     <input type="hidden" name="reg_sign" id="reg_sign" value="">
  38.     <script src="http://hd.tzj2.iwgame.com/js/jquery.min.js"></script>
  39.     <script src="http://www.iwgame.com/js/hdpublic.js"></script>
  40.     <script src="http://tzj2.iwgame.com/js/client/11/down_version_json.js"></script>
  41.     <script src="js/index.js"></script>
  42.     <script src="http://tzj2.iwgame.com/js/footer.min.js"></script>
  43.     <script src="http://media.tzj2.iwgame.com/"></script>
  44.     <script src="http://www.iwgame.com/js/iwbd.min.js"></script>
  45.     <script src="http://www.iwgame.com/js/hm.js?v=1.0.0&p=7"></script>
  46. </body>
  47. </html>

Git版本管理

公司目前使用的版本管理工具主要有两种，一种是 SVN，另一种则是现在要说的 Git。就目前而言，除了各个游戏的官网还在使用SVN，其它的所有页面现都采用Git进行版本管理。

注册gitLab并添加秘钥

gitlab 是基于 git 并提供 WEB界面的可视化版本管理系统，一般企业都会自己搭建一个gitlab，用于公司内部项目的版本管理，或者说，你可以理解成互联网版的 github。
我们公司的gitlab地址是：http://gitlab.iwgame.tec/
注册的话，可以访问这个链接：> http://gitlab.iwgame.tec/users/sign_in
为了统一，Username 请使用我们公司提供的邮箱地址，例如:YourName@iwgame.com。

注册完成后，你还需要在自己的电脑中生成一个 ssh key，然后将公钥添加到 gitlab中，因为git是基于ssh协议进行传输，每次去git clone一个项目，git都会去验证你本地的ssh key，从而免去每次都要输入账号密码。

这里我使用 gitbash 以命令的方式来生成ssh-key作为演示：

  1.  ssh-keygen -t rsa -C "youremail@example.com"

-C 表示注释内容，用于说明这条 ssh-key 的用途，一般默认为自己的邮箱地址。
ssh-key 生成好后，会在本地的用户目录，创建两个文件：id_rsa.pub 和 id_rsa。

Window系统：C:\用户\用户名\.ssh
Mac os: /用户/用户名/.ssh/

其中带有.pub的就是公钥，不带的则是私钥，使用编辑器打开公钥文件，复制其内容。然后打开 gitlab页面，登录用户，点击右上角的头像 -> Profile Settings -> SSH Keys -> 将内容粘贴到key编辑边框中，然后输入title，最后点击 “Add key” 按钮即可。

QQ截图20180123154231.jpg-20.1kB

关联项目

到了这一步，我们就要开始真正使用 git来管理我们的项目版本了。
首先，在 gitlab中为我们的项目创建一个远程的仓库。

1. 进入gitlab页面，登录后，在页面中点击“Create Project” 按钮，
2. 进入创建项目页面，依次输入项目名称，描述（没有可以不填）然后点击 “Create Project” 按钮，
3. 完成创建后，会自动进入到新创建项目的项目页面中。

我们在 gitlab中创建的项目，目前还只是一个空的远程项目(仓库)，我们还需要将远程的这个仓库与我们刚才在通过命令形式生成的本地项目进行关联。
对于新创建并且内容还是空的项目，其项目页面下边会提供一些常用的git命令。
找到 “Command line instructions” 区域，由于我们已经生成好了本地的项目目录，因此我们再找到 “Existing folder or Git repository” ，然后复制下面的前两段命令：

  1. git init
  2. git remote add origin git@gitlab.iwgame.tec:username/YourProject.git

然后在命令行中进入我们本地的项目的根目录（也就是我之前生成的bd04根目录），粘贴并回车执行上面的命令，即可将 gitlab上我们新建的远程仓库与本地的项目进行关联，并使本地的项目转换成一个本地的git仓库。

关联的目的是可以使我们将本地仓库的内容提交到远程仓库中。

分支与提交

请注意，后面所有关于 git的操作，我都是通过命令与命令行工具的方式来进行演示，如果你对 git命令不是太熟悉，完全可以找对应的 git可视化操作工具来进行替代，如果你对git命令很好奇，并想去掌握它，这里我推荐一个学习git命令的教程
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

经过上述步骤，我们已经将gitlab上的远程仓库与本地项目进行了关联，从而产生了本地的 git仓库。
现在，我们就可以将本地仓库的内容提交到远程的仓库中了，不过提交之前，先简单的说下一下分支。
我们的项目主要有两种分支，一种是 master分支，这个分支保存的是线上代码，还有一种就是dev分支，它保存的是开发测试下环境的代码，因此我们首先由默认的master分支切换到dev分支：

  1. git checkout dev

然后将本地的仓库push到远程仓库中

  1. git add .
  2. git commit -m '提交dev进行测试'
  3. git push origin dev

当我们把本地仓库的dev分支上的资源与代码 push到对应远程仓库的dev分支后，gitLab-CI就会根据 .gitlab-ci.yml配置文件去调用 runner，来打包处理我们的代码。

分支与拉取

如果现在去修改一个已存在的项目，首先我们要到 gitlab上去找到该项目，然后clone到本地来。

  1. git clone git@gitlab.iwgame.tec:username/YourProject.git

然后切换到dev分支

  1. git checkout dev

修改后，提交对应的远程dev分支即可。

修改资源路径

还记得之前我们已经说过每个游戏的 http://hd.[game].iwgame.com 的域名下已经内置了一些常用的公用资源
。例如 base.min.css 或者 jquery.min.js等。在前期如果我们处于本地开发阶段，可以以绝对的地址引用它们，而现在，当我们要提交到远程仓库发出来测试的时候，我们就可以将其改为相对路径的形式。

  1. <html>
  2.     <head>
  3.           <!-- <link rel="stylesheet" href="http://hd.tzj2.iwgame.com/css/base.min.css"> -->
  4.           <link rel="stylesheet" href="/css/base.min.css">
  5.     </head>
  6.     <body>
  7.         <!-- <script src="http://hd.tzj2.iwgame.com/js/jquery.min.js"></script> -->
  8.         <script src="/js/jquery.min.js"></script>
  9.     </body>
  10. </html>

如何测试？

恭喜您，到了这里，我们已经进入了开发的最后阶段，也就是问题的修复阶段
首先，我们测试阶段的代码的都是在建立在 'dev' 分支上的，每次 push到远程的仓库后，gitlab都会自动帮我们重新打包，编译代码，然后再将编译后的代码同步到测试服务器中的指定目录内。接着我们会有一个专门用于测试的域名，其解析的地址就是 gitlab要同步代码到的那个服务器目录，从而实现访问测试域名就可以看到提交的测试代码。

在 hd下其测试地址就是将 '.com' 改成 '.test'，然后区别下不同的游戏产品。

http://hd.[game].iwgame.test/special/project/

以bd04为例，其地址形式如下：

http://hd.tzj2.iwgame.test/special/bd04/

然后我们将测试地址告知需求方与测试人员让他们进行测试，每次问题修复后，也都要通知下测试方，让他们确认问题是否得到修复。

如何上线?

使用 git进行版本管理后，上线非常简单，我们在确保 dev分支上的代码正确无误后，直接切换到master分支

  1. git checkout master

然后在master分支上去合并dev分支的内容

  1. git merge dev

合并完成后，直接 push到远程仓库的 master分支上即可。

  1. git push origin master

然后gitlab将会调用runner处理我们的代码，并将代码同步到正式服务器的指定目录中。同样的我们测试地址中的 .test 改成 .com 即可看到线上的页面。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注