文章介绍如何使用一个开源的JS二维码插件去快速实现一个网页版的二维码应用,以及如何把这个应用部署到Google App Engine上。javascript
参考原文:php
从Github上下载jQuery QRCode plugin。css
下载JavaScript UTF-8用于字符窜编解码,否则中文显示为乱码。html
建立一个qrcode的工程,以及新建一个qrcode.html。
java
包含三个js文件python
<script src="js/jquery.min.js"></script> <script src="js/jquery.qrcode.min.js"></script> <script src="js/utf-8.js"></script>
建立一个文字输入框,一个按钮,以及一块区域用于显示二维码。jquery
<input type="text" id="text" placeholder="www.dynamsoft.com"> <button onclick="generate()">Try it</button> <div id="output"></div>
添加按钮事件处理。
git
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。
github
阅读Google App Engine Dev Center。web
有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来访问你的应用了。