解決H5在微信瀏覽器中儲存聯絡人問題
阿新 • • 發佈：2018-12-14
利用QRCode.js 生成二維碼。 可離線生成，
主要是通過獲取 DOM 的標籤,再通過 HTML5 Canvas 繪製而成,不依賴任何庫
效果圖
上程式碼！！！！
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>手機名片生成器</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <link rel="stylesheet" href="./css/normalize.min.css" /> <script type="text/javascript" src="./js/zepto.min.js"></script> <script type="text/javascript" src="./js/qrcode.js"></script> <style type="text/css"> #mytable { width: 100%; } #mytable, #mytable td { border: 1px solid #ccc; } #mytable input, #mytable select { height: 40px; border: none; width: 100%; -webkit-appearance: none; box-sizing: border-box; outline: none; } .title { text-align: right; padding-right: 5px; } #qrcode { text-align: center; width: 100%; overflow: hidden; padding: 20px 0; } #tips { position: fixed; bottom: -40%; left: 50%; display: inline-block; padding: 10px; border-radius: 10px; background-color: rgba(0,0,0,.8); color: #fff; text-align: center; } </style> </head> <body> <table id="mytable"> <tbody> <tr> <td colspan="4"> <div style="height: 60px; line-height: 60px; text-align: center; font-size: 24px;"> 手機名片生成器 </div></td> </tr> <tr> <td width="25%" class="title">姓氏</td> <td width="25%"><input type="text" id="fname" placeholder="姓氏" maxlength="4" /></td> <td width="25%" class="title">名字</td> <td width="25%"><input type="text" id="name" placeholder="名字" maxlength="4" /></td> </tr> <tr> <td class="title">職稱</td> <td colspan="3"><input type="text" id="title" placeholder="職稱" maxlength="10" /></td> </tr> <tr> <td class="title">行動電話</td> <td colspan="3"><input type="tel" id="cell" placeholder="xxx-xxxx-xxxx" maxlength="13" /></td> </tr> <tr> <td class="title">家庭電話</td> <td colspan="3"><input type="tel" id="home" placeholder="xxx-xxxxxxxx" maxlength="13" /></td> </tr> <tr> <td class="title">家庭住址</td> <td colspan="3"><input type="text" id="adr" placeholder="家庭住址" maxlength="20" /></td> </tr> <tr> <td class="title">公司名稱</td> <td colspan="3"><input type="text" id="org" placeholder="公司名稱" maxlength="20" /></td> </tr> <tr> <td class="title">個人網站</td> <td colspan="3"><input type="url" id="url" placeholder="http://www.xxx.com" maxlength="25" /></td> </tr> <tr> <td class="title">電子郵箱</td> <td colspan="3"><input type="email" id="email" placeholder="[email protected]" maxlength="25" /></td> </tr> <tr> <td class="title">生日</td> <td colspan="3"><input type="date" id="bday" placeholder="yyyy-mm-dd" /></td> </tr> <tr> <td><select id="radius"><option value="0">直角</option><option value="0.25">小圓角</option><option value="0.5">大圓角</option></select></td> <td><select id="fill"><option value="#000">黑色塊</option><option value="#002C7D">藍色塊</option><option value="#AE4141">紅色塊</option><option value="#FF79E1">粉色塊</option><option value="#7CFF57">綠色塊</option></select></td> <td><select id="mode"><option value="0">無簽名</option><option value="1">簽名1</option><option value="2">簽名2</option></select></td> <td><select id="fontcolor"><option value="#000">黑簽名</option><option value="#002C7D">藍簽名</option><option value="#AE4141">紅簽名</option><option value="#FF79E1">粉簽名</option><option value="#7CFF57">綠簽名</option></select></td> </tr> <tr> <td colspan="4"><input type="button" onclick="createvcf()" value="生成名片二維碼" /></td> </tr> </tbody> </table> <div id="qrcode"> <div style="box-sizing: border-box; padding: 0 20px; width: 100%; text-align: left;"> 本工具可將你的資訊生成一張二維碼，你可以按住生成的二維碼將其儲存至手機然後通過微信或者其他通訊工具發給其他人，其他使用者掃描你的二維碼之後可自動將你的資訊儲存至你的 <span style="color: red;">手機通訊錄</span>。注意是 <strong style="color: red;">手機通訊錄</strong>哦~ <br />使用過程中完全不佔你流量，不竊取你任何資訊，開啟本頁面後斷開手機網路依舊可以 <span style="color: red;">免流量離線生成</span>二維碼。 </div> </div> <div id="tips"></div> <script type="text/javascript"> function createvcf() { var a, b = $("#fname").val().replaceAll(" ", ""), //姓氏 c = $("#name").val().replaceAll(" ", ""), //名字 d = $("#title").val().replaceAll(" ", ""), //職稱 e = $("#adr").val().replaceAll(" ", ""), //家庭住址 f = $("#org").val().replaceAll(" ", ""), //公司名稱 g = $("#cell").val().replaceAll(" ", ""), //行動電話 h = $("#home").val().replaceAll(" ", ""), //家庭電話 i = $("#url").val().replaceAll(" ", ""), //個人網站 j = $("#email").val().replaceAll(" ", ""), //電子郵箱 k = $("#bday").val().replaceAll(" ", ""); //生日 b ? c ? g || h ? (a = "BEGIN:VCARD", a += "\r\nN:" + b + ";" + c + ";;;", a += "\r\nFN: " + c + " " + b, d && (a += "\r\nTITLE:" + d), e && (a += "\r\nADR;HOME:;;" + e + ";;;;"), f && (a += "\r\nORG:" + f), g && (a += "\r\nTEL;CELL,VOICE:" + g), h && (a += "\r\nTEL;HOME,VOICE:" + h), i && (a += "\r\nURL;WORK:" + i), j && (a += "\r\nEMAIL;INTERNET,HOME:" + j), k && (a += "\r\nBDAY:" + k), a += "\r\nEND:VCARD", $("#qrcode").empty().qrcode({ render: "image", ecLevel: "0" == $("#mode").val() ? "L": "H", size: 300, background: "#fff", fill: $("#fill").val(), radius: $("#radius").val(), mode: 1 * $("#mode").val(), fontcolor: $("#fontcolor").val(), label: b + c, text: a }), //提示框 tips("名片生成成功"), window.scrollTo(0, 1e3)) : tips("必須輸入一個電話") : tips("請填寫您的名字") : tips("請填寫您的姓氏") } String.prototype.replaceAll = function(a, b) { return this.replace(new RegExp(a.replace(/([\(\)\[\]\{\}\^\$\+\-\*\?\.\"\'\|\/\\])/g, "\\$1"), "ig"), b) }; var _tipstime, tips = function(a) { _tipstime && clearTimeout(_tipstime); var b = $("#tips").text(a); b.css({ transform: "translateX(" + -b.width() / 2 + "px)", bottom: "20%" }), _tipstime = setTimeout(function() { b.empty().css("bottom", "-40%") }, 1500) }; </script> </body> </html>
所需要的工具和原始碼，點選這裡