博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
很多人很想知道怎么扫一扫二维码就能打开网站,就能添加联系人,就能链接wifi,今天做个demo(续集)...
阅读量:6576 次
发布时间:2019-06-24

本文共 4890 字,大约阅读时间需要 16 分钟。

有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用。(浏览器自带的扫描就够了,QQ扫码和微信扫码部分手机不能直接连接wifi

在看之前你可以扫一扫下面几个二维码先看看效果:

上篇网站介绍了一下常用格式(),其实扫二维码的本质就是解析出一段字符串,为什么有一些神奇的功能呢?那是字符串的格式满足一些系统内置的协议或者格式,所以系统就帮你干了类似于发短信,打电话,添加联系人,连接wifi之类的事情。可以想像,你开了个店,店门口有个免费wifi的二维码,然后自己名片也是一个二维码~~~~是不是有点高大上的感觉?

其实代码并没有什么技术含量,既然有人要求,那就写一下吧,这次就不局限平台了,写了个通用的demo

核心类库:jquery.qrcode.min.js

核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//中文字符处理
        
function 
toUtf8(str) {
            
var 
out, i, len, c;
            
out = 
""
;
            
len = str.length;
            
for 
(i = 0; i < len; i++) {
                
c = str.charCodeAt(i);
                
if 
((c >= 0x0001) && (c <= 0x007F)) {
                    
out += str.charAt(i);
                
else 
if 
(c > 0x07FF) {
                    
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                
else 
{
                    
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                
}
            
}
            
return 
out;
        
}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//生成二维码
        
function 
outputQRCod(txt, width, height) {
            
//先清空
            
$(
"#code"
).empty();
            
//中文格式转换
            
var 
str = toUtf8(txt);
            
//生成二维码
            
$(
"#code"
).qrcode({
                
render: 
"table"
,
                
width: width,
                
height: height,
                
text: str
            
});
        
}

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!
DOCTYPE 
HTML>
<
html
>
<
head
>
    
<
meta 
charset="utf-8">
    
<
title
>生成二维码</
title
>
    
<
script 
src="JavaScript/jquery-1.8.3.min.js"></
script
>
    
<
script 
src="JavaScript/jquery.qrcode.min.js"></
script
>
    
<
script 
type="text/javascript">
        
$(function () {
            
//没有中文就可以这么简单
            
$('#code').qrcode("");
 
            
//普通转换
            
$("#txt_btn").click(function () {
                
outputQRCod($("#inputTxt").val(), 200, 200);
            
});
 
            
//URL演示
            
$("#url_btn").click(function () {
                
var urlTxt = $("#inputUrl").val();
                
if (urlTxt.indexOf("") < 
0
) {
                    
urlTxt = '' + urlTxt;
                
}
                
outputQRCod(urlTxt, 400, 400);
            
});
 
            
//联系人添加演示
            
$("#people_btn").click(function () {
                
var txt = "BIZCARD:N:" + $('#inputName').val() + ";T:" + $('#inputPost').val() + ";C:" + $('#inputCompany').val() + ";A:" + $('#inputAddress').val() + ";B:" + $('#inputMobile').val() + ";E:" + $('#inputEmail').val() + ";;";
                
outputQRCod(txt, 400, 400);
            
});
 
            
//WiFi连接演示
            
$("#wifi_btn").click(function () {
                
var txt = "WIFI:T:" + $('#WiFiType').val() + ";S:" + $('#inputWiFiName').val() + ";P:" + $('#inputWiFiPass').val() + ";;";
                
console.log(txt);
                
outputQRCod(txt, 400, 400);
            
});
        
});
 
        
//中文字符处理
        
function toUtf8(str) {
            
var out, i, len, c;
            
out = "";
            
len = str.length;
            
for (i = 0; i < len; i++) {
                
c = str.charCodeAt(i);
                
if ((c >= 0x0001) && (c <= 0x007F)) {
                    
out += str.charAt(i);
                
} else if (c > 0x07FF) {
                    
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                
} else {
                    
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                
}
            
}
            
return out;
        
}
 
        
//生成二维码
        
function outputQRCod(txt, width, height) {
            
//先清空
            
$("#code").empty();
            
//中文格式转换
            
var str = toUtf8(txt);
            
//生成二维码
            
$("#code").qrcode({
                
render: "table",
                
width: width,
                
height: height,
                
text: str
            
});
        
}
 
    
</
script
>
</
head
>
 
<
body
>
    
<
div 
id="main">
        
<
div 
class="demo">
            
<
p
>请输入内容然后点击按钮生成二维码:</
p
>
            
<
div 
id="code"></
div
>
            
<
h2
>演示1:</
h2
>
            
<
p
>
                
普通文本:<
input 
type="text" class="input" id="inputTxt" value="">
                
<
input 
type="button" id="txt_btn" value="生成二维码">
            
</
p
>
            
<
h2
>演示2:</
h2
>
            
<
p
>
                
URL 演示:<
input 
type="text" class="input" id="inputUrl" value="">
                
<
input 
type="button" id="url_btn" value="生成二维码">
            
</
p
>
            
<
h2
>演示3:</
h2
>
            
<
p
>加联系人:(选填)<
input 
type="button" id="people_btn" value="生成二维码"></
p
>
            
<
p
>
                
姓名:<
input 
type="text" class="input" id="inputName" value=""><
br 
/>
                
<
br 
/>
                
职位:<
input 
type="text" class="input" id="inputPost" value=""><
br 
/>
                
<
br 
/>
                
公司:<
input 
type="text" class="input" id="inputCompany" value=""><
br 
/>
                
<
br 
/>
                
地址:<
input 
type="text" class="input" id="inputAddress" value=""><
br 
/>
                
<
br 
/>
                
手机:<
input 
type="text" class="input" id="inputMobile" value=""><
br 
/>
                
<
br 
/>
                
邮箱:<
input 
type="text" class="input" id="inputEmail" value=""><
br 
/>
                
<
br 
/>
            
</
p
>
            
<
h2
>演示4:(现在的wifi一般都是WPA的,WEP的基本上10分钟内就能破解了)</
h2
>
            
<
p
>
                
WiFi名称:<
input 
type="text" class="input" id="inputWiFiName" value=""><
br 
/>
                
<
br 
/>
                
WiFi密码:<
input 
type="text" class="input" id="inputWiFiPass" value=""><
br 
/>
                
<
br 
/>
                
WiFi类型:<
select 
id="WiFiType"><
option 
value="WPA">WPA/WPA2</
option
>
                    
<
option 
value="WEP">WEP</
option
>
                    
<
option 
value="nopass">无加密</
option
>
                
</
select
>
                
<
input 
type="button" id="wifi_btn" value="生成二维码">
            
</
p
>
        
</
div
>
    
</
div
>
</
body
>
</
html
>

你们要什么效果就安装格式自己编辑一下就可以了,先闪了~~有机会再说一说二维码的美化

demo下载:http://pan.baidu.com/s/1pJGhV0f

转载地址:http://dlwno.baihongyu.com/

你可能感兴趣的文章
在redhat server 6 安装gcc-4.5.2
查看>>
我的友情链接
查看>>
自定义View Client 登录方式(一)
查看>>
cenOS+nginx+php+mysql (非一键包安装)
查看>>
我的友情链接
查看>>
我来自CSDN
查看>>
在mysql表中插入大量测试数据
查看>>
怎么给电脑设置IP地址和DNS地址,各系统设置IP/DNS几种方法
查看>>
面试总结之 oop desing 之 The Strategy Pattern
查看>>
必 备 习 题 集 (一)
查看>>
windows下批量部署简易脚本
查看>>
python爬虫入门—统计豆瓣电影评论词频
查看>>
【LoadRunner技术讲座4】利用sitescope监测监控mysql
查看>>
转:模态对话框的支持 (IE,Firefox,Chrome)
查看>>
Jenkins+QTP自动化测试框架
查看>>
《Node.js In Action》笔记之流程控制
查看>>
3518EV200 SDK学习1
查看>>
1163: 零起点学算法70——Yes,I can!
查看>>
2018-2019-2 网络对抗技术 20165318 Exp1 PC平台逆向破解
查看>>
关于图片或者文件在数据库的存储方式归纳
查看>>