preface

Nowadays, there are many WAP pages, and sometimes designers will ask us for two-dimensional code if they want to see the effect of reconstruction with their mobile phones.

Previously, we used Node to launch server.js to generate the QR code.

There are two limitations to this approach

  • Start the Node Server locally
  • Be on the same LAN

Because the wifi on the Intranet of the company can not be connected sometimes, so I always want to set up a test environment that does not need to be connected to the Intranet of the company.

github pages

I’ve used Github before to set up a blog and found that it’s possible to host web pages on Github.

  1. First, create a new Repository
  2. Select Settings -> Options for the repository, go to GitHub Pages, click “Choose a Theme”, and select a theme
  3. (Since I configured the domain name, I can directly access the page I just configured by accessing the domain/repository name, for example: celesteting.com/test/)

But what if I want to assign a secondary domain name to my page, like t.celesteting.com

GitHub Pages allows you to set the Custom Domain implementation.

t.celesteting.com/

em… At this time I am generally Baidu TWO-DIMENSIONAL code generator, generate two-dimensional code, and then their very silly *, created a Word document, the two-dimensional code are copied in… Until the day development saw… Tell me I can use JQ qrcode to make a web page directly… And.. I always thought it was because of the Node server problem that I could not scan the files named in Chinese, but it was not! Baidu is the two-dimensional code generator reason!! Here is how to use JQ Qrcode, very simple and convenient!

Jquery Qrcode

  1. Create a page with qr codes
  2. Introduce the following code in the page, you can also directly download, but I just want to test, afraid of the development of these files as necessary files, so directly use the external chain
<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>  
Copy the code
  1. Then add the following code: #code1 is the div where you put the QR code
<script>
jQuery('#code1').qrcode({width: 200,height: 200,correctLevel:0,text: "http://d.celesteting.com/red_bag/pop.html" });
</script>
Copy the code
  1. There is a problem, if the name in Chinese will not be recognized, so we need to add the following code
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;    
}  		
Copy the code
  1. Then refer to it as follows
jQuery('#code1').qrcode({width: 200,height: 200,correctLevel:0,text: utf16to8("Share to join http://d.celesteting.com/red_bag/. HTML")});
Copy the code

This way, we can see the test page we want by scanning the QR code.