Récemment, l'entreprise a créé une page H5 permettant aux étudiants de voter. Elle est principalement utilisée sur WeChat et doit ajouter la fonction de partage WeChat ;
Cet article enregistre principalement les points nécessitant une attention particulière lors de l'appel de l'interface de partage WeChat ;
1. Pour le framework angulaire1 utilisé dans le front-end, vous devez d'abord introduire le fichier d'interface WeChat sur la page d'index ;
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Écrivez la fonction de partage WeChat dans le fichier myApp.run. Notez que cette fonction doit obtenir et analyser l'URL de la page actuelle, puis l'envoyer au backend pour générer la signature correspondante et télécharger directement le code ;
// Fonction de partage WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. code == 0) { var respanse = res.data.data; wx.config({ debug : false, // Lorsque le mode de débogage est activé, les valeurs de retour de tous les appels API seront alertées côté client. Si vous souhaitez afficher les paramètres entrants, vous pouvez l'ouvrir côté PC. Les informations sur les paramètres seront imprimées via le. log, et appId ne seront imprimés que côté PC respanse.appId, timestamp : respanse.timestamp, // Obligatoire, générer l'horodatage de la signature nonceStr : respanse.nonceStr, // Obligatoire, générer la signature de chaîne aléatoire du. signature: respanse.signature,//Obligatoire, signature jsApiList : ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//Obligatoire, liste des interfaces JS qui doivent être utilisées} } } ) }Après avoir analysé l'URL actuelle, envoyez-la à l'interface back-end. Le back-end doit renvoyer l'appId, l'horodatage, la chaîne aléatoire et la signature, puis ajouter manuellement la liste d'interfaces (jsApiList) si nécessaire. la forme d'un tableau. J'en ai seulement besoin ici.
Lors du débogage, vous pouvez changer debug en true, de sorte que chaque fois que l'interface WeChat est appelée, les informations de l'interface soient alertées, ce qui permet de vérifier facilement si l'appel de l'interface est normal ;
3. Après cette fonction, personnalisez le contenu de partage, le code est le suivant ;
wx.ready(function () { var obj = { title : 'La compétition par équipe SPBCN a commencé à voter !', // Partager le titre desc : 'La compétition par équipe SPBCN a commencé à voter, venez nous encourager !', // Partager Description lien : 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Lien de partage, le nom de domaine ou le chemin du lien doit être cohérent avec le nom de domaine de sécurité JS du compte public correspondant à l'actuel page // Ce lien est un lien de redirection car il est nécessaire d'obtenir le code utilisateur, mais ce lien ne peut pas écrire directement le lien vers WeChat pour obtenir le code // Vous devez donc cliquer et recharger la nouvelle page pour mettre en œuvre la redirection et rouvrir la page. Lien WeChat pour obtenir le code. , pour implémenter la fonction d'obtention d'informations sur l'utilisateur ; imgUrl : 'http://cdn.spbcn.org/img/logo-image.png', // Échec de l'icône de partage : fonction (res) { alerte(JSON.stringify(res)) } }; // 2.1 Surveiller le partage avec des amis, les clics sur les boutons, le contenu de partage personnalisé et l'interface des résultats de partage wx.onMenuShareAppMessage(obj); // 2.2 Surveiller le partage avec les clics sur les boutons Moments, le contenu de partage personnalisé et l'interface des résultats de partage wx.onMenuShareTimeline (obj) ; // 2.3 Surveiller les clics sur les boutons de partage vers QQ, personnaliser le partage du contenu et l'interface des résultats de partage wx.onMenuShareQQ(obj); 2.4 Surveillez le clic du bouton de partage sur Weibo, personnalisez le contenu de partage et l'interface des résultats de partage wx.onMenuShareWeibo(obj); // 2.5 Surveillez le clic du bouton de partage sur QZone, personnalisez le contenu de partage et l'interface de partage wx. onMenuShareQZone(obj);wx.ready est automatiquement exécuté après wx.config. Je définis un objet général pour le partage de contenu, puis je l'appelle directement. Vous pouvez également définir différents contenus pour partager des amis, un cercle d'amis, Weibo, etc. Documentation de l'interface WeChat pour plus de détails ;
L'accent est mis sur le lien de partage. Le lien doit être sous le nom de domaine sécurisé JS défini par votre compte officiel, sinon le partage ne pourra pas réussir ;
Les symptômes d'un échec de partage sont que l'image du lien de partage ne peut pas charger votre image personnalisée et que le titre de partage est incorrect ;
5. Mon projet est destiné au vote, je dois donc obtenir le code utilisateur à chaque fois que je clique. Si vous partagez simplement un article et n'avez pas besoin d'informations utilisateur, modifiez simplement le lien vers le lien de votre article ;
6. Pour la catégorie de vote, j'ai fait ici un traitement spécial, c'est-à-dire rediriger le lien. Tout le monde sait qu'il existe deux façons pour H5 d'obtenir des informations sur les utilisateurs de WeChat : l'une consiste à suivre le compte officiel de WeChat ; utilisateur pour obtenir les informations publiques de l'utilisateur. L'utilisateur clique sur OK. Cependant, les deux doivent être fusionnés dans un lien WeChat spécial conformément aux exigences de WeChat. Par conséquent, le nom de domaine est fourni avec WeChat et n'est pas le nom de domaine sécurisé JS de notre propre compte public ;
7. Par conséquent, pour le lien partagé, si vous avez encore besoin d'obtenir le code utilisateur, vous devez utiliser d'autres méthodes pour y parvenir. Ce que j'ai utilisé, c'est d'ajouter une page vierge, et une fois la page chargée, passez à WeChat pour l'obtenir. le lien de code, http://dev.spbcn.org/wechat-vote-phone/redirect.html Ce lien est une page vierge Le code de cette page est le suivant ;
window.onload = fonction () { // Le lien de redirection est le même que le lien pour obtenir le code utilisateur dans le compte officiel WeChat window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. Cette méthode présente des inconvénients, c'est-à-dire qu'elle ajoute une page vierge supplémentaire. Je n'ai pas encore pensé à une bonne méthode. Tout le monde est invité à laisser un message ;
9. Si cette étape n'est pas ajoutée, le lien partagé s'affichera normalement, mais le code ne pourra pas être obtenu et le backend ne pourra pas déterminer l'utilisateur, ce qui entraînera l'impossibilité d'empêcher les utilisateurs de voter ;
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.