Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in WeixinJSBridge, die private Schnittstelle der integrierten browser_javascript-Fähigkeiten von WeChat

WBOY
Freigeben: 2016-05-16 15:57:46
Original
1899 Leute haben es durchsucht

Beim Aufrufen der WeChat-Webseite befinden sich in der oberen rechten Ecke drei kleine Punkte. Ja, das verwenden wir! Solange wir die Schaltflächen unter der Punkteliste anpassen, können wir unsere eigenen Inhalte nach Belieben teilen.

Hinweis: (WeixinJSBridge ist nur auf Webseiten gültig, die in WeChat geöffnet werden)

Schaltfläche 1------An Freunde senden

Code kopieren Der Code lautet wie folgt:

Funktion sendMessage(){

WeixinJSBridge.on('menu:share:appmessage', function(argv){ alarm("An Freund senden"); });

}

Solange Sie irgendwo die Funktion sendMessage aufrufen, können Sie die Antwort der Schaltfläche zum Senden an Freunde ändern. Klicken Sie erneut, und die Zeichenfolge „An Freund senden“ wird angezeigt einfach?

Teilen-Funktion

Code kopieren Der Code lautet wie folgt:

WeixinJSBridge.invoke('sendAppMessage',{
„appid“: „“, „appid“ „“
„img_url“: imgUrl, „ImgUrl“ //Der Bildpfad beim Teilen
„img_width“: „120“, „Bildbreite
„img_height“: „120“, „Bildhöhe
"link":url, "link": url, //Teilen Sie die angehängte Linkadresse
„desc“: „Ich bin eine Einführung“,                                                                                                                              „title“: „Der Titel könnte nicht einfacher sein.“
}, function(res){/*** Rückruffunktion, vorzugsweise auf leer setzen ***/});

Beachten Sie, dass es sinnvoll ist, diese private WeChat-Funktion separat aufzurufen, aber! Wenn Sie es beim ersten Öffnen der Seite direkt aufrufen, erfolgt ohnehin keine Reflexion. Sie müssen manuell auf die Schaltfläche „An Freunde teilen“ in der oberen rechten Ecke klicken. Nachdem das Adressbuch einmal angezeigt wurde, können Sie es verwenden Es wird kein Problem geben. Es scheint dasselbe zu sein, als würde man etwas intern initialisieren. Daher wird empfohlen, es direkt in die oben beschriebene Bindungsmethode einzubetten.

lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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

WeixinJSBridge.invoke('sendAppMessage',{

„appid“: „“, „appid“ „“
„img_url“: imgUrl, „ImgUrl“ //Der Bildpfad beim Teilen
„img_width“: „120“, „Bildbreite
„img_height“: „120“, „Bildhöhe
"link":url, "link": url, //Teilen Sie die angehängte Linkadresse
„desc“: „Ich bin eine Einführung“,                                                                                                                              „title“: „Der Titel könnte nicht einfacher sein.“
}, Funktion(res){/*** Rückruffunktion, vorzugsweise auf leer setzen ***/

});

});
}

Wenn Sie auf diese Weise auf die Schaltfläche „An Freund senden“ klicken, können Sie direkt das Adressbuch öffnen und einen „einzelnen“ Freund zum Teilen auswählen.

In ähnlicher Weise ruft das Teilen in Moments auch die Funktion „Invoke Private“ auf, der Name der Schaltflächenbindung ist jedoch anders.

Code kopieren Der Code lautet wie folgt:
Funktion sendMessage(){



……//Lassen Sie den an Freunde gesendeten Code hier weg



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

WeixinJSBridge.invoke('shareTimeline',{

„appid“: „“, „appid“ „“
„img_url“: imgUrl, „ImgUrl“ //Der Bildpfad beim Teilen
„img_width“: „120“, „Bildbreite
„img_height“: „120“, „Bildhöhe
"link":url, "link": url, //Teilen Sie die angehängte Linkadresse
„desc“: „Ich bin eine Einführung“,                                                                                                                              „title“: „Der Titel könnte nicht einfacher sein.“
}, function(res){/*** Rückruffunktion, vorzugsweise auf leer setzen ***/});

});

});

}

Beachten Sie, dass on an „menu:share:timeline“ und nicht an „menu:share:appmessage“ gebunden ist. Das Gleiche gilt für invoke.

Es gibt auch eine Weibo-Freigabe. Ich habe sie nicht ausprobiert und weiß nicht, ob sie nützlich ist. Wenn Sie spielen möchten, können Sie sie einfach über das aktuelle WeChat-Konto teilen.

Code kopieren Der Code lautet wie folgt:

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


Wenn der WeChat-Browser nicht intern initialisiert wurde, sind alle Schnittstellen undefiniert. Um Aufruffehler unmittelbar nach der Eingabe zu vermeiden, rufen Sie das Antwortereignis für den Abschluss der WeChat-Initialisierung ab und rufen Sie nach Abschluss der Initialisierung sendMessage zur Bindung auf.

lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', sendMessage); document.attachEvent('onWeixinJSBridgeReady', sendMessage);
Außerdem gibt es unten noch ein paar kleine Funktionen:

Code kopieren Der Code lautet wie folgt:
Weixa
WeixinJSBridge.call('showToolbar'); //Zeige die untere rechte Symbolleiste

WeixinJSBridge.call('hideOptionMenu');                                                                       // Die drei Punktschaltflächen in der oberen rechten Ecke ausblenden.

Weixa



Ich bin ein Neuling, ich habe mit dem Schreiben fertig und es ist nicht gut, also seien Sie bitte rücksichtsvoll!


Vollständiger Testcode (öffnen mit WeChat):

Code kopieren Der Code lautet wie folgt:




WeChat-Schnittstellentest

<script><br> Funktion sendMessage(){<br> WeixinJSBridge.on('menu:share:appmessage', function(argv){<br> WeixinJSBridge.invoke('sendAppMessage',{<br> <br> „appid“: //Appid kann auf leer gesetzt werden. <br> „img_url“: //Der Bildpfad beim Teilen <br> „img_width“: „120“, //Bildbreite<br> „img_height“: „120“, //Bildhöhe<br> „link“: „<a href="http://www.jb51.net">http://www.jb51.net</a>“, //Teilen Sie die angehängte Linkadresse<br> „desc“: „Geek Tag – http://www.jb51.net“, //Einführung in das Teilen von Inhalten<br> „title“: „Entdecken Sie Geek-Tags – seien Sie die beste Plattform für den Wissensaustausch mit Geeks“<br> }, Funktion(res){/*** Rückruffunktion, vorzugsweise auf leer setzen ***/<br> <br> });<br> });<br> <br> WeixinJSBridge.on('menu:share:timeline', function(argv){<br> <br> WeixinJSBridge.invoke('shareTimeline',{<br> <br> „appid“: //Appid kann auf leer gesetzt werden. <br> „img_url“: //Der Bildpfad beim Teilen <br> „img_width“: „120“, //Bildbreite<br> „img_height“: „120“, //Bildhöhe<br> „link“: „<a href="http://www.jb51.net">http://www.jb51.net</a>“, //Teilen Sie die angehängte Linkadresse<br> „desc“: „Geek Tag – http://www.jb51.net“, //Einführung in das Teilen von Inhalten<br> „title“: „Entdecken Sie Geek-Tags – seien Sie die beste Plattform für den Wissensaustausch mit Geeks“<br> }, Funktion(res){/*** Rückruffunktion, vorzugsweise auf leer setzen ***/<br> });<br> <br> });</p> <p> <br> Alert("Erfolgreich aufgerufen! Jetzt können Sie es über die Schaltfläche in der oberen rechten Ecke mit Freunden oder Ihrem Freundeskreis teilen!");<br> <br> }<br> <br> Funktion hideMenu(){<br> WeixinJSBridge.call('hideOptionMenu');<br> }<br> <br> Funktion showMenu(){<br> WeixinJSBridge.call('showOptionMenu'); <br> }<br> <br> Funktion hideTool(){<br> WeixinJSBridge.call('hideToolbar');<br> }<br> <br> Funktion showTool(){<br> WeixinJSBridge.call('showToolbar');<br> }<br> </p> <p> if(document.addEventListener){<br> document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){<br> document.attachEvent('WeixinJSBridgeReady', sendMessage); <br> document.attachEvent('onWeixinJSBridgeReady' , sendMessage); <br> }<br> <br> //Bestimmen Sie, ob die Webseite in WeChat aufgerufen wird<br> var ua = navigator.userAgent.toLowerCase();<br> if(ua.match(/MicroMessenger/i)=="micromessenger") {<br> } sonst {<br> warning("Der Anruf ist fehlgeschlagen. Bitte verwenden Sie WeChat zum Scannen und scannen Sie den QR-Code unten, um die Webseite zu öffnen!");<br> }<br> <br> </p></script>



Zum Teilen klicken Sie bitte auf die obere rechte Ecke



< ;br />






Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage