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

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

Y2J

Libérer： 2017-04-25 09:35:18

original

3586 Les gens l'ont consulté

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

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

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": "查看启动日志"
}

Copier après la connexion

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>

Copier après la connexion

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(&#39;../../utils/util.js&#39;)
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync(&#39;logs&#39;) || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

Copier après la connexion

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;
}

Copier après la connexion

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!