30 minutes to do a two-dimensional code card application, there is source!

Objective

30 minutes to take you with WEX5 to do a public number on the use of the two-dimensional code card, the corresponding technical points have detailed explanation, HD has code! (Click to download all source code)

QR code is now ubiquitous and pervasive. Big to a car, small to a packet of paper towels, the body is printed with two-dimensional code, marked. Prodigal The woman may say: did not want to buy, sincere! Just look at the beautiful, want to take a picture, who knows that a shot will pop up a payment interface, want to press exit but hand shake ... (This hand shaking, do not know under the kitchen knife will be stable a little?) ）
As a carrier of personal information, business cards are naturally suitable for the two-dimensional code of this form. Today, we try to use WEX5 mobile development tools to do an electronic two-dimensional code card, in addition to scanning code recognition, but also in the inside a key to identify and coexist in the phone address book, you can also share to friends. Pick up your phone and test it:

The core of this application is two:
The conversion of personal information into a two-dimensional code;
The card information carried by the QR code can be recognized by the mobile phone.
In order to achieve this demand, we need to use a business card format: vcard, about the vcard introduction can refer to this article: two-dimensional code card introduction.

vcard Format generation

Our requirements are relatively simple, we need to add business card information into the following vcard format:

This is the general string splicing, here is a problem, is the Chinese display problem, if the Chinese can be translated into two-dimensional code will appear garbled, so we need to convert it to utf-8 Universal encoding format:

The converted character information is then stitched into a vcard-formatted string:

This code has the optimization of space, you have to optimize the ha! Put the above vcard format string into the QR code to achieve our needs.

Convert two-dimensional code

String to the two-dimensional code of the software many, the algorithm introduced a lot, Web development application is more than the jquery QRCode plug-in:

https://github.com/jeromeetienne/jquery-qrcode，我们按照WeX5的require规范引用即可。1 require("jquery.qrcode.min.js"); 2 container.qrcode({ 3 text : txt 4 });

    Create two-dimensional code of the method as above: container for the above definition of the two-dimensional code container, because the default QR code size is 256*256, the size of the container is larger than the two-dimensional code; text is a string that needs to be placed in a QR code. The plugin also provides more settings parameters:

  1 render:  "canvas", //set rendering mode, and table rendering 2 width: 256, //set width 3 Height: 256, //set height 4 typenumber:-1, //calculation mode 5 correctlevel:qrerrorcorrectlevel.h, //error correction level 6 background:  "#ffffff", Span class= "hljs-comment" >//background color 7 foreground:  "#000000" //foreground color            

The default rendering method is canvas, which generates a canvas element, which is tabel by using a table to drain a QR code, which is less efficient. Of course, we use a canvas that is efficient.

However, canvas is not a picture, and the medium-long press is not recognized, so you need to convert the canvas into a picture format. There are several APIs that canvas transforms into pictures, and here I'm using a simple Todataurl ("image/png") approach.

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

If jquery does not use a lot of words may be a little bit of a problem, note that jquery is the element array operation, and the specific method such as Todataurl ("Image/png") is the method of the element, so you need to specify subscript 0. It is also important to note that the user may be modified, so every time you generate a QR code before you have to remember to do a canvas cleanup: $ (' canvas '). Remove ();

Then we completed the development of this small application.

Add points to play

Since the central location of the QR code does not hold information, it is possible to add its own image in the middle. Be careful not to go beyond the scope of debugging. It seems to be not so monotonous, the girls usually overtime p photos can be useful:

Black and white Two-dimensional code is not enough to choose, then change the color of Bai, according to the parameters of the plug-in configuration:

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

There is no end to a cool road:

Since the plugin is open source, it is quite simple to do the gradient color. First of all, we can guess its implementation principle, should be the whole canvas is divided into a lot of small pieces, and then draw the foreground color of these small pieces of background, two or so loop down to get the complete two-dimensional code. Obviously, we can get a gradient if we control the foreground of the brush or the background color. To change the source, then we can not use the compressed version, here we introduce two source files, and then modify jquery.qrcode.js this file.

in var Createcanvas = function (), locate the statement that sets the brush:

1 Ctx.fillstyle = Qrcode.isdark (row, col)? Options.foreground:options.background;

This statement is very understood, is to judge the value of this small piece to use the foreground or background color to draw, before the sentence to add a sentence:

1 options.foreground = Qrcode.isdark (row, col)? ' Hsla (' + (Row * 2) + ', 100%, 40%, 1) ': options.foreground;

Here is the color of the HSLA format to control the gradient, in general, all the color gradient is suitable for the HSLA format, only control the tonal changes can be achieved gradient, quite useful.

Here is the completion of the QR Code business card application of the local development, the following to see how to make it a can be spread within the public number application bar.

Public Number Application

The public number application can be a message answering service like a contact, or it can be a generic web app, and our QR code card is the form of a web app. The difference between this public number and the normal web app is that the public app is running on the client, and the usual web app is running under the browser. If we want to use the provided interface, such as share function, QR code function, upload image function, etc., we need to use our own server and server communication to obtain the appropriate permissions. The process is as follows:

For specific process and parameter configuration, please refer to the Public Number development document: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang= Zh_cn. In short, our front-end page requests configuration parameters to our own server, our server requests permission after receiving the request, and after giving back some parameters, we do the processing to configure the parameters back to our front-end page, then we can use some interface of the client.

This configuration looks like a few steps, very simple appearance, but in fact is the trap, Baidu can be found everywhere are pits, although not what advanced things, but it is very easy to make mistakes. Fortunately, the WEX5 official has helped us to package the configuration module, only need to enter the public number parameters to complete the configuration, really intimate!

There are two places to modify the file:

1) weixin.config.xml file in Baas directory, enter the parameters of our public number and compile the model separately.

2) Config.json file under the Ui2systemconfig directory, enter our public number parameter here and save it.

The wxappid here is the AppID of the public number, to be changed. Debug mode switch, each call API interface will output the corresponding debugging information, closed it, we call the front end of the manual console output information can be.
After modifying it, save and start the Tomcat service, map the extranet to our intranet machine, and then the public platform configuration. There are several places that need to be configured:
1) Settings >> public number settings >> function settings >>js interface secure domain name, set to your top-level full domain name, such as abc.website.com, do not need to add HTTP protocol.
2) Development >> Basic Configuration >> Server configuration, the information here should correspond to the contents of Weixin.config.xml, note that the case should be exactly the same. If the configuration fails, check if the content is wrong, if the Tomcat service is turned on, and if the extranet can access the machine.
3) Development >> Interface Permissions >> Web page authorization to get the user basic information, here is also set for your top-level full domain name, such as abc.website.com, do not need to add the HTTP protocol.

If all is configured successfully, we can use the interface directly on the front page. Here WeX5 development tools also help us to encapsulate a variety of interfaces, loading on demand. What we're using here is the shared interface:

Note that we share the link does not directly write our fixed URL, but to use the page authorization request page to share. Because if we write the fixed URL directly, the shared link is not associated with the public number, so open the sharing link and share the time, it will not call us to write a good link format to share, and become a common page sharing. The differences are as follows:

Link is supposed to be like this:https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri& Response_type=code&scope=scope&state=state#wechat_redirect
For specific parameters, please see the Public Platform development document Https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN, Note redirected links need to be URL-transcoded. The picture link also needs to write the complete URL, but cannot write relative path, can not recognize your relative path.

After such a round, finally in the can see our shelves of applications, but, we don't even have the server AH Pro! Now just use the local computer to do the server.

Two-dimensional Code card application is introduced here, the code word is not easy, click like ha!

30 minutes to do a two-dimensional code card application, there is source!