Tutoriel pratique sur le développement de mini-programmes WeChat à l'aide de WordPress

Résumé : Cet article est le deuxième article de la série « WordPress Développer des mini-programmes WeChat ». Cet article enregistre le processus de développement de la version v1.1 du mini-programme « DeveWork+ ». Comme toujours, le public cible est constitué d’étudiants front-end qui connaissent WordPress. Il est recommandé de lire le premier article avant de lire cet article. Si vous n'avez pas lu ce mini programme...

Cet article est le deuxième de la série « WordPress Développer des mini-programmes WeChat ». Cet article enregistre le développement de « DeveWork+ ». " mini programme v1.1 version du procédé. Comme toujours, le public cible est constitué d’étudiants front-end qui connaissent WordPress. Il est recommandé de lire le premier article avant de lire cet article.

Si vous n'avez pas vu ce mini programme, vous pouvez participer à l'expérience via le code du mini programme ci-dessous. Notez qu'à la lecture de l'article, la version que vous avez numérisée n'est peut-être pas la v1.1.

La version v1.1 de l'applet "DeveWork+" comporte de nombreuses mises à jour. Voici quelques enregistrements significatifs. Vers le bas. Veuillez noter que le contenu de cet article se déroule légèrement différemment de l’article précédent. Chaque chapitre est un point de changement et fait référence à l'historique de mise à jour de l'outil de développement de l'applet WeChat et utilise A (Ajouter), F (Réparer) et U (Mise à jour) comme début du sous-titre.

A : Nouvelle section "Sujet"

La version 1.1 ajoute un onglet "Sujet" et des pages associées (comme indiqué ci-dessus). Les « Sujets » sont équivalents aux articles du catalogue WordPress. La page d'entrée est constituée de trois cartes aux coins arrondis avec des graphiques et du texte, et la mise en page est très simple. Transmettez les informations pertinentes à la fonction d'événement de clic via data-xx et id.

<view class="featured-item" data-title="WordPress" id="2" catchtap="redictCatArchive">      "{{featuredImg.one}}" mode="widthFix" class="featured-img">
      <view class="featured-content">
        <view class="featured-title">WordPressview>class="featured-desc">有关WordPress 的高级使用技巧view>
    view>

Un point de développement se trouve ici : dans < Après avoir configuré la tabBar dans 🎜>, lorsque la page à sauter se trouve dans la configuration de la tabBar, vous ne pouvez pas utiliser app.json et wx.navigateTo - c'est-à-dire que wx.redirectTo et wx.navigateTo ne peuvent pas accéder à la page à onglet. wx.redirectTo

A : Fonction de partage (transfert)

La première version n'a pris que deux jours à réaliser à la hâte, et la fonction de partage n'a été ajoutée que dans cette version. La fonction de transfert n'a besoin que d'appeler la fonction officielle onShareAppMessage, car le déclencheur de partage doit être postérieur au cycle de vie Onload, il est donc possible de modifier dynamiquement les paramètres de partage.

//https://devework.com/wordpress-weapp-2.htmlonShareAppMessage: function () {        return {            title: this.data.detail.title.rendered,            path: '/pages/single/single?id=' + this.data.detail.id,            success: function (res) {                console.log('转发成功')

            },            fail: function (res) {                console.log('转发失败')

            }

        }

    }

A : Rejoignez le mini programme MTA (Tencent Mobile Analytics) pour les statistiques de données

Lorsque la version 1.0 a été développée, les statistiques de données fournies avec le mini programme n'étaient pas très puissantes, nous avons donc décidé d'en utiliser un troisième. service de statistiques sur les données des partis. En plus d’être un bonus pour Tencent, MTA m’attire de par sa fonction « événement personnalisé », qui me permet d’obtenir des analyses de données pertinentes en fonction de mes besoins personnels. Par exemple, les événements suivants configurés par Jeff me permettent de savoir quels articles sont populaires, quels utilisateurs opèrent le plus fréquemment, etc.

Les étapes d'utilisation du MTA ne seront pas répétées ici. Après tout, le responsable dispose de documents plus détaillés.

A : Augmentez le nombre de vues d'articles et ajoutez l'icône de police.

Identique au site Web, ajoutez les informations sur les pages vues de l'article et ajoutez la police à l'icône d'heure de publication de l'article et d'informations sur le navigateur. .

Les informations sur le nombre de vues d'articles sont affichées par défaut dans l'API REST, donc l'API REST de WordPress doit être personnalisée ; l'icône de police utilise directement la même icône que le site Web, car le mini programme ne prend pas en charge le local. fichiers de polices, donc gulp-inline-base64 est utilisé. Ce type de plug-in convertit le fichier de polices ttf en une adresse base64, puis l'utilise comme un développement Web normal.

U : Encapsule Promise pour faciliter l'écriture de code

Bien que l'applet WeChat prenne officiellement en charge ES6, Jeff s'est senti un peu coincé après avoir utilisé Promise. J'ai donc utilisé une promesse encapsulée par un tiers pour éviter le code dégoûtant "l'enfer des rappels".

Cette bibliothèque encapsule également la fonction Request du mini programme. Après avoir chargé les fichiers pertinents, réécrivez la fonction d'origine pour obtenir la liste des articles. Les modifications de code pertinentes sont les suivantes :

<🎜. >

//https://devework.com/wordpress-weapp-2.htmlvar postsRequest = wxRequest.getRequest(api.getPosts(data));

postsRequest.then(res => {

    self.setData({        noMore: res.data.length == 0,       postsList: 

          //    细节代码略         })

.finally(function (res) {    console.log('Index:finally~')    //    细节代码略})

U：更换TabBar Icon，增加空白占位

上一篇的“踩坑篇”中有提及 TabBar Icon 的坑点，这次伴随着更新将图标全部都换了，配合整体风格采用了更加细的线型图标。推荐一个下载这类图标的站点：http://www.flaticon.com/。

下载的图标还是做了些处理：根据官方推荐处理为81x81 大小，并增加占位透明 padding 为了让icon 在真机上看起来没那么大。

F：下拉加载，文章已经完全load 完的处理

之前第一版是没有做加载完毕的处理的，因为那时候感觉300多篇文章应该没人去下拉完（事实上我也从来没有拉到底过）。但现在加上了“专题”板块后就有可能了所以需要兼容下文章列表已经加载完毕的情况。

Jeff 的处理方式是添加一个noMore 参数，然后默认为false。当请求API 后检测数据长度，为0 就表示文章列表已经加载完全，noMore变为true。

然后在WXML 文件中加入一个提示：

<view class="entry-empty" hidden="{{!noMore}}">·· 无更多文章 ··view>

这种处理方式其实不怎么好，待后续优化。

F：考虑用户体验，授权失败的优雅处理

这里我单独写了一篇文章，请参考《提升用户体验，小程序“授权失败”场景优雅处理方案》。

结尾

以上就是1.1 版本的主要更新内容。1.1 版本的审核刚好在端午节前后，所以实质花了不少时间。

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!