Code de méthode pour créer une application WEB WeChat à l'aide de jQuery.wechat

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('已经启用成功');
}).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',  //进入预览模式后，直接显示这张图片
    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'
    ]                                      //所有要在预览模式下显示的图片
});

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网络
network_type:edge    非wifi,包含3G/2G
network_type:fail    网络断开连接
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',                                               //小标appid
    img_width: '60',
    img_height: '60',
    img_url: window.location.toString() + 'img/demo.jpg',        //缩略图
    title: 'DEMO',                                               //标题
    desc: 'The description is set from $.wechat.setShareOption', //描述
    link: function() {
        return window.location.toString();                       //消息分享出去后，用户点击消息打开的链接地址
    },
    callback: function(response) {
        alert(response);                                         //分享后的回调函数，常见的有成功和取消
    }
});

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!