30分钟作一个二维码名片应用，有源码！

前言

    30分钟带你用Wex5作一个微信公众号上使用的二维码名片，相应技术点有详细讲解，高清有码！(点击下载所有源码)

    二维码如今是无处不在，无孔不入了。大到一辆汽车，小到一包纸巾，身上都印有二维码，明码标价。败家娘们可能会说：没想过要买的，真心的！就是看着漂亮嘛，想拍个照片，谁知道一拍就弹出个支付界面，想按退出可是手抖。。。（这手抖的，不知道放在菜刀下会不会稳定一点？）
    做为我的信息的载体，名片也是自然适合二维码这种形式的。今天小茄就试着用WeX5移动开发工具作一个电子的二维码名片，除了扫码识别外，还能够在微信里面一键识别并存到手机通信录里面，也能够经过微信分享给朋友们。拿起手机测试一下吧：

    

这个应用的核心就是两个：
    将我的信息转换成二维码；
    二维码携带的名片信息可被手机识别。
为了实现这个需求，咱们须要用到一个名片格式：vcard，关于vcard的介绍能够参考这篇文章：二维码名片介绍。

vcard格式生成

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

    这就是通常的字符串拼接了，这里有个问题，就是中文的展现问题，若是直接将中文拿去转化成二维码的话就会出现乱码，因此咱们须要将其转换成utf-8的通用编码格式：
    
    而后将转换好的字符信息拼接成vcard格式的字符串：
    
    这段代码有优化的空间，就交给大家去优化了哈！将上面的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的照片能够排上用场啦：
    

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

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

    

    耍酷的路上没有终点：
    

    既然插件已经开源了，那要作渐变颜色也是至关简单的。首先，咱们能够猜想它的实现原理，应该是整个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是运行在浏览器下面的。咱们若是要使用微信提供的接口，好比说分享功能、二维码功能、上传图片功能等，都须要用咱们本身的服务器与微信服务器通信获取相应的权限。流程以下：

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

    这个配置看起来就那么几步，很简单的样子，但实际上是内藏陷阱，百度一下就能够发现处处都是坑，虽然不是什么高深的东西，但却很是容易搞错。幸运的是，WeX5官方已经帮咱们封装好了微信的配置模块，只须要输入公众号的参数便可完成配置，着实贴心！

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

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

2）UI2systemconfig目录下的config.json文件，这里也输入咱们的公众号参数并保存。

这里的wxAppId就是公众号的appId，要改过来。debug为调试模式开关，每次调用微信api接口都会输出相应的调试信息，关闭了它，咱们在前端调用的时候手动console输出信息便可。
修改好以后保存并启动Tomcat服务，作好外网映射到咱们的内网机器，而后再上微信公众平台配置。须要配置的地方有如下几个：
1） 设置>>公众号设置>>功能设置>>js接口安全域名，设置为你的顶级全域名，如 abc.website.com，不须要加http协议。
2） 开发>>基本配置>>服务器配置，这里的信息要和weixin.config.xml的内容对应，注意大小写也要彻底同样。这里若是配置失败的话，请检查内容是否有错，Tomcat服务是否开启，外网是否能访问本机。
3） 开发>>接口权限>>网页受权获取用户基本信息，这里也是设置为你的顶级全域名，如 abc.website.com，不须要加http协议。

若是都配置成功的话，咱们在前端页面就能够直接使用微信的接口了。这里WeX5开发工具也帮咱们封装好了各类接口，按需加载便可。咱们这里用到的是分享接口：

    这里注意咱们分享的连接不要直接写咱们的固定网址，而要用微信网页受权请求页面来进行分享。由于假如咱们直接写固定网址的话，分享出去的连接就跟公众号没了关联，这样打开分享连接再分享的时候，就不会调用咱们写好的连接格式去分享，而变成了普通网页的分享。差别以下：

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，而不能写相对路径，微信可不认你的相对路径。

通过这么一轮，终于在微信中能看到咱们上架的应用了，可是，咱们连服务器都尚未啊亲！如今只是用本地电脑作服务器而已。

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