如何把一個JavaScript二維碼應用部署到Google App Engine上

文章介紹如何使用一個開源的JS二維碼插件去快速實現一個網頁版的二維碼應用，以及如何把這個應用部署到Google App Engine上。

參考原文：

How to Deploy JavaScript QR Code Generator to Google App Engine

如何編寫一個二維碼網頁應用

從Github上下載jQuery QRCode plugin。

下載JavaScript UTF-8用於字符竄編解碼，否則中文顯示爲亂碼。

建立一個qrcode的工程，以及新建一個qrcode.html。

包含三個js文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<script src="js/utf-8.js"></script>

 

建立一個文字輸入框，一個按鈕，以及一塊區域用於顯示二維碼。

<input type="text" id="text" placeholder="www.dynamsoft.com">
<button onclick="generate()">Try it</button>
<div id="output"></div>

 

添加按鈕事件處理。

function generate()
{
    jQuery(function(){
        var canvas = document.querySelector("canvas");
        if (canvas != null && canvas.parentNode) {
            canvas.parentNode.removeChild(canvas);
        }
        var text = document.getElementById("text");
        jQuery('#output').qrcode(Utf8.encode(text.value));
        text.value = "";
    })
}

 

運行qr.html。

如何把這個應用部署到Google App Engine上

閱讀Google App Engine Dev Center。

有Python，PHP, Java, Go四種編程語言能夠選擇。這裏選擇PHP。

下載安裝PHP SDK。

在Google App Engine中建立一個應用。

把qrcode.html改爲qrcode.php。

建立一個叫app.yaml的配置文件：

application: dynamsoft-test
version: 1
runtime: php
api_version: 1
 
handlers:
- url: /stylesheets
  static_dir: stylesheets
 
- url: /js
  static_dir: js
 
- url: /.*
  script: qrcode.php

修改加載css和js的路徑

<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.qrcode.min.js"></script>
<script src="/js/utf-8.js"></script>

在命令行中輸入python google_appengine/dev_appserver.py qrcode/

打開http://localhost:8080/ 運行程序。

最後把應用部署到Google App Engine上：appcfg.py update qrcode/

如今能夠打開xxx.appspot.com來訪問你的應用了。