文章介绍如何使用一个开源的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来访问你的应用了。
来源:oschina
链接:https://my.oschina.net/u/1187419/blog/225517