Cet article résume l'utilisation de WeChat JSSDK et le partage avec vous pour votre référence. Le contenu spécifique est le suivant
1. Liez le nom de domaine
2. introduce le fichier js
Présentez le fichier JS suivant sur la page qui doit appeler l'interface JS (prendre en charge https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Veuillez noter que si votre page a activé HTTPS, assurez-vous d'introduire https://res.wx.qq.com/open/js/jweixin-1.0.0.js, sinon vous ne pourrez pas utiliser avec succès JSSDK dans les systèmes iOS9.0 ou ci-dessus.
3. Vérifiez la configuration via l'interface de configuration
Cette étape consiste à obtenir une série de paramètres en envoyant une demande à l'arrière-plan en utilisant l'URL actuelle. Autrement dit, l'arrière-plan utilisera mon URL pour le vérifier sur WeChat. Les choses à noter ici sont utilisées pour vérifier la méthode de rédaction actuelle de l'URL.
Laissez url = location.href.split ('#') [0];
Assurez-vous d'écrire la situation ci-dessus. Sinon, la signature non valide de configuration sera effectuée.
Confirmez que l'URL est l'URL complète de la page (veuillez confirmer dans l'alerte de la page actuelle (emplacement.href.split ('#') [0])), y compris les 'http (s): //' partie, et '? «La partie Get Paramètre après elle, mais n'inclut pas la pièce après le hachage« # ».
Assurez-vous que l'URL que vous habitez pour signer est obtenue dynamiquement. Vous pouvez vous référer à la méthode d'implémentation de PHP dans l'exemple de code pour la page dynamique. Si la page statique de HTML est transmise au backend à la signature de l'URL via Ajax sur le frontal, la partie frontale doit utiliser JS pour obtenir la page actuelle et supprimer le lien vers la pièce '#' hash (vous pouvez obtenir l'emplacement.href.split ('#') [0], et EncodeuriComponent est requis), car une fois la page est partagée, le client WeChat ajoutera la fin de la page. Si le lien actuel n'est pas obtenu dynamiquement, la signature de la page après le partage échouera.
Faites attention à la dynamique ici, ne l'éplignez pas par vous-même et encodez Uricomponent en même temps.
$ .ajax ({type: 'get', URL: URL, dataType: 'jsonp'}). puis ((data) => {wx.config ({debug: true, // activer le mode de débogage, les valeurs de retour de toutes les API appelées seront alertées sur le client. côté.4. Vérifié avec succès via le traitement de l'interface prêt
Une fois les informations de configuration vérifiées, la méthode Ready sera exécutée. Tous les appels d'interface doivent être obtenus une fois que l'interface de configuration a obtenu le résultat. La configuration est une opération asynchrone d'un client. Par conséquent, si vous avez besoin d'appeler l'interface pertinente lorsque la page est chargée, vous devez placer l'interface pertinente dans la fonction Ready à appeler pour assurer une exécution correcte. Pour les interfaces qui ne sont appelées que lorsque l'utilisateur se déclenche, ils peuvent être appelés directement sans les mettre dans la fonction Ready.
wx.ready (() => {// alert ('ready'); //$('#onmenushareAppMessage').on('click ', () => {// partager avec des amis wx.onmenushareAppMessage ({title:' ', desc:' ', lien: shareurl, imgurl:' ', TRIGGER: FONCTION: FONCTION (RESURS) {//Let (allerts (Imgurl:' ', Trigg Envoyer à Friends ');}, Success: Fonction. // Partager sur moments wx.onmenushareTimeline ({title: '', // Partager le lien de titre: shareurl, // lien partager imgurl: '', // icône de partage: function () {alert ('partagé'); // alert ($ ('. No-num'). annule le partage // alerte («annulé»);}}); });5. Échec de la vérification via l'interface d'erreur
La fonction d'erreur sera exécutée en cas d'échec des informations de configuration. Si la signature expire, la vérification échouera. Pour des messages d'erreur spécifiques, vous pouvez ouvrir le mode de débogage de la configuration, ou vous pouvez le visualiser dans le paramètre RES renvoyé.
wx.error ((res) => {alert (res.errmsg);})6. Interface de base
• Interface partager avec des moments
wx.onmenushareTimeLine ({title: '', // Partager le lien de titre: '', // lien de partage imgurl: '', // partager l'icône Success: function () {// la fonction de rappel exécutée après que l'utilisateur a confirmé le partage}}});• Interfaces à partager avec des amis
wx.onmenushareAppMessage ({title: '', // partager le titre desc: '', // partager le lien de description: '', // lien partager imgurl: '', //, le type d'icône de partage: '', // Type de partage, musique, vidéo ou lien, ne remplit pas le lien par défaut DataUrl: '', // Le type est de la musique ou de la vidéo, vous avez besoin Fonction de rappel exécutée après que l'utilisateur a confirmé le partage}, annuler: function () {// Fonction de rappel exécutée après que l'utilisateur annule le partage}});Si vous avez besoin d'ajouter du contenu obtenu avec une demande Ajax asynchrone au contenu partagé ici, l'interface de partage doit être rappelée dans la fonction réussie après le retour de la demande Ajax, mais l'interface de partage doit être placée dans la fonction WX.ready et ne peut pas être appelée séparément. Étant donné que l'opération de partage du client est une opération synchrone, les données utilisant AJAX n'ont pas encore été renvoyées.
7. Ces étapes semblent simples, mais il y a inévitablement de nombreux problèmes lors du débogage , car l'interface JSSDK a encore de nombreuses restrictions. J'ai accidentellement marché sur la fosse.
8. Enfin, j'ai encapsulé cette interface .
'Utiliser Strict'; Laissez wxdefaultOptions = {debug: true, appid: '', horodatage: 0, Noncestr: '', signature: '', jsapilist: ['checkjsapi', 'onmenushareqq', 'onmenushareweibo', ',' onmenushareq ',' 'onmenushareweibo' ', `` onmenusheqq', '' `` ShowMenuems '', `` HideallnonBaseMeUtems '', `` ShowallNonBasemeMiUtems '', `` ShowallNonBaseMenuItems '', `` ShowallNonBaseMenuems ',' Tralatevoice ',' StartreCord ',', ',', 'onrecordend', 'PlayVoice' `` UploadVoice '', `` DownloadVoice ', `` Choiskage' ', `` Aperçu' ', `` Uploadimage', 'DownloadImage', 'GetnetWorkType', 'OpenLocation', 'GetLocation', ',' HideoptionMenu ',' ShowoPtionMenu ',' CloseLocation ' 'addcard', 'choosecard', 'opencard']}; // Let shareurl = 'http: // xxx' + location.pathname; let getwxparam = (url, wxoptions) => {let url = location.href.split ('#') [0]; url = encodeuriComponent (URL); Selt Promise = new promest ((résoudre, rejeter) => {$ .ajax ({type: 'get', url: 'http: // xxx / xxx? param =' + url, dataType: 'jsonp'}) .then ((data) => {let wxparam = data; console.log (wxparam); wxoptions.appid = 'wxeb5c3f4a03b880f0'; résolution ();}, (erreur) => {console.log (erreur); Return promest;} // partager vers des moments Laissez partageocial = (param) => {wx.onmenushareTimeline ({title: param.title, // partager le lien de titre: param.link, // lien de partage imgurl: param.imgurl, // Succès d'icône: function () {// Callback function param.sucback () exécuté après l'intermédiaire confirme le partage; // Fonction de rappel param.failcalback () exécutée après que l'utilisateur annule le partage;}});} // partager avec des amis let ShareToFriends = (param) => {wx.onmenushareAppMessage ({title: param.title, desc: param.desc, lien: param.link, imigurl: param.imgurl, trgerG fonction (res) {param.sucallback ();}, annuler: fonction (res) {}, faillite: function (res) {param.failcalback ();} // {// Partage à moments ShareSocial (param); Titre: '', desc: '', lien: '', imgurl: '', sucallback: func, failcalback: func} module.exports = {wxdefaultOptions, // modifie la configuration callwx, // configuration par défaut, personnaliser le contenu de partage WeChat après configuration de configuration et ready,}Cet article a été compilé dans "Résumé des compétences de développement de JavaScript WeChat", et tout le monde est le bienvenu pour apprendre et lire.
Je voudrais recommander un didacticiel sur le programme WECHAT MINI qui est fortement inquiet: "WECHAT Mini Program Development Tutorial" a été soigneusement compilé par le rédacteur en chef de tout le monde, j'espère que vous l'aimez.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.