文档章节

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

yushulx
 yushulx
发布于 2014/04/23 14:57
字数 425
阅读 154
收藏 3

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

本文转载自:http://www.codepool.biz/barcode/free-qr-code-generator-online.html

yushulx
粉丝 29
博文 107
码字总数 60955
作品 0
杭州
私信 提问
浅谈跨平台框架 Flutter 的优势与结构

作者:个推iOS工程师 伊泽瑞尔 一、背景 目前,移动开发技术主要分为原生开发和跨平台开发两种。其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提...

个推
03/21
75
0
微信Web-App几分钟变身“原生App”【教程】

微信最近推出了 微信JS-SDK, 使微信公共号可以直接调用微信原生的接口,具备部分原生应用的能力。微信JS-SDK 的推出,将大大提高微信公共号的用户体验,但是如果存在一种方式,可以使微信公...

API_Cloud
2015/01/14
15.7K
8
浅谈跨平台框架Flutter的优势与结构

作者:iOS开发工程师 伊泽瑞尔 目前,移动开发技术主要分为原生开发和跨平台开发两种。其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提供的API...

个推大数据
03/21
0
0
使用开源工具测试 Web 应用程序

随着应用程序渐渐脱离独立的宿主模型并进入到云中,可靠性和可预测性变得更加重要。在云环境中,有许多因素是我们无法控制的,因此编写健壮的经过测试的代码比以往更加迫切。 twill 和 Goog...

红薯
2009/05/12
1K
2
JavaScript and Ruby in ABAP

Netweaver里有个mini JavaScript engine CLJAVASCRIPT, 对于Js code的编译和执行都是用system call完成。 只能当玩具用:report SJSEU 执行结果:120 在SAP C4C的UI Designer里,event handl...

jerrywangsap
2018/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie...

前端老手
24分钟前
5
0
常用快递电子面单批量打印api接口对接demo-JAVA示例

目前有三种方式对接电子面单: 1.快递公司:各家快递公司逐一对接接口 2.菜鸟:支持常用15家快递电子面单打印 3.快递鸟:仅对接一次,支持常用30多家主流快递电子面单打印 目前也是支持批量打...

程序的小猿
27分钟前
6
0
Yii 框架中rule规则必须搭配验证函数才能使用

public $store_id;public $user_id;public $page;public $limit;public $list;public $mch_list;public $cart_id;public $is_community;public $shop_id;public $cart_typ......

chenhongjiang
30分钟前
4
0
Flutter使用Rammus实现阿里云推送

前言: 最近新的Flutter项目有“阿里云推送通知”的需求,就是Flutter的App启动后检测到有新的通知,点击通知栏然后跳转到指定的页面。在这里我使用的是第三方插件Rammus来实现通知的推送,之...

EmilyWu
30分钟前
43
0
Knative 实战:三步走!基于 Knative Serverless 技术实现一个短网址服务

短网址顾名思义就是使用比较短的网址代替很长的网址。维基百科上面的解释是这样的: 短网址又称网址缩短、缩短网址、URL 缩短等,指的是一种互联网上的技术与服务,此服务可以提供一个非常短...

阿里巴巴云原生
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部