ミニプログラム開発の基礎 - ログページ分析 (6)

前のチュートリアルでは、インデックス ページを分析しました。この記事では、ログ ページを分析します。

最初に画像を表示するのが古いルールです

ログ ページには、戻るボタンが含まれています。インデックスページに戻る）、ページタイトル、プログラム起動ログリスト。

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

<!--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>

logs.wxml では、3 つのタグがこれらはそれぞれビュー、ブロック、テキストであり、ビュー ラベルはコンテナーであり、ブロックはログ配列をバインドするために使用され、テキスト ラベルは各ログを表示するために使用されます。 wx:for と wx:for-item は、ミニ プログラム ボックスによって提供されるリスト バインディング構文です。詳細については、リスト レンダリングを参照してください。

//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 はログ配列を定義し、ローカル キャッシュからプログラムの起動を取得します。 onLoad メソッドで時刻データを取得し、配列の map メソッドを呼び出して時刻を文字列にフォーマットします

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

最後に、ページ スタイルを制御するのはやはり logs.wxss です。

この時点で、デフォルト生成プログラムの解析部分は終了です。この分析プロセスはWeChatミニプログラムを全体的に理解するためのものなので、深く掘り下げられていない部分も多いです。次のチュートリアルでは、引き続き WeChat アプレット開発のさまざまな側面について説明します。

以上がミニプログラム開発の基礎 - ログページ分析 (6)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。