解决H5在微信浏览器中保存联系人问题

最新推荐文章于 2022-04-25 10:14:35 发布

这个杀手好冷

最新推荐文章于 2022-04-25 10:14:35 发布

阅读量3.7k

点赞数

分类专栏：前端 javascript 文章标签：保存联系人微信浏览器保存联系人 QRCode.js

本文链接：https://blog.csdn.net/qq_43649479/article/details/84030789

版权

前端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

javascript

22 篇文章 0 订阅

订阅专栏

利用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="xxxx@xxx.com" 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>

如果出现乱码拼接的vcard传到 utf16to8函数中

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;
    }

所需要的工具和源代码，点击这里

这个杀手好冷

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
解决H5在微信浏览器中保存联系人问题

利用QRCode.js 生成二维码。可离线生成，主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库效果图上代码！！！！<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; char...
复制链接

扫一扫