Un projet récent exigeait le partage WeChat et la nécessité de personnaliser le contenu du partage WeChat. Comme c'était la première fois que j'étais exposé au partage WeChat, j'ai enregistré certains des problèmes rencontrés au cours du processus, ainsi que l'ensemble du processus de réalisation. la fonction.
Voici le processus général (les détails sont placés à chaque étape)
npm install weixin-js-sdk --save-dev
Pour des instructions spécifiques, veuillez vous référer à la documentation officielle de WeChat.
2. Initialisez le partage WeChatÉtant donné que de nombreux projets sur lesquels je travaille nécessitent l'utilisation de la fonction de partage WeChat, le code partagé sur WeChat sera encapsulé ici.
L'API dans le code ci-dessous est en fait une requête axios
importer wx depuis 'weixin-js-sdk' importer api depuis '@/api'const wxApi = { /** * [initialisation wxRegister WeChat Api] * @param {Function} rappel [fonction de rappel prête] */ wxRegister (rappel, url) { let query = { // L'url ici doit être l'url qui correspond exactement à la page que vous souhaitez partager, et l'url base64 doit être convertie : url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Activer le mode débogage appId: data.appId, // Obligatoire, l'identifiant unique du timestamp du compte officiel : data.timestamp, // Obligatoire, générer l'horodatage de la signature nonceStr : data.nonceStr, // Obligatoire, générer la chaîne aléatoire de la signature signature : data.signature, // Obligatoire, signature, voir Annexe 1 jsApiList : data.jsApiList // Obligatoire, une liste des interfaces JS qui doivent être utilisées, voir Annexe 2 pour une liste de toutes les interfaces JS }) }) wx.ready((res) => { // Si nécessaire Personnalisez la méthode de rappel prête if (callback) { callback() } }) },}Remarque : si vous devez convertir base64 ci-dessus, vous pouvez utiliser js-base64
3. Configurez WeChat pour partager du contenu personnalisé (envoyer à des amis, envoyer à Moments)
La deuxième étape consiste à initialiser la configuration du packaging pour WeChat, mais il lui manque encore le partage correspondant et d'autres fonctions. Améliorons-le ici.
//Ajoutez /*** après la fonction wxRegister [Partage WeChat personnalisé ShareTimeline vers Moments]* @param {[type]} option [partager les informations]* @param {[type]} succès [rappel de succès]* @param {[ type]} erreur [rappel d'échec]*/ShareTimeline (option) {wx.updateTimelineShareData({ titre : option.titre, // Lien du titre du partage : option.link, // Lien de partage imgUrl : option.imgUrl, // Icône de partage réussie () { // Définition réussie}, Cancel () { // Échec du paramètre}})},/*** [ShareAppMessage Partage WeChat personnalisé avec des amis]* @ param {[type]} option [partager les informations]* @param {[type]} succès [rappel de réussite]* @param {[type]} erreur [rappel d'échec]*/ShareAppMessage (option) {wx.updateAppMessageShareData({ title : option.title, // Titre du partage desc : option.desc, // Lien de description du partage : option.link, // Lien de partage imgUrl : option.imgUrl, // Succès de l'icône de partage () { // Paramétrage réussi}, Cancel () { // Paramétrage échoué}})}4. Lors de l'appel de la page
// vue à titre d'exemple // Pour les paramètres de fonction suivants, veuillez vous référer à la méthode ci-dessus import wx from 'your encapsulated file' Mounted(){ let base64 = require('js-base64').Base64 let url = base64. encode( window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods :{ // Rappel jdk personnalisé wxRegCallback () {}, // Fonction personnalisée pour partager avec des amis wxShareAppMessage(){ let option = { title:'', // Partager le titre desc : '', // Partager le lien de description : ' ', // Lien de partage imgUrl : '' // Icône de partage } // Injecte la méthode générale wx.ShareAppMessage(option) }, // Fonction de partage personnalisée wxShareTimeline(){ let option = { title:'',// Titre du partage desc : '', // Lien de description du partage : '', // Lien de partage imgUrl : '' // Icône de partage} // Injecter la méthode générale wx.ShareTimeline(option) }}Ce qui précède est le processus de partage sur WeChat. S'il y a des lacunes, veuillez les signaler.
Note:Le partage WeChat ne peut être testé que sur des appareils réels
Les noms de domaine utilisant le format localhost ne peuvent pas passer la vérification WeChat
RésumerCe qui précède est l'implémentation HTML5 du partage WeChat et du contenu personnalisé introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps !