So führen Sie die WeChat SDK-Schnittstelle in Vue ein

In diesem Artikel wird hauptsächlich die Einführung der WeChat SDK-Schnittstelle in das Vue-Projekt vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen.

Grundsätzlich muss die WeChat-Webseite mit dem WeChat SDK verbunden sein Ich selbst lese es in Zukunft und lasse es Freunde in Not als Referenz nehmen. Wenn es dir gefällt, kannst du es jedem folgen.

SDK installieren

npm install weixin-js-sdk --save

Bevor Sie beginnen, können Sie beispielsweise das Zugriffsdokument des offiziellen WeChat-Kontos lesen Um auf WeChat zuzugreifen, muss die Freigabefunktion in jeder Routing-Adresse enthalten sein. Da die URL jedes Routings unterschiedlich ist, muss Souyi sie in jede Routing-Adresse einführen.

Allgemeine Schritte:

Wenn Vue SDK einführt, muss der Code in die Routing-Komponente und den Komponentenlebenszyklus eingefügt werden: creatd() und mount().

Verwenden Sie Pseudocode, um sich mit dem gesamten Prozess vertraut zu machen und herauszufinden, was getan werden muss:

//wx是引入的微信sdk
 wx.config('这里有一些参数');//通过config接口注入权限验证配置
 
 wx.ready(function() { //通过ready接口处理成功验证
 // config信息验证成功后会执行ready方法
   wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
     title: '这里是标题', // 分享标题
     desc: 'This is a test!', // 分享描述
     link: '链接', // 分享链接
     imgUrl: '图片', // 分享图标
     type: '', // 分享类型,music、video或link，不填默认为link
     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
     });
     wx.onMenuShareTimeline({ //分享朋友圈
     title: '标题', // 分享标题
     link: '链接',
     imgUrl: '图片', // 分享图标
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
   });
 });
 wxx.error(function(res){//通过error接口处理失败验证
   // config信息验证失败会执行error函数
 });

Lesen Sie den obigen Prozess mehrmals, um eine Vorstellung vom gesamten Prozess zu bekommen. Das Wichtigste Schritt ist der folgende. Diese Ausrede fügt Berechtigungen ein.

Schnittstellen-Injektionsberechtigungen konfigurieren

Der wichtigste und wichtigste Schritt für den Zugriff auf die WeChat-Schnittstelle besteht darin, die folgenden Informationen einzugeben Gut zu gehen. Die folgenden Informationen werden normalerweise über die Backend-Schnittstelle abgerufen.

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名，见附录1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

Informationen zur Konfigurationskonfiguration abrufen:

Um die oben genannten Informationen im Frontend zu erhalten, müssen Sie nicht viel tun, passen Sie einfach die Backend-Schnittstelle an. Das Backend verarbeitet diese Informationen und gibt diese Parameter über eine Schnittstelle an Sie zurück. Sie müssen die vollständige URL der aktuellen Routing-Seite an das Backend übergeben, und das Backend gibt Ihnen die oben genannten Informationen zurück. Später können Sie die entsprechende Schnittstelle entsprechend Ihren eigenen Anforderungen aufrufen und den Inhalt anpassen.

Falle: URL

Was hier zu beachten ist, ist das Problem der URL. Wenn die URL nicht korrekt übergeben wird, gibt das Backend auch Informationen zurück, aber die Signatur Informationen werden falsch sein.

Die oben genannte vollständige URL bezieht sich auf den Teil „http(s)://“ und „?“ 'Der GET-Parameterteil nach ', enthält jedoch nicht den Teil nach dem '#'-Hash. Kann über location.href abgerufen werden.

Hinweis: Wenn in Ihrem Vue-Projekt und Routing der Verlaufsmodus nicht aktiviert ist, d. h. Ihre URL „#“ enthält, müssen Sie zu diesem Zeitpunkt die Zeichen entfernen, um die Signatur korrekt vom Backend zu erhalten nach # auf der URL. (Entfernen Sie den „#“-Hash-Teil der URL, Sie können location.href.split('#')[0] verwenden)

Kapselung ruft SDK-Injection auf:

Da das SDK in jede Routing-Seite eingefügt werden muss, muss es wiederverwendet werden, sonst wird es überwältigend, sich so viele Codes anzusehen.

Das habe ich getan:

Weil ich Axios in eine Ebene eingepackt und dann die Axios-Schnittstelle zur Vue-Instanz in main.js gemountet habe.

Rufen Sie dann diese Schnittstelle in der globalen Funktion auf und rufen Sie dann diese Funktion in der entsprechenden Komponente jeder Routing-Seite auf, um die URL der aktuellen Seite und andere Titel und Bilder hinzuzufügen usw. Geben Sie es weiter.

Ich werde nicht auf die einzelnen Schritte eingehen. Das Wichtigste ist, auf den oben genannten Prozess zu verweisen.

Signaturüberprüfung:

Wenn Sie wiederholt bestätigen, dass bei den Schritten kein Problem vorliegt und die WeChat-SDK-Injektion immer noch nicht signiert werden kann, müssen Sie zu diesem Zeitpunkt darüber nachdenken ob es sich um ein Problem mit dem Backend-Algorithmus handelt. Sie können die vom Backend zurückgegebene Signatur mit der Signatur vergleichen, die vom von WeChat bereitgestellten JS-Schnittstellen-Signaturüberprüfungstool generiert wird. Es liegt möglicherweise kein Problem mit dem Algorithmus im Backend vor .

Nachwort

Um ehrlich zu sein, wurde ich von der URL getäuscht, als ich es machte. Es war das erste Mal, dass ich dieses Ding gemacht habe, ich hatte keine Erfahrung. und es hat lange gedauert. Die Einführung des SDK ist nicht schwierig. Wichtig ist, dass die Konfigurationsinformationen korrekt ausgefüllt werden und der Rest dann entsprechend den tatsächlichen Anforderungen erledigt wird.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Webversion des Rechners in JS

Wie Sie JS verwenden, um die parabolische Flugbahn zu implementieren einer kleinen Kugel

So implementieren Sie Binärbaum-Traversal mit JavaScript

So implementieren Sie Cookie-domänenübergreifend in Axios

In JavaScript So erzielen Sie einen elastischen Effekt in

Wie implementiert man eine Ajax-Anfrage mit Axios (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo führen Sie die WeChat SDK-Schnittstelle in Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!