Wen | Jeff

Il y a quelques semaines, j'ai passé deux jours, leur site WordPress fait une petite version micro-canal du programme.

Cet article est mon propre record dans le développement de la première version du processus applet.

Programme de sensibilisation (Micro zxcx0101 Signal) aujourd'hui pour partager cet article expliquera étape par étape, comment aider un site WordPress API REST développé la version micro-canal de l'applet.

Regarder « programme connu » numéro public, répondre à « développer » les coulisses micro lettre, obtenir une petite compétences de développement programme comptait article.

Comment petit programme lit le contenu du blog WordPress?

WordPress 4.6 version présente l'API REST. En termes simples, Il est un échange de données de programme client et serveur via requête HTTP est terminée.

Nous avons visité le site de WordPress ordinaire habituelle, en l'absence de cache statique ouvert, généralement besoin de traiter « le processus de serveur de données pull PHP HTML fait à partir de la base de données de l'interface du navigateur de l'utilisateur ».

processus API REST est similaire, mais légèrement différente: La sortie est donnée au format JSON, et typiquement au client (navigateur Web non) à utiliser.

Avec l'API REST, faire un site web différents clients (Android ou iOS dans l'application, ainsi que les applets micro-canaux), tout en partageant une base de données que possible.

Nous pouvons à travers le navigateur, l'accès direct à l'une des adresses d'interface WordPress Your-site.com/wp-json/wp/v2/posts per_page = :? 5 & page = 1, vous pouvez voir quelque chose comme ce retour.

Maintenant, laissez-moi à l'adresse ci-dessus sera expliqué.

 
• / Wp-JSON / wp / v2 / API REST est défini itinéraire WordPress (routeur) en combinaison avec le numéro de version.
• messages dans WordPress, connu sous le nom de la « fin » (point final).
• per_page la page est le paramètre.

L'URL ci-dessus, La figure 5 représente la sortie des données les plus récentes sur un article (5 à 1) .

Canaux Micro applets API REST, vous pouvez obtenir les données sur le site de WordPress. Après le traitement des données, ce qui rend le code par l'avant, ce que vous voyez dans l'interface client micro-canal.

WordPress Le API REST a été parfait, ce que les données de l'article, les données de page, les données utilisateur et si seul.

WordPress comme un applet back-end, vraiment économiser beaucoup de main-d'uvre, au moins pour ceux d'entre nous chien haut, le code back-end sans écriture difficile à la force.

Je commencé à travailler, faire un petit programme WP

section précédente décrit à peu près la behind logique, l'étape suivante pour développer le site « DeveWork Geeks » applet première édition à titre d'exemple, trois pages (accueil, page de contenu, lisez les pages d'enregistrement) sensiblement Comment faire out.

1. Préparation

Les préparatifs n'élaborent, comprend généralement les opérations suivantes.

 
• Après la plate-forme de gestion publique plate-forme micro-canal compte enregistré applet, configuration des noms de domaine légitimes.
• Deuxièmement, assurez-vous que le serveur configuré HTTPS (mais pas nécessairement requis pour l'enregistrement).

En outre Avant de commencer le développement de l'API WordPress REST j'ai fait une sortie sur mesure sur le côté serveur.

2. Structure du projet

Combiné avec des exemples de démarrage rapide officielles microcanaux et besoins personnels, le projet est structuré comme suit bons points:

. app.js app.json app.wxss config.js // profil l'image // répertoire // Photos pages répertoire page utils / / utilité untils classe wxParse // bibliothèques tierces wxParse

3. Dressez une liste des articles Page

applet accueil est la page de liste d'articles. Lorsque vous démarrez un petit programme, il présentera les dernières cinq articles, puis descendre à charger un plus grand débit de papier.

Ici, nous utilisons WordPress API REST est your-site.com/wp-json/wp/v2/posts?per_page={num}&page={num}.

fichier core index.js, par l'interface wx.request pour accéder à l'URL de l'API ci-dessus pour obtenir les données d'article, puis rendu setData.

// https://devework.com/wordpress-rest-api-weixin-weapp.htmlwx.request ({url: url, succès: function (réponse) {{self.setData (messages: self.data.posts.concat (response.data.map (function (item) {... // filtrage des données / formatage, etc. ... retour article;}))});}});}

J'encapsulées dans le code de fonction, pour faciliter les appels ultérieurs répétés.

des données de sortie cycliques fournies par index.wxml. Parce que pour faire rouler la charge, de sorte que l'utilisation d'un petit composants défilement vue du programme.

Au-dessus du code WXML, lier les deux fonctions d'événements: En premier lieu, événement déroulant pullDownRefresh, un clic pour passer aux événements de page de l'article redictSingle.

// déroulante rafraîchissement pullDownRefresh: function (event) {var self = this; self.setData ({page: self.data.page + 1 // Page 1}); console.log ( 'page actuelle:' + auto. data.page); this.fetchData ({page: self.data.page});} // route de navigation dans les pages de l'article redictSingle: function (event) {console.log ( 'redictSingle'); id var = événement .currentTarget.id // WordPress où id est en fait l'identifiant de l'article, doit être transmis à la seule page var url = '../single/single?id=' + id; wx.navigateTo ({url: url}) } 4. Construction de détails de l'article page

Article pages à utiliser l'adresse de l'API est your-site.com/wp-json/wp/v2/posts/{id}. De même, l'interface pour accéder à l'URL via wx.request, puis rendre les données à la page WXML.

Un code similaire à ce qui précède, ne se reproduira pas. Mais il faut rappeler que rapportent à la façon dont ce problème sera converti en applet texte riche lettre micro WXML reconnaissable.

Comme les données JSON acquises, le corps de l'article est un morceau de code HTML. Si la sortie HTML directement à un petit programme, est donné le.

Nous avons besoin de ce code HTML dans un petit programme de micro-canal langage WXML, la section suivante, je vais vous expliquer ce processus.

4. Lisez la page Historique

Lisez la page d'enregistrement est utilisé pour afficher l'historique de navigation de l'utilisateur, l'exemple Bonjour tout le monde officiel brille directement à boutonner.

Cette page est principalement utilisé dans les deux interfaces suivantes: un cache local interfaces associées, autorisation utilisateur interfaces associées (wx.login, wx.getUserInfo, etc.).

De l'expérience utilisateur, vous ne devriez pas commencer à appliquer pour les utilisateurs autorisés, mais il faut appliquer seulement une page. En même temps, il faut aussi faire un bon travail de manipulation de l'utilisateur refuse l'autorisation élégante.

Regarder « programme connu » Numéro public micro-canal, la réponse « informations utilisateur » dans les coulisses micro lettre pour voir comment petit correctement obtenir des informations utilisateur du programme.

Lire l'article est basé sur des enregistrements de données historiques enregistrées dans le cache local du client, plutôt que les nuages. Ainsi, une « lecture seule enregistrements stockés dans ce dispositif, » suggère, est nécessaire.

Pendant ce temps, sur la prise en compte de la limite de cache applet, j'enregistreront la limite supérieure est de 20.

// Obtenir enregistrement d'appel API à partir du cache local lus et enregistrés journaux var = wx.getStorageSync ( 'readLogs') ||; // les doublons de filtre si (logs.length >  0) {= logs logs.filter (function (log) {journal de retour == id ;!});} // si plus d'un nombre spécifié if (logs.length >  19) {logs.pop //} Enlever le dernier logs.unshift ( ); Wx.setStorageSync ( '', readLogs logs);

Le code ci-dessus, en fait, est à l'intérieur single.js. Numéro d'article parce que je dois enregistrer le titre, et seulement single.js, fera l'acquisition de deux données simultanément.

Enfin, je dois aussi fonction du cycle de vie des log.js onshow à, pour lier une fonction à mettre à jour les données:

updateData: function (cb) {var qui = this; // readlog this.setData ({readLogs: (wx.getStorageSync ( 'readLogs') ||) .map (function (log) {journal de retour;})})} ,

Le processus de développement, je suis entré fosse

Ce chapitre est principalement d'enregistrer une fosse dans le processus de développement, et la solution que j'ai adopté.

1. Barre d'onglets problème d'image

Applet soutien officiel déclarées images SVG, Mais la barre d'onglets ne supporte pas les images SVG.

Le fonctionnaire a recommandé 81 × 81 px Taille px d'images PNG, mais cela est encore un peu fosse.

conception recommandée icône lorsque l'icône de la barre d'onglets pour laisser un peu de rembourrage transparent Dans le cas contraire, l'icône sera plus librement sur une vraie machine.

2. L'anti-hotlinking d'images paramètres referer

Si vous avez une image processus hébergé de la chaîne de sécurité du serveur, ce sera aussi servicewechat.com dans la liste blanche. Rappelez-vous, cette liste n'est pas qq.com blanc.

3. Chemin absolu des composants d'image, doit commencer par HTTPS

src et chemin absolu des composants d'image, dans le développement web est autorisé à omettre la présence d'un tel nom de protocole //example.com/pic.png similaire.

Imaginez ce chemin, il peut afficher correctement dans les outils de développement web micro-lettre. Cependant, dans la machine réelle, il ne peut pas être correctement chargé. Dans la machine réelle doit être un chemin absolu commençant par HTTPS.

Bad traitement de données côté serveur, il peut être traité par la fonction suivante:

// remplissage dans l'URL complète HTTPSfunction addhttps (url) manquant {if |: {url = "https:" + url;} (/ ^ (f ht) tps \ / \ // i.test (url) !?) url retour ;.} 4 outils de développement applet UA UA diff? rent du

Outils de développement simulent UA petit programme comme celui-ci:

... Chrome / Safari 53.0.2785.143 / 537,36 appservice WebView / 100000

Nginx par le journal, nous pouvons savoir, UA est en fait une véritable machine en cours d'exécution UA micro lettre:

... Mobile / 14E304 MicroMessenger / 6.6.0 NETTYPE / WIFI Langue / zh_CN

Dans certains cas, vous devez prêter attention à ces différences.

La mise en page par défaut Flex

Si vous développez votre exemple de code applet sur la base officielle suggéré Flex mise en page à supprimer le code correspondant de app.wxss. Ce faisant, vous réduirez la probabilité d'éprouver des problèmes de merveilleux style de travail.

6. fosse wxParse

Applet utiliser la conversion de texte riche est wxParse ce bibliothèques tiers, le temps a constaté que de nombreux puits (mais c'est la plus pratique de la bibliothèque).

L'un est le code global caractères sont remplacés par des WX-codexxx, l'intention de l'auteur devrait être de remplacer ces étiquettes de code, mais peut accidentellement mal.

Les solutions ne peuvent être supprimés que le code temporaire.

En outre, lors de l'utilisation wxParse, attribut src de la composante de l'image sera plusieurs Parsis une virgule.

Figure mots:

Le chiffre est également bien au-dessus explique la fosse avec l'image fosse referer HTTPS au début du chemin. Les solutions doivent d'abord changer le code source (html2json.js) à la réparation:

// Correction: img tableau de balises contenant des problèmes si un caractère nul (imgURL == '') {imgUrl.splice (0, 1);}

A propos du texte riche, les bonnes nouvelles sont que la composante officielle de texte enrichi a été libéré.

Regarder « programme connu » Numéro public micro-canal, la réponse « texte riche » dans les coulisses micro lettre, la possibilité d'afficher les applets nouveau texte riche interprétation composants.

derniers mots

À ce stade, je peux être considéré et plus en détail, décrit la version de développement de processus d'applet WordPress. Le prochain travail, la nature est soumis aux résultats officiels de l'audit et la notification attente.

Tout au long du processus de développement est en fait pas trop difficile, si vous avez utilisé avant Angulaire, Vue tel cadre MVVM, l'ensemble du processus de développement est fondamentalement il suffit de regarder la documentation officielle du problème.

"DeveWork Geeks" lien applet

https://minapp.com/miniapp/3016/

Adresse originale: https: //devework.com/wordpress-rest-api-weixin-weapp.html

Regarder « programme connu » numéro public, répondre à « développer » les coulisses micro lettre, obtenir une petite compétences de développement programme comptait article.