Grundlagen der Miniprogrammentwicklung – Indexseitenanalyse (5)

Im vorherigen Tutorial ging es um einige technische Probleme, die nichts mit der WeChat-Applet-Entwicklung selbst zu tun haben.

Dieses Tutorial erklärt hauptsächlich die standardmäßig generierte Indexseite. Wie im vorherigen Tutorial beschrieben, enthält jede Seite drei Dateien: .js (Verarbeitungslogik), .wxml (Beschreibung des Seiteninhalts) und .wxss (Konfiguration des Seitenstils). Dasselbe gilt für die Indexseite.

Bevor Sie es erklären, laden Sie bitte ein Bild hoch

Schreiben Sie hier die Bildbeschreibung

Der Inhalt der Indexseite ist nicht Es gibt nur einen Benutzer-Avatar, einen Benutzernamen und „Hallo Welt“. Schauen wir uns zunächst den Inhalt von index.wxml an

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

Die hierarchische Struktur der Seite ist relativ einfach, mit drei Ansichts-Tags und einem Bild und zwei Text-Tags, wobei Ansicht das Container-Tag ist, das Bild zur Anzeige des Avatars des Benutzers verwendet wird, der erste Text zur Anzeige des Spitznamens des Benutzers verwendet wird und der zweite Text „Hallo“ ist Welt“

Sie können die Seitenbeschreibung sehen. Mehrere Variablen sind in der Datei gebunden, darunter bindtap="bindViewTap" des zweiten Ansichtstags, src="{{userInfo. avatarUrl}} des Bild-Tags und zwei Der Inhaltstext eines Text-Tags. Wo sind diese Variablen also im

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.js-Code definiert das Page-Objekt, das die index.wxml-Bindung definiert. Die onLoad-Methode wird aufgerufen, wenn die Seite geladen wird. Diese Methode ruft die getUserInfo-Methode des App-Objekts auf, um die Benutzerinformationen abzurufen und sie dem userInfo-Attribut zuzuweisen dass der Avatar und der Spitzname des Benutzers direkt durch das Motto-Attribut angezeigt werden können. Das

Page-Objekt definiert auch die bindViewTap-Methode, die durch Aufrufen von wx.navigateTo zur Protokollseite navigiert. Weitere Informationen zur Seitennavigation werden in einem späteren Tutorial erläutert. Wenn der Benutzer in diesem Beispiel auf den Ansichtsbereich des Benutzeravatars und seines Spitznamens klickt, zeigt das Programm abschließend einen kurzen Blick auf den Index .wxss

Dateidefinition Der in index.wxml verwendete Stilselektor ist relativ einfach, daher werde ich ihn hier nicht erklären

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

Das obige ist der detaillierte Inhalt vonGrundlagen der Miniprogrammentwicklung – Indexseitenanalyse (5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!