利用vcard和qrcode.js生成二维码导入联系人
vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的交换
基本格式:
BEGIN:VCARD
N:姓;名;;;
FN: 名 姓
TITLE:XX集团前端
ADR;WORK:;;北京市五环区GT路19号;;;;
TEL;CELL,VOICE:159351111111
TEL;WORK,VOICE:010-6666666
URL;WORK:www.gt.com
EMAIL;INTERNET,HOME:253413617@qq.com
END:VCARD
包含的信息 包括 姓名 职位 工作地址 座机 手机 邮箱 网址等基本信息
这里采用二维码名片分享分享方式 通过移动端扫一扫的功能来进行通讯录保存
生成二维码的工具 使用的是qrcode.js 原理和草料一样 将字符串进行转化为二维码呈现出来 这里有他的介绍 http://code.ciaoca.com/javascript/qrcode/
// 简单方式
new QRCode(document.getElementById('qrcode'), 名片信息vcard字符串; // 设置参数方式
var qrcode = new QRCode('qrcode', {
text: 'your content',
width: 256,
height: 256,
colorDark : '#000000',前景色
colorLight : '#ffffff',背景色
correctLevel : QRCode.CorrectLevel.H
}); // 使用 API
qrcode.clear();
qrcode.makeCode('new content');
首先定义一个可以被手机识别的vcard的字符串格式
var a, b = "姓",
c = "名",
d = "XX集团前端",
e = "北京市五环区GT路19号",
g = "159351111111",
h = "010-6666666",
i = "www.gt.com",
j = "253413617@qq.com";
拼接vcard字符串
a = "BEGIN:VCARD", a += "\r\nN:" + b + ";" + c + ";;;", a += "\r\nFN: " + c + " " + b, d && (a += "\r\nTITLE:" + d), e && (a += "\r\nADR;WORK:;;" + e + ";;;;"), g && (a += "\r\nTEL;CELL,VOICE:" + g), h && (a += "\r\nTEL;WORK,VOICE:" + h), i && (a += "\r\nURL;WORK:" + i), j && (a += "\r\nEMAIL;INTERNET,HOME:" + j), a += "\r\nEND:VCARD"
这样更清楚一点:
a = "BEGIN:VCARD", a += "\r\nN:" + b + ";" + c + ";;;",
a += "\r\nFN: " + c + " " + b, d && (a += "\r\nTITLE:" + d),
e && (a += "\r\nADR;WORK:;;" + e + ";;;;"), g && (a += "\r\nTEL;CELL,VOICE:" + g),
h && (a += "\r\nTEL;WORK,VOICE:" + h), i && (a += "\r\nURL;WORK:" + i), j && (a += "\r\nEMAIL;INTERNET,HOME:" + j),
a += "\r\nEND:VCARD"
然后利用jquery.qrcode.min.js
$("#qrcode").html("");
$("#qrcode").qrcode({width: 270, height: 270, correctLevel: 0,text:a});
这里有一个点 就是 会出现乱码现象 这是因为中文编码不统一 所以还得使用一个转化的方法
/*utf16转utf8*/
function utf16to8(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;
}
在进行转二维码
$("#qrcode").qrcode({width: 270, height: 270, correctLevel: 0,text:meg});
效果图:
通过微信扫描 你会得到
通过小米手机 你会得到
这样一个可以分享的个人名片就完成了 扫一扫就可以加对方进入自己的手机通讯录了
这里面还有很多点 没有说明 包括微信端分享名片,canvas二维码展示的安卓手机不会出现识别图中二维码等等 后续再继续写
利用vcard和qrcode.js生成二维码导入联系人的更多相关文章
- QRCode.js生成二维码
QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...
- qrcode.js生成二维码因字符串过长而报错
前端使用qrcode.js生成二维码的时候.有时候是会出现 qrcode length overflow (1632>1056) 目前使用的有效的解决办法是重新下载新版的qrcode.js 下载 ...
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
- QRCode.js 生成二维码
QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码
1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...
- qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
- nuxt使用QRCode.js 生成二维码
QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...
- jquery.qrcode.js生成二维码(前端生成二维码)
官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...
随机推荐
- Fiddler模拟低速网络
1. 打开 Rules -> Customize Rules,ctrl + F 找 300 2.修改上传.下载速度,保存 ctrl + s 3.启动模拟网络限速 4.想要取消模拟网络限速,取消勾 ...
- ansible笔记(9):常用模块之包管理模块
ansible笔记():常用模块之包管理模块 yum_repository模块 yum_repository模块可以帮助我们管理远程主机上的yum仓库. 此处我们介绍一些yum_repository模 ...
- jqueryui插件slider的简单使用
<!DOCTYPE html> <html> <head> <title>slider</title> <meta charset=& ...
- Cassandra索引详解
转自: https://www.cnblogs.com/bonelee/p/6278943.html 1.什么是二级索引? 我们前面已经介绍过Cassandra之中有各种Key,比如Primary K ...
- 【ORIGINATE】详解
originate 用法如下: originate <call url> <exten> |&<application_name>(<app_args ...
- Centos 安装 Nginx 详细过程
系统 Centos 64位 第一步,首先下载Nginx的tar包及安装依赖的工具tar包. Nginx: http://nginx.org/en/download.html Nginx需要依赖下面3个 ...
- C# web Api ajax发送json对象到action中
直接上代码: 1.Product实体
- Oracle Package的全局变量与Session
Oracle Package的全局变量与Session2012-07-26 aaie_ 阅 3595 转 10简单讲,同一个session下pageckage中的全局变量时公共的,会导致冲突.以下是一 ...
- LuoGu P1006 传纸条
题目传送门 这题嘛...方格取数和这题一样一样的 只不过这题是从左上到右下再回去罢了(来回一趟和来两趟有区别么?没有,那么这题和上题用一样的转移和状态就行了 没什么好说的,说一下我的错误好了: 人家图 ...
- js学习——基础知识
数据类型 函数.方法 变量作用域 运算符 条件语句 break和continue typeof 错误(异常) 变量提升 严格模式 JSON void(0) JavaScript ...