Use jQuery.wechat to build WeChat WEB application_jquery

Because recently my products have to be promoted in the WeChat public account and need to provide some meaningful functions, so I was forced to embark on the road of no return by supporting WeChat.

As we all know, Tencent is such a magical company. Their products have achieved great success in business, but the documentation is really hard to compliment. I can’t find the real documentation about Noda’s public account development platform. Some of the official documents on web development are just individual examples, and the rest... Haha, there is something called Developer Exchange and Mutual Assistance.

After reading the picture above, do you have the feeling that a bunch of people are desperately trying to know what happened, but there is no official statement! o(∩_∩)o Haha

Having said so much, let’s quickly get to the point. What I want to talk about in this issue is jQuery.wechat, which I wrote after struggling in pain, a jQuery.plugin based on jQuery.promise that provides a unified API. Hope it helps everyone.

First of all, it’s pretty simple to install

Copy code The code is as follows:

bower install --save jquery-wechat

If you don’t use bower and download and unzip it yourself from Github, it’s the same thing!

Loading, it’s as natural as water

Copy code The code is as follows:

If you use lazy loading technology such as amd and cmd, you must be an expert. You don’t need me to teach you how to configure it, right?

Use - simple, easy, unified and fun!

Enable jQuery.wechat functionality
$.wechat.enable(); //So easy!

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

Copy code The code is as follows:

$.wechat.enable().done(function(){
alert('activated successfully');
}).fail(function(){
alert('Activation failed');
});

Considering the current wide application of single page technology (SPA), the design of tool classes must consider the enable/disable mechanism, otherwise unknown errors may occur.

Hide/show menu

Copy code The code is as follows:

$.wechat.hideMenu(); //Hide menu
$.wechat.showMenu(); //Show menu

After enabling jQuery.wechat, you can call methods such as hideMenu at will without writing other methods into the enabled done callback. The implementation principle of jQuery.wechat is that if jQuery.wechat has not been successfully enabled, all operations will be queued. Once enabled successfully, they will be executed sequentially; if the enablement fails, they will never be executed.

Hide/show bottom toolbar
$.wechat.hideToolbar(); //Hide the bottom toolbar
$.wechat.showToolbar(); //Show bottom toolbar

Open the QR code scanning interface
$.wechat.scanQRcode();

Open the image preview tool

Copy code The code is as follows:

$.wechat.preview({
Current: 'http://xxx/img/pic001.jpg', //After entering preview mode, display 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'
] ]                                                                                                                                                                                             });

Get network status

Copy code The code is as follows:

$.wechat.getNetworkType().done(function(response) {
$('#network').text(response.split(':')[1]);
});

The response format is as follows:

Copy code The code is as follows:

network_type:wifi wifi network
network_type:edge Non-wifi, including 3G/2G
network_type:fail Network disconnection
network_type:wwan (2g or 3g)

Modify sharing format

Every time I see a message shared by someone else’s app, it comes with a beautiful thumbnail, appropriate title and description. What’s more, there is a line of small text below the message indicating who sent the message; and then Look at the message you shared, a blue default blank picture with a mismatched title. Do you wonder what logic put them in?

Fortunately, let’s solve this problem now:

Copy code The code is as follows:

$.wechat.setShareOption({
appid: 'xxxx',                                                      img_width: '60',
img_height: '60',
img_url: window.location.toString() 'img/demo.jpg', //Thumbnail
title: 'DEMO', //Title
Desc: 'The description is set from $.wechat.setShareOption', //Description
Link: function() {
Return window.location.toString(); //After the message is shared, the user clicks the link address that the message opens
},
​ callback: function(response) {
alert(response); //The callback function after sharing, the common ones are success and cancellation
}
});

Please refer to the following screenshots for details:

This sharing format change will affect the four functions of sending to friends, sharing to Moments, sharing to Weibo, and sending emails. After setting, click the menu button in the upper right corner to open the menu, select any one of the four items mentioned above, and you will see the effect of the change

Close current page

Copy code The code is as follows:

$.wechat.closeWindow();

Disable jQuery.wechat mechanism

Copy code The code is as follows:

$.wechat.destroy();

After deactivation, all functions will automatically reset back to their initial state
This function is commonly used in single page applications (SPA)