利用vcard和qrcode.js產生二維碼匯入連絡人

標籤：code   移動   canvas   amp   java   小米   tar   font   for   

vCard是一種容許交換個人資訊的資料規範，vCard資料格式的標識符是VCARD，vCard資料格式行是: 類型 [;參數]:值，具體的介紹百度都有，我們可以通過vcard來進行通訊錄的儲存，名片的交換

基本格式：

BEGIN:VCARDN:姓;名;;;FN: 名  姓TITLE:XX集團前端ADR;WORK:;;北京市五環區GT路19號;;;;TEL;CELL,VOICE:159351111111TEL;WORK,VOICE:010-6666666URL;WORK:www.gt.comEMAIL;INTERNET,HOME:[email protected]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});// 使用 APIqrcode.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 = "[email protected]";

拼接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產生二維碼匯入連絡人