Utilisez jQuery.wechat pour créer l'application WeChat WEB_jquery

Parce que récemment, mes produits doivent être promus dans le compte public WeChat et doivent fournir des fonctions significatives, j'ai donc été obligé de m'engager sur la voie du non-retour en soutenant WeChat.

Comme nous le savons tous, Tencent est une entreprise tellement magique. Leurs produits ont connu un grand succès dans les affaires, mais la documentation est vraiment difficile à compléter. Je ne trouve pas la véritable documentation sur la plateforme de développement de comptes publics de Noda. les documents officiels sur le développement Web ne sont que des exemples individuels, et le reste... Haha, il existe quelque chose qui s'appelle Developer Exchange and Mutual Assistance.

Après avoir lu la photo ci-dessus, avez-vous le sentiment qu'un groupe de personnes essaient désespérément de savoir ce qui s'est passé, mais il n'y a pas de communiqué officiel ! o(∩_∩)o Haha

Cela dit, entrons rapidement dans le vif du sujet. Ce dont je veux parler dans ce numéro est de jQuery.wechat, que j'ai écrit après avoir lutté dans la douleur, un jQuery.plugin basé sur jQuery.promise qui fournit une solution unifiée. API. J'espère que cela aide tout le monde.

Tout d’abord, c’est assez simple à installer

Copier le code Le code est le suivant :

installation de bower --save jquery-wechat

Si vous n’utilisez pas bower et que vous le téléchargez et décompressez vous-même depuis Github, c’est la même chose !

Charger, c'est aussi naturel que l'eau

Copier le code Le code est le suivant :

Si vous utilisez une technologie de chargement paresseux telle que amd et cmd, vous devez être un expert. Vous n'avez pas besoin de moi pour vous apprendre à la configurer, n'est-ce pas ?

Utilisation - simple, facile, unifiée et amusante !

Activer la fonctionnalité jQuery.wechat
$.wechat.enable(); //Si facile !

Parce que l'ensemble du plugin est basé sur jQuery.promise, vous pouvez également lui donner une chaîne :

Copier le code Le code est le suivant :

$.wechat.enable().done(function(){
alert('activé avec succès');
}).fail(function(){
alert('L'activation a échoué');
});

Compte tenu de la large application actuelle de la technologie d'une seule page (SPA), la conception des classes d'outils doit prendre en compte le mécanisme d'activation/désactivation, sinon des erreurs inconnues peuvent se produire.

Masquer/afficher le menu

Copier le code Le code est le suivant :

$.wechat.hideMenu(); //Masquer le menu
$.wechat.showMenu(); //Afficher le menu

Après avoir activé jQuery.wechat, vous pouvez appeler des méthodes telles que hideMenu à volonté sans écrire d'autres méthodes dans le rappel done activé. Le principe d'implémentation de jQuery.wechat est que si jQuery.wechat n'a pas été activé avec succès, toutes les opérations seront mises en file d'attente. Une fois activées avec succès, elles seront exécutées séquentiellement ; si l'activation échoue, elles ne seront jamais exécutées.

Masquer/afficher la barre d'outils inférieure
$.wechat.hideToolbar(); //Masquer la barre d'outils inférieure
$.wechat.showToolbar(); //Afficher la barre d'outils inférieure

Ouvrez l'interface de numérisation de code QR
$.wechat.scanQRcode();

Ouvrez l'outil de prévisualisation d'image

Copier le code Le code est le suivant :

$.wechat.preview({
Actuel : 'http://xxx/img/pic001.jpg', //Après être entré en mode aperçu, affichez cette image directement
URL : [
         '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'
] ]                                                                                                                                                                         });

Obtenir l'état du réseau

Copier le code Le code est le suivant :

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

Le format de réponse est le suivant :

Copier le code Le code est le suivant :

network_type : réseau wifi wifi

network_type:edge Non-wifi, y compris 3G/2G
network_type : échec de la déconnexion du réseau
type_réseau : wwan (2g ou 3g)

Modifier le format de partage

Chaque fois que je vois un message partagé par l'application de quelqu'un d'autre, il est accompagné d'une belle vignette, d'un titre et d'une description appropriés. De plus, il y a une ligne de petit texte sous le message indiquant qui a envoyé le message, puis regardez. le message que vous avez partagé, une image vierge bleue par défaut avec un titre qui ne correspond pas. Vous vous demandez dans quelle logique les ont mis ?

Heureusement, résolvons ce problème maintenant :

Copier le code Le code est le suivant :

$.wechat.setShareOption({

appid : 'xxxx',                                                    img_width : '60',
img_height : '60',
img_url : window.location.toString() 'img/demo.jpg', //Vignette
titre : 'DEMO', //Titre
Desc : 'La description est définie à partir de $.wechat.setShareOption', //Description
Lien : function() {
Return window.location.toString(); //Une fois le message partagé, l'utilisateur clique sur l'adresse du lien que le message ouvre
},
​ rappel : fonction (réponse) {
alert(response); //La fonction de rappel après partage, les plus courantes sont le succès et l'annulation
>
});

Veuillez vous référer aux captures d'écran suivantes pour plus de détails :

Ce changement de format de partage affectera les quatre fonctions d'envoi à des amis, de partage sur Moments, de partage sur Weibo et d'envoi d'e-mails. Après le réglage, cliquez sur le bouton de menu dans le coin supérieur droit pour ouvrir le menu, sélectionnez l'un des quatre éléments ci-dessus et vous verrez l'effet modifié

Fermer la page actuelle

Copier le code Le code est le suivant :

$.wechat.closeWindow();

Désactiver le mécanisme jQuery.wechat

Copier le code Le code est le suivant :

$.wechat.destroy();

Après la désactivation, toutes les fonctions seront automatiquement réinitialisées à leur état initial
Cette fonction est couramment utilisée dans les applications à page unique (SPA)