Comment introduire l'interface SDK WeChat dans vue

Cet article présente principalement comment introduire l'interface du SDK WeChat dans le projet vue. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

En gros, la page Web WeChat doit être connectée au SDK WeChat. Quand je le faisais, j'ai aussi dépensé beaucoup d'efforts, puis j'ai voulu l'enregistrer. Je le lis moi-même à l'avenir et laissez mes amis dans le besoin le prendre comme référence. Si vous l'aimez, vous pouvez l'aimer ou le suivre. J'espère que cela pourra aider tout le monde.

Installer le SDK

npm install weixin-js-sdk --save

Avant de commencer, vous pouvez lire le document d'accès du compte officiel WeChat. Vue est un projet d'une seule page. Par exemple, si. vous souhaitez vous connecter Entrez la fonction de partage WeChat. La fonction de partage doit être incluse dans chaque adresse de routage. Parce que l'URL de chaque routage est différente, Souyi doit l'introduire dans chaque adresse de routage.

Étapes générales :

Si vue introduit sdk, c'est pour mettre le code dans le composant de routage et le cycle de vie du composant : creatd() et Mounted().

Utilisez un pseudo-code pour vous familiariser avec le processus global et ce qui doit être fait :

//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函数
 });

Lisez le processus ci-dessus plusieurs fois pour avoir une idée de l'ensemble du processus, du dont l'étape la plus importante est l'excuse suivante pour injecter des autorisations.

Configurer les autorisations d'injection de l'interface

L'étape la plus importante et la plus importante pour accéder à l'interface WeChat est de remplir les informations suivantes. Après avoir rempli les informations, vous êtes essentiellement. prêt. . Les informations suivantes sont généralement obtenues via l'interface backend.

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

Obtenir les informations de configuration :

Pour obtenir les informations ci-dessus sur le front-end, vous n'avez pas besoin de faire grand-chose, ajustez simplement l'interface backend . Le backend traitera ces informations et vous renverra ces paramètres via une interface. Vous devez transmettre l'URL complète de la page de routage actuelle au backend, et le backend vous renverra les informations ci-dessus. Plus tard, vous pourrez appeler l'interface correspondante et personnaliser le contenu en fonction de vos propres besoins.

Piège : url

Ce qu'il faut noter ici, c'est le problème de l'url Si l'url n'est pas transmise correctement, le backend renverra également des informations, mais la signature. les informations seront fausses.

L'url complète mentionnée ci-dessus fait référence à : la partie 'http(s)://', ​​et '? 'La partie du paramètre GET après', mais n'inclut pas la partie après le hachage '#'. Peut être obtenu via location.href.

Remarque : Si votre projet Vue et votre routage n'ont pas le mode historique activé, c'est-à-dire que votre URL contient "#", à ce moment, pour obtenir correctement la signature du backend, vous devez supprimer les caractères après # sur l'URL. (Supprimez la partie de hachage '#' de l'URL, vous pouvez utiliser location.href.split('#')[0])

L'encapsulation appelle l'injection SDK :

Parce qu'il faut que le SDK soit injecté dans chaque page de routage, celui-ci doit être réutilisé, sinon ce sera écrasant de regarder autant de codes.

Voici ce que j'ai fait :

Parce que j'ai enveloppé axios dans une couche, puis monté l'interface axios sur l'instance Vue dans main.js.

Appelez ensuite cette interface dans la fonction globale, puis appelez cette fonction dans le composant correspondant de chaque page de routage pour ajouter l'URL de la page actuelle et d'autres titres, images , etc. Passez-le.

Je n'entrerai pas dans les étapes spécifiques. Le plus important est de se référer au processus ci-dessus. Tout dans la fonction est également basé sur ce processus.

Vérification de la signature :

Lorsque vous confirmez à plusieurs reprises qu'il n'y a aucun problème avec les étapes et que l'injection du SDK WeChat ne parvient toujours pas à signer, vous devez à ce moment considérer si c'est le backend Il y a un problème avec l'algorithme. Vous pouvez comparer la signature renvoyée par le backend avec la signature générée par l'outil de vérification de signature de l'interface JS fourni par WeChat. .

Postface

Pour être honnête, je me suis fait avoir par l'url quand je le faisais. C'était la première fois que je faisais ce truc, je n'avais aucune expérience, et ça m'a pris beaucoup de temps. Il n'est pas difficile d'introduire le SDK. Ce qui est important, c'est que les informations de configuration soient correctement renseignées, et ensuite le reste se fera en fonction des besoins réels.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter une version web de la calculatrice en JS

Comment utiliser JS pour implémenter la trajectoire parabolique d'une petite boule

Comment implémenter la traversée d'arbre binaire à l'aide de JavaScript

Comment implémenter un cookie cross-domain dans axios

En JavaScript Comment obtenir un effet élastique dans

Comment implémenter une requête ajax à l'aide d'axios (tutoriel détaillé)

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!