Maison  >  Article  >  interface Web  >  Introduction à WeixinJSBridge, l'interface privée des compétences browser_javascript intégrées de WeChat

Introduction à WeixinJSBridge, l'interface privée des compétences browser_javascript intégrées de WeChat

WBOY
WBOYoriginal
2016-05-16 15:57:461900parcourir

Lorsque vous entrez sur la page Web WeChat, il y a trois petits points dans le coin supérieur droit. Oui, c'est ce que nous utilisons ! Tant que nous personnalisons les boutons sous la liste de points, nous pouvons partager notre propre contenu à notre guise.

Remarque : (WeixinJSBridge n'est valable que sur les pages Web ouvertes dans WeChat)

Bouton 1------Envoyer à des amis

Copier le code Le code est le suivant :

fonction sendMessage(){

WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("Envoyer à un ami"); });

>

De cette façon, tant que vous appelez la fonction sendMessage quelque part, vous pouvez modifier la réponse du bouton pour envoyer à des amis. Cliquez à nouveau et la chaîne "Envoyer à un ami" apparaîtra, n'est-ce pas. simple?

Fonction Partager

Copier le code Le code est le suivant :

WeixinJSBridge.invoke('sendAppMessage',{
"appid": "", "appid" ""
"img_url": imgUrl, "ImgUrl" //Le chemin de l'image lors du partage
"img_width": "120", "Largeur de l'image
"img_height": "120", "Hauteur de l'image
"link":url, "link": url, //Partager l'adresse du lien ci-joint
"desc": "Je suis une introduction",                                                                                                                                 "title": "Le titre ne pourrait pas être plus simple."
}, fonction(res){/*** Fonction de rappel, de préférence réglée sur vide ***/});

Notez que si cette fonction privée WeChat est appelée séparément, cela a du sens, mais ! Si vous l'appelez directement lorsque vous ouvrez la page pour la première fois, il n'y aura de toute façon aucune réflexion. Vous devez cliquer manuellement sur le bouton Partager avec des amis dans le coin supérieur droit. Une fois que le carnet d'adresses apparaît une fois, vous pouvez revenir et utiliser. directement. Il n'y aura aucun problème. Il semble que ce soit la même chose que d'initialiser quelque chose en interne. Par conséquent, il est recommandé de l'intégrer directement dans la méthode de liaison ci-dessus.

est le suivant :

Copier le code Le code est le suivant :

fonction sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){

WeixinJSBridge.invoke('sendAppMessage',{

"appid": "", "appid" ""
"img_url": imgUrl, "ImgUrl" //Le chemin de l'image lors du partage
"img_width": "120", "Largeur de l'image
"img_height": "120", "Hauteur de l'image
"link":url, "link": url, //Partager l'adresse du lien ci-joint
"desc": "Je suis une introduction",                                                                                                                                 "title": "Le titre ne pourrait pas être plus simple."
}, fonction(res){/*** Fonction de rappel, de préférence réglée sur vide ***/

});

});
>

De cette façon, lorsque vous cliquez sur le bouton Envoyer à un ami, vous pouvez directement afficher le carnet d'adresses et sélectionner un « seul » ami à partager.

De même, le partage vers Moments appelle également la fonction d'invocation privée, mais le nom de liaison du bouton est différent.

Copier le code Le code est le suivant :
fonction sendMessage(){



……//Omettez le code envoyé aux amis ici



WeixinJSBridge.on('menu:share:timeline', function(argv){

WeixinJSBridge.invoke('shareTimeline',{

"appid": "", "appid" ""
"img_url": imgUrl, "ImgUrl" //Le chemin de l'image lors du partage
"img_width": "120", "Largeur de l'image
"img_height": "120", "Hauteur de l'image
"link":url, "link": url, //Partager l'adresse du lien ci-joint
"desc": "Je suis une introduction",                                                                                                                                 "title": "Le titre ne pourrait pas être plus simple."
}, fonction(res){/*** Fonction de rappel, de préférence réglée sur vide ***/});

});

});

}

Notez que on est lié à "menu:share:timeline" et non à "menu:share:appmessage". La même chose est vraie en invocation.

Il existe aussi un partage Weibo. Je ne l'ai pas essayé et je ne sais pas si c'est utile. Si vous voulez jouer, essayez-le. Tout partage se fait en appelant le compte WeChat actuel.

Copier le code Le code est le suivant :

WeixinJSBridge.on('menu:share:weibo', fonction(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content": dataForWeixin.title ' " dataForWeixin.url,
"url": dataForWeixin.url
}, fonction(res){});
});


Si le navigateur WeChat n'a pas été initialisé en interne, toutes les interfaces ne seront pas définies. Afin d'éviter d'appeler des erreurs immédiatement après la saisie, obtenez l'événement de réponse de fin d'initialisation WeChat et appelez sendMessage pour la liaison une fois l'initialisation terminée.

est le suivant :

Copier le code Le code est le suivant :

if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
Il y a aussi quelques petites fonctions ci-dessous :

Copier le code Le code est le suivant :
Weixa
WeixinJSBridge.call('showToolbar'); //Afficher la barre d'outils en bas à droite

WeixinJSBridge.call('hideOptionMenu');                                                                                      // Masquer les trois boutons en forme de points dans le coin supérieur droit.

Weixa



Je suis un débutant, j'ai fini d'écrire, et ce n'est pas bon, alors soyez prévenant !


Code de test complet (ouvert avec WeChat) :

Copier le code Le code est le suivant :




Test de l'interface WeChat

<script><br> fonction sendMessage(){<br> WeixinJSBridge.on('menu:share:appmessage', function(argv){<br> WeixinJSBridge.invoke('sendAppMessage',{<br> <br> "appid": "", //Appid peut être défini comme vide. <br> "img_url": "", //Le chemin de l'image lors du partage <br> "img_width": "120", //Largeur de l'image<br> "img_height": "120", //Hauteur de l'image<br> "link": <a href="http://www.jb51.net">http://www.jb51.net</a>", //Partagez l'adresse du lien ci-joint<br> "desc": "Geek Tag--http://www.jb51.net", //Introduction au partage de contenu<br> "title": "Découvrez les balises geek - soyez la meilleure plateforme de partage de connaissances geek"<br> }, fonction(res){/*** Fonction de rappel, de préférence réglée sur vide ***/<br> <br> });<br> });<br> <br> WeixinJSBridge.on('menu:share:timeline', function(argv){<br> <br> WeixinJSBridge.invoke('shareTimeline',{<br> <br> "appid": "", //Appid peut être défini comme vide. <br> "img_url": "", //Le chemin de l'image lors du partage <br> "img_width": "120", //Largeur de l'image<br> "img_height": "120", //Hauteur de l'image<br> "link": <a href="http://www.jb51.net">http://www.jb51.net</a>", //Partagez l'adresse du lien ci-joint<br> "desc": "Geek Tag--http://www.jb51.net", //Introduction au partage de contenu<br> "title": "Découvrez les balises geek - soyez la meilleure plateforme de partage de connaissances geek"<br> }, fonction(res){/*** Fonction de rappel, de préférence réglée sur vide ***/<br> });<br> <br> });</p> <p> <br> alert("Appelé avec succès ! Vous pouvez désormais le partager avec des amis ou un cercle d'amis via le bouton dans le coin supérieur droit !");<br> <br> ><br> <br> fonction hideMenu(){<br> WeixinJSBridge.call('hideOptionMenu');<br> ><br> <br> fonction showMenu(){<br> WeixinJSBridge.call('showOptionMenu'); <br> ><br> <br> fonction hideTool(){<br> WeixinJSBridge.call('hideToolbar');<br> ><br> <br> fonction showTool(){<br> WeixinJSBridge.call('showToolbar');<br> ><br> </p> <p> if(document.addEventListener){<br> document.addEventListener('WeixinJSBridgeReady', sendMessage, false document.attachEvent('WeixinJSBridgeReady' , sendMessage <br>); document.attachEvent('onWeixinJSBridgeReady' , sendMessage <br>); ><br> <br> //Déterminer si la page Web est appelée dans WeChat<br> var ua = navigator.userAgent.toLowerCase();<br> if(ua.match(/MicroMessenger/i)=="micromessenger") {<br> } autre {<br> alert("L'appel a échoué, veuillez utiliser WeChat pour scanner et scanner le code QR ci-dessous pour ouvrir la page Web!");<br> ><br> <br> </p></script>



Pour partager, veuillez cliquer dans le coin supérieur droit


;br />

< br />
;
;


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn