用WeX5做一个二维码名片应用！有源码！

本文由 起步科技 原创。未经许可，禁止转载！

作者：起步科技前端研究员小茄，专注分享HTML5 App快速开发工具 WeX5 的黑魔法以及各种有趣炫酷的前端技术。

前言

二维码现在是无处不在，无孔不入了。大到一辆汽车，小到一包纸巾，身上都印有二维码，明码标价。败家娘们可能会说：没想过要买的，真心的！就是看着漂亮嘛，想拍个照片，谁知道一拍就弹出个支付界面，想按退出但是手抖了。。。（这手抖的，不知道放在菜刀下会不会稳定一点？）而名片，也早就使用了二维码技术，扫一扫一键存到手机通讯录里面，是手机通讯录哦。今天小茄就试着用WeX5做一个电子的二维码名片，除了扫码外，还可以在微信里面一键识别并存到手机通讯录里面哦。

先上效果图

 

生成的二维码扫码即可创建通讯录，保存下来通过微信发给朋友，通过长按二维码识别也可以完成名片的分享。拿起手机测试一下吧：

这个应用的核心就是两个：将个人信息转换成二维码；二维码携带的名片信息可被手机识别。为了实现这个需求，我们需要用到一个名片格式：vcard，关于vcard的介绍可以参考这篇文章：http://lzw.me/a/php-qrcode-vcard.html。

vcard格式生成

我们的需求比较简单，需要将名片信息拼接成如下vcard格式：

BEGIN:VCARD
VERSION:3.0
FN:任侠
TEL;CELL;VOICE:15201280000
TEL;WORK;VOICE:010-62100000
TEL;WORK;FAX:010-62100001
EMAIL;PREF;INTERNET:lzw#lzw.me
URL:http://lzw.me
orG:志文工作室
ROLE:产品部
TITLE:CTO
ADR;WORK;POSTAL:北京市朝阳区北四环中路35号;100101
REV:2012-12-27T08:30:02Z
END:VCARD

这就是一般的字符串拼接了，这里有个问题，就是中文的展示问题，如果直接将中文拿去转化成二维码的话就会出现乱码，所以我们需要将其转换成utf-8的通用编码格式：

  1 function toUtf8(str) {
  2     var i, len, c, out = "";
  3     if (!str) {
  4         return false;
  5     }
  6     len = str.