利用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:[e-mail]
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 = "[e-mail]";

拼接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二維碼展示的安卓手機不會出現識別圖中二維碼等等  后續再繼續寫