Bases du développement de mini-programmes - Analyse des pages de journaux (6)

Dans le tutoriel précédent, la page d'index a été analysée. Cet article analysera la page des journaux

L'ancienne règle est d'afficher l'image en premier

Page des journaux

Cette page contient le bouton de retour (utilisé pour revenir à la page d'index), le titre de la page et la liste des journaux de démarrage du programme.

Par rapport à la page d'index, la page des journaux contient un fichier logs.json supplémentaire pour configurer le contenu du titre de la page

{
    "navigationBarTitleText": "查看启动日志"
}

Pour plus d'éléments de configuration, veuillez vous référer à l'applet de configuration

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

Dans logs.wxml, trois balises sont définies, à savoir view, block et text. La balise view est le conteneur, le bloc est utilisé pour lier le tableau des journaux et la balise text est utilisée pour afficher chaque journal. . wx:for et wx:for-item sont la syntaxe de liaison de liste fournie par la mini boîte de programme. Pour plus de détails, veuillez vous référer à List Rendering

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

logs.js définit le tableau des journaux, et dans le fichier logs. Méthode onLoad de Obtenez les données d'heure de démarrage du programme à partir du cache local, puis appelez la méthode map du tableau pour formater l'heure en chaîne

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

Enfin, c'est toujours logs.wxss à contrôler. le style des pages.

À ce stade, la partie analyse du programme de génération par défaut est terminée. Ce processus d'analyse vise à acquérir une compréhension globale des mini-programmes WeChat, donc de nombreux endroits ne sont pas approfondis. Dans les didacticiels suivants, je continuerai à expliquer divers aspects du développement d'applets WeChat.

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!