Ce dont je veux parler dans ce numéro est jQuery.wechat, que j'ai écrit après avoir souffert, un jQuery.plugin basé sur jQuery.promise qui fournit une API. J'espère que cela aide tout le monde.

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. Ses produits ont connu un grand succès dans les affaires, mais la documentation est vraiment difficile à compléter. Oui, certains des 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 ce sentiment ? Un groupe de personnes essaient désespérément de savoir ce qui s'est passé, mais il n'y a pas de déclaration officielle ! o(∩_∩)o Haha

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

Tout d'abord,

L'installationC'est assez simple

Le code est le suivant :

bower install --save jquery-wechat

Si vous ne le faites pas utilisez bower, vous pouvez commencer à partir de

Télécharger et décompresser sur Github, c'est pareil?!
Le chargement est aussi naturel que l'eau

Le code est le suivant?:

<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>

Si vous utilisez une technologie de chargement paresseux telle que amd et cmd, vous devez Vous êtes également un expert, vous n'avez donc pas besoin que je vous apprenne à le configurer, n'est-ce pas ?

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

Activer la fonction jQuery.wechat

$.wechat.enable(); //Si simple?!

Parce que l'ensemble du plugin est basé sur jQuery.promise, vous pouvez également lui donner un Cha?ne?:

Le code est le suivant?:

$.wechat.enable().done(function(){
    alert('已經(jīng)啟用成功');
}).fail(function(){
    alert('啟用失敗');
});

Compte tenu de l'application largement répandue actuelle de la technologie d'une seule page (SPA), la conception des classes d'outils doit prendre en compte l'activation/la désactivation mécanisme, sinon cela pourrait provoquer une erreur inconnue.

Cacher/afficher le menu

Le code est le suivant?:

$.wechat.hideMenu(); //隱藏菜單
$.wechat.showMenu(); //顯示菜單

Après avoir activé jQuery.wechat, vous pouvez appeler des méthodes telles que hideMenu à volonté, pas besoin d'écrire d'autres méthodes dans le rappel done de activate. 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 du code QR

$.wechat.scanQRcode();

Ouvrez l'outil de prévisualisation

image

Le code est le suivant :

$.wechat.preview({
    current: 'http://xxx/img/pic001.jpg',  //進(jìn)入預(yù)覽模式后，直接顯示這張圖片
    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'
    ]                                      //所有要在預(yù)覽模式下顯示的圖片
});

Obtenir l'état du réseau

Le code est le suivant :

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

Le format de réponse est le suivant :

Code comme suit?:

network_type:wifi    wifi網(wǎng)絡(luò)
network_type:edge    非wifi,包含3G/2G
network_type:fail    網(wǎng)絡(luò)斷開連接
network_type:wwan    (2g或者3g)

Modifier le format de partage

Chaque fois que vous voyez un message partagé par l'application de quelqu'un d'autre, il aura une belle

vignette, titre et description appropriés. De plus, il y a une ligne de petits mots sous le message indiquant qui a envoyé le message?; regardez le message que vous avez vous-même partagé, une image vierge bleue par défaut avec un titre qui ne correspond pas. se demande dans quelle logique les a mis ?

Heureusement, résolvons ce problème maintenant?:

Le code est le suivant?:

$.wechat.setShareOption({
    appid: 'xxxx',                                               //小標(biāo)appid
    img_width: '60',
    img_height: '60',
    img_url: window.location.toString() + 'img/demo.jpg',        //縮略圖
    title: 'DEMO',                                               //標(biāo)題
    desc: 'The description is set from $.wechat.setShareOption', //描述
    link: function() {
        return window.location.toString();                       //消息分享出去后，用戶點(diǎn)擊消息打開的鏈接地址
    },
    callback: function(response) {
        alert(response);                                         //分享后的回調(diào)函數(shù)，常見的有成功和取消
    }
});

Veuillez vous référer à la capture d'écran ci-dessous 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 mentionnés ci-dessus et vous verrez l'effet modifié

Fermer la page actuelle

Le code est le suivant :

$.wechat.closeWindow();

Désactivez le mécanisme jQuery.wechat

Le code est le suivant :

$.wechat.destroy();

Après désactivation, toutes les fonctions seront automatiquement réinitialisées à l'état initial Statut

Cette fonction est couramment utilisée dans les applications à page unique (SPA)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!