如何把一个JavaScript二维码应用部署到Google App Engine上

只愿长相守 提交于 2019-12-05 22:03:16

文章介绍如何使用一个开源的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来访问你的应用了。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!