搭建wap测试环境

---

前言

现在接触wap页面比较多，有时候设计师会想用手机看到重构的效果，就会问我们要二维码。

之前是用node启动server.js来生成二维码。

这个方法有两个限制

• 本地要启动node server
• 要在同一个局域网

由于公司内网的wifi有时候会连不上没办法测试，所以一直想整一个不需要连公司内网也能测试的测试环境。

github pages

之前我就用过github来搭建博客，发现其实把网页放在github上面也是可以的。

1. 首先要创建一个仓库（new repository）
2. 选中该仓库的settings -> Options拉到GitHub Pages，点击“Choose a theme”，随便选择一个主题
3. 即可访问该页面（由于我配置了域名，所以可以直接通过 访问域名/仓库名 即可访问刚刚配置的页面，如：celesteting.com/test/）

但是我想给页面配置一个二级域名，如 t.celesteting.com 要怎么办呢

我们可以通过GitHub Pages设置Custom domain实现（设置完这个可以在仓库中看到CNAME的文件）

但是，设置完这个还没完事，还要去添加DNS Service记录才可以。去DNSPod在主机记录里面加一条，主机记录为t，记录值为ip地址的记录，等个十分钟即可通过二级域名访问 t.celesteting.com/。 这样我们就配置好了一个测试环境了，这时可以把我们要测试的文件放在仓库里面随便甩链接给设计师就行了。但是，wap大部分都是用手机扫一扫！

em...这时候我一般都是百度二维码生成器，生成二维码，然后自己很傻*的，创建了一个word文档，把二维码都复制进去...直到那天开发看到...告诉我可以用jq qrcode直接做成网页...，还有..我之前一直以为是因为node server的问题以至于扫码不能用中文命名的文件，其实不是的！是百度那个二维码生成器的原因！！！接下来就说说怎么使用jq qrcode，非常简单方便！

Jquery Qrcode

1. 创建一个放二维码的页面
2. 在页面引入以下代码，你也可以直接下载，但是我只是为了测试，怕开发把这些文件都当成必要的文件，所以就直接用了外链

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>  
复制代码

3. 然后再加入以下代码,#code1就是你放二维码的div

<script>
jQuery('#code1').qrcode({width: 200,height: 200,correctLevel:0,text: "http://d.celesteting.com/red_bag/pop.html" });
</script>
复制代码

4. 这有一个问题，如果命名用中文就不能识别了，所以还要加入以下代码

function utf16to8(str) {  
    var out, i, len, c;    
    out = "";    
    len = str.length;    
    for(i = 0; i < len; i++) {    
    c = str.charCodeAt(i);    
    if ((c >= 0x0001) && (c <= 0x007F)) {    
        out += str.charAt(i);    
    } else if (c > 0x07FF) {    
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
    } else {    
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
    }    
    }    
    return out;    
}  		
复制代码

5. 然后通过以下方式引用

jQuery('#code1').qrcode({width: 200,height: 200,correctLevel:0,text: utf16to8("http://d.celesteting.com/red_bag/分享加入.html")});
复制代码

这样就可以通过扫描二维码看到我们想要的测试页面了。