如何把一个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来访问你的应用了。