Using Jquery.wechat to build a micro-trust Web application _jquery

Because recently their products to be in the micro-letter public number in the promotion, the need to provide some meaningful functions, so forced to embark on the support of micro-letter this point of no return.

As we all know, Tencent is such a magical company, their products in commercial success, but the document is really hard to compliment, Connaught a public number development platform, I unexpectedly can not find real, on the web development of the official document, some is the individual example, the rest ... Oh, there is a call for developers to exchange assistance Dongdong.

After reading the above picture, there is no such feeling, a bunch of people desperately want to know what happened, but there is no official statement! O (∩_∩) o haha

Said so much, hurriedly into the business, this issue is to talk about my pain in the struggle to write after the Jquery.wechat, a provider of unified API, based on Jquery.promise Jquery.plugin. I hope I can help you a lot.

First of all, it's quite simple to install.

Copy Code code as follows:

Bower Install--save Jquery-wechat

If do not need to bower, oneself from GitHub download, decompression, that is the same drop!

Loaded, and that is the same as the natural water

Copy Code code as follows:

<script type= "Text/javascript" src= "Bower_components/jquery/dist/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Bower_components/jquery-wechat/dist/jquery-wechat.min.js" ></script >

If you use the amd,cmd, such as delayed loading technology, you must also be an expert, I do not have to teach you how to configure it?

Use-simple, easy, unified, cool!

Enable Jquery.wechat Features
$.wechat.enable (); So easy!

Because the entire plugin is based on jquery.promise, you can also give it a chain:

Copy Code code as follows:

$.wechat.enable (). Done (function () {
Alert (' successfully enabled ');
}). Fail (function () {
Alert (' Enable failed ');
});

Considering the wide application of the current Single-page technology (SPA), the design of the tool class must consider the Enable/deactivate mechanism, or it may cause an unknown error.

Hide/Show Menu

Copy Code code as follows:

$.wechat.hidemenu (); Hide Menu
$.wechat.showmenu (); Show Menu

With Jquery.wechat enabled, you can invoke methods such as Hidemenu without having to write other methods into the enable done callback. The principle of jquery.wechat is that if the Jquery.wechat has not been enabled successfully, all operations will enter the queue, which is executed sequentially once the success is enabled, and will never be performed if the failure is enabled.

Hide/Show Bottom tool bar
$.wechat.hidetoolbar (); Hide the bottom tool bar
$.wechat.showtoolbar (); Show Bottom Toolbar

Turn on scan two-dimensional code interface
$.wechat.scanqrcode ();

Open the picture Preview tool

Copy Code code as follows:

$.wechat.preview ({
Current: ' http://xxx/img/pic001.jpg ',//After entering preview mode, show this picture directly
URLs: [
' Http://xxx/img/pic001.jpg ',
' Http://xxx/img/pic002.jpg ',
' Http://xxx/img/pic003.jpg ',
' Http://xxx/img/pic004.jpg ',
' Http://xxx/img/pic005.jpg ',
' Http://xxx/img/pic006.jpg '
]//All pictures to be displayed in preview mode
});

Get network status

Copy Code code as follows:

$.wechat.getnetworktype (). Done (function (response) {
$ (' #network '). Text (Response.split (': ') [1]);
});

The response format is as follows:

Copy Code code as follows:

Network_type:wifi WiFi Network
Network_type:edge non-wifi, including 3g/2g
Network_type:fail Network Disconnect
Network_type:wwan (2g or 3g)

Modify the sharing format

Every time I see someone else's app sharing it with a beautiful thumbnail, proper title and description, and even more, the message follows a line of fine print indicating who sent the message; and look at your own shared message, a blue default blank picture with a title that doesn't match, Would it be strange what logic put them in?

OK, let's solve this problem now:

Copy Code code as follows:

$.wechat.setshareoption ({
AppID: ' xxxx ',//small Mark AppID
Img_width: ' 60 ',
Img_height: ' 60 ',
Img_url:window.location.toString () + ' img/demo.jpg ',//thumbnail
Title: ' DEMO ',//titles
Desc: ' The description is set from $.wechat.setshareoption ',//description
Link:function () {
return window.location.toString (); Message sharing after the user clicks on the message to open the link address
},
Callback:function (response) {
alert (response); After sharing the callback function, common success and cancellation
}
});

Specific reference to the following screenshot:

This sharing format change will affect the four functions of sending friends, sharing the circle of friends, sharing the microblogging and sending messages. When set, click on the top right corner menu to open the menu, select any of the above four items, you can see the effect of the change

Close Current Page

Copy Code code as follows:

$.wechat.closewindow ();

Deactivate jquery.wechat mechanism

Copy Code code as follows:

$.wechat.destroy ();

When deactivated, all features are automatically reset back to the initial state
This feature is more commonly used in single page applications (SPA)