前言

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

先上效果图

001

 

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

002

这个应用的核心就是两个:将个人信息转换成二维码;二维码携带的名片信息可被手机识别。为了实现这个需求,我们需要用到一个名片格式: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.length;
  7     for (i = 0; i < len; i++) {
  8         c = str.charCodeAt(i);
  9         if ((c >= 0x0001) && (c <= 0x007F)) {
 10             out += str.charAt(i);
 11         } else if (c > 0x07FF) {
 12             out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
 13             out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
 14             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
 15         } else {
 16             out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
 17             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
 18         }
 19     }
 20     return out;
 21 }
然后将转换好的字符信息拼接成vcard格式的字符串:
  1 function toVcf(person) {
  2     var vcf = {};
  3     vcf.name = person.name && 'N:' + toUtf8(person.name) + '\r\n';
  4     vcf.mobile = person.mobile && 'TEL;TYPE=WORK,VOICE:' + toUtf8(person.mobile) + '\r\n';
  5     vcf.org = person.org && 'ORG:' + toUtf8(person.org) + '\r\n';
  6     vcf.web = person.web && 'URL;WORK:' + toUtf8(person.web) + '\r\n';
  7     vcf.adr = person.adr && 'ADR;TYPE=WORK,PREF:' + toUtf8(person.adr) + ';\r\n';
  8     vcf.email = person.email && 'EMAIL;PREF;INTERNET:' + toUtf8(person.email) + '\r\n';
  9     vcf.tel = person.tel && 'TEL;TYPE=WORK,VOICE:' + toUtf8(person.tel) + '\r\n';
 10     vcf.title = person.title && 'TITLE:' + toUtf8(person.title) + '\r\n';
 11     return 'BEGIN:VCARD\r\nVERSION:3.0\r\n' + vcf.name + vcf.mobile + vcf.org +
 12             vcf.email + vcf.web + vcf.adr + vcf.tel + vcf.title + 'END:VCARD'
 13 }
这段代码有优化的空间,就交给你们去优化了哈!将上面的vcard格式字符串放入到二维码中,即可实现我们的需求。

 

转换二维码

 

字符串转二维码的软件很多,算法介绍也不少,web开发中应用比较多的是jQuery的qrcode插件:https://github.com/jeromeetienne/jquery-qrcode,我们按照WeX5的require规范引用即可。
  1 require("jquery.qrcode.min.js");
  2 container.qrcode({
  3     text : txt
  4 });
创建二维码的方法如上:container为上文定义的二维码容器,由于默认二维码的尺寸是256*256,容器的尺寸要比二维码大;text为需要放入二维码中的字符串。插件也提供了更多的设置参数:
  1 render   : "canvas",   //设置渲染方式,还有以table方式渲染  
  2 width       : 256,     //设置宽度  
  3 height      : 256,     //设置高度  
  4 typeNumber  : -1,      //计算模式  
  5 correctLevel    : QRErrorCorrectLevel.H,//纠错等级  
  6 background      : "#ffffff",//背景颜色  
  7 foreground      : "#000000" //前景颜色  

默认的渲染方式为canvas,也就是会生成一个canvas元素,tabel方式是使用表格排出一个二维码,效率较低。当然,咱们用的是高效的canvas。

但是canvas生成的不是图片,在微信中长按也是不会被识别出来的,所以需要将canvas转换成图片格式。canvas转换成图片的API也有几种,这里我用的是简单粗暴的 toDataURL(“image/png”)方法。

  1 var imgSrc = $('canvas').hide()[0].toDataURL("image/png");
  2 $('.cd-img').attr("src", imgSrc);

如果jQuery用的不多的话可能会出点小问题,要注意jQuery都是对元素数组进行操作,而具体的方法如toDataURL(“image/png”)则是元素的方法,所以需要指定下标 0。还有一点需要注意的就是用户可能会修改,所以每次生成二维码前都要记得进行一次canvas的清理:$(‘canvas’).remove();

然后,然后我们就完成了这个小应用的开发啦。

增加点玩法

由于二维码中央位置是不保存信息的,所以可以在中间加入自己的图像。注意调试一下不要超出范围即可。看起来终于没那么单调了,女生们平常加班P的照片可以排上用场啦:

004-1

黑白色的二维码不够选,那就变点颜色呗,按照插件的参数配置一下:

  1 container.qrcode({
  2     text : txt,
  3     background : "#000",  //背景颜色  
  4     foreground : "#3690ec"   //前景颜色 
  5 });

005

耍酷的路上没有终点:

003

既然插件已经开源了,那要做渐变颜色也是相当简单的。首先,我们可以猜测它的实现原理,应该是整个canvas被划分成很多小块,再分别对这些小块绘制前景色背景色,横竖两个循环下来就可以得到完整的二维码了。那显然,只要我们控制画笔的前景或者背景色做渐变就可以得到渐变效果了。要改源码,那就不能用压缩版了,这里我们引入两个源文件,然后修改jquery.qrcode.js这个文件。

在var createCanvas = function() 函数内,找到设置画笔的语句:

  1 ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;

这个语句很好懂,就是判断这个小块的值去采用前景色或者背景色绘制,在这句语句之前加入一句:

  1 options.foreground = qrcode.isDark(row, col) ? 'hsla(' + (row * 2) + ', 100%, 40%, 1)' : options.foreground;

这里采用的是hsla格式的颜色来控制渐变,一般来说所有的颜色渐变都适合用hsla格式,只控制色调变化既可实现渐变,相当好用。

到这里就完成了二维码名片应用的本地开发啦,下面来看看如何将它做成一个可以在微信内传播的公众号应用吧。

微信公众号应用

微信公众号应用可以是微信联系人那样的消息应答服务,也可以是一般的web app,我们的二维码名片就是web app的形式。这个微信公众号应用跟普通的web app的不同就是,公众号应用是运行在微信客户端的,而平常的web app是运行在浏览器下面的。我们如果要使用微信提供的接口,比如说分享功能、二维码功能、上传图片功能等,都需要用我们自己的服务器与微信服务器通讯获取相应的权限。流程如下:

1

具体流程和参数配置请参考微信公众号开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN。简单来说就是我们的前端页面向我们自己的服务器请求配置参数,我们的服务器接到请求之后再向微信服务器申请权限,微信把一些参数给回来之后,我们再做处理将参数给回我们的前端页面进行配置,然后就可以使用微信客户端的一些接口了。

这个配置看起来就那么几步,很简单的样子,但其实是内藏陷阱,百度一下就可以发现到处都是坑,虽然不是什么高深的东西,但却非常容易搞错。幸运的是,wex5官方已经帮我们封装好了微信的配置模块,只需要输入公众号的参数即可完成配置,着实贴心!

要修改的文件有两个地方:

1)Baas目录下的weixin.config.xml文件,分别输入我们公众号的参数并进行模型编译。

006  007

2)UI2\system\config目录下的config.json文件,这里也输入我们的公众号参数并保存。

008 009

这里的wxAppId就是公众号的appId,要改过来。debug为调试模式开关,每次调用微信api接口都会输出相应的调试信息,关闭了它,我们在前端调用的时候手动console输出信息即可。

修改好之后保存并启动Tomcat服务,做好外网映射到我们的内网机器,然后再上微信公众平台配置。需要配置的地方有以下几个:

1) 设置>>公众号设置>>功能设置>>js接口安全域名,设置为你的顶级全域名,如 abc.website.com,不需要加http协议。

2) 开发>>基本配置>>服务器配置,这里的信息要和weixin.config.xml的内容对应,注意大小写也要完全一样。这里如果配置失败的话,请检查内容是否有错,Tomcat服务是否开启,外网是否能访问本机。
3) 开发>>接口权限>>网页授权获取用户基本信息,这里也是设置为你的顶级全域名,如 abc.website.com,不需要加http协议。

如果都配置成功的话,我们在前端页面就可以直接使用微信的接口了。这里WeX5也帮我们封装好了各种接口,按需加载即可。我们这里用到的是分享接口:

  1 var base = require("$UI/system/api/native/base");
  2 var share = require("$UI/system/api/native/share");
  3 
  4 // 分享给微信好友
  5 share.onMenuShareAppMessage({
  6     title : '我的二维码名片',
  7     desc : '长按二维码识别,一键将我的名片存到手机通讯录,还可以在线制作名片分享给朋友们',
  8     link : shareUrl,
  9     imgUrl : imgUrl,
 10     success : function(res) {
 11         // 用户确认分享后执行的回调函数
 12         console.log('分享给朋友成功!');
 13     },
 14     cancel : function(res) {
 15         // 用户取消分享后执行的回调函数
 16         console.log('取消分享!');
 17     }
 18 });

这里注意我们分享的链接不要直接写我们的固定网址,而要用微信网页授权请求页面来进行分享。因为假如我们直接写固定网址的话,分享出去的链接就跟公众号没了关联,这样打开分享链接再分享的时候,就不会调用我们写好的链接格式去分享,而变成了普通网页的分享。差异如下:

010

Link 应该是这样的:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

具体参数请看微信公众平台开发文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN,注意重定向的链接需要进行url转码。图片链接也需要写完整url,而不能写相对路径,微信可不认你的相对路径。

经过这么一轮,终于在微信中能看到我们上架的应用了,但是,我们连服务器都还没有啊亲!现在只是用本地电脑做服务器而已。

一键部署之cloudx5

最新消息:起步科技已经推出了基于Docker容器技术的cloudx5云平台,亲们只需要注册个账号就能一键部署到云上了,服务器什么的,byebye!

使用非常简单,参考官网傻瓜式操作:http://docs.wex5.com/about-cloudx5/ 云时代,就要用最云的方式去开发云上应用!

二维码名片的应用就介绍到这里啦,码字不易,随手点赞哈!

 

–来自Wex5开发者小茄,需要源码的同学请留言邮箱!