Code de méthode pour créer une application WEB WeChat à l'aide de jQuery.wechat-Développement WeChat-php.cn

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

高洛峰

Libérer： 2017-03-14 14:54:04

original

2060 Les gens l'ont consulté

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.

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

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

Copier après la connexion

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>

Copier après la connexion

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(&#39;已经启用成功&#39;);
}).fail(function(){
    alert(&#39;启用失败&#39;);
});

Copier après la connexion

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(); //显示菜单

Copier après la connexion

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: &#39;http://xxx/img/pic001.jpg&#39;,  //进入预览模式后，直接显示这张图片
    urls: [
        &#39;http://xxx/img/pic001.jpg&#39;,
        &#39;http://xxx/img/pic002.jpg&#39;,
        &#39;http://xxx/img/pic003.jpg&#39;,
        &#39;http://xxx/img/pic004.jpg&#39;,
        &#39;http://xxx/img/pic005.jpg&#39;,
        &#39;http://xxx/img/pic006.jpg&#39;
    ]                                      //所有要在预览模式下显示的图片
});

Copier après la connexion

Obtenir l'état du réseau

Le code est le suivant :

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

Copier après la connexion

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)

Copier après la connexion

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

Copier après la connexion

Veuillez vous référer à la capture d'écran ci-dessous pour plus de détails :

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

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 :