ミニプログラム開発の基礎 - インデックスページ分析 (5)

前のチュートリアルでは、WeChat アプレットの開発自体とは関係のないいくつかの技術的な問題について説明しました。ここで、本題に戻りましょう。

このチュートリアルでは、デフォルトで生成されるインデックスページを中心に説明します。前のチュートリアルで説明したように、各ページには .js (処理ロジック)、.wxml (ページ コンテンツの記述)、および .wxss (ページ スタイルの構成) の 3 つのファイルが含まれています。これはインデックス ページにも当てはまります。

説明する前に写真を撮りましょう

ここに写真の説明を書きます

インデックスページのコンテンツは多くはなく、ユーザーのアバター、ユーザー名、そして「Hello World」だけが最初にありますIndex.wxml を見てみましょう

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

このページの階層構造は比較的単純で、3 つのビュー タグ、1 つのイメージ タグ、2 つのテキスト タグで構成されています。ビューはコンテナー タグで、イメージはユーザーのアバターを表示するために使用されます。 、最初のテキストはユーザーのニックネームを表示するために使用されます。2 番目のテキストは「Hello World」です

いくつかの変数がページ記述ファイルにバインドされていることがわかります。つまり、2 番目のビュー タグの bindtap="bindViewTap" です。および src="{{ 画像タグ userInfo.avatarUrl の場合}} と 2 つのテキスト タグのコンテンツ テキスト。では、これらの変数はどこで定義されているのでしょうか? 答えは、index.js にあります

//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 コードは次のように定義しますIndex.wxml を定義する Page オブジェクト。ページのロード時に onLoad メソッドが呼び出されるバインド変数は、アプリ オブジェクトの getUserInfo メソッドを呼び出してユーザー情報を取得し、それを userInfo 属性に割り当てます。これにより、インターフェイスにユーザーのアバターとニックネームが表示されます。「表示は、montotto 属性によって直接指定されます。

Page オブジェクトは、wx.navigateTo を呼び出すことでログ ページに移動する、bindViewTap メソッドも定義します。ページ ナビゲーションの詳細この例では、ユーザーがユーザーのアバターとニックネームの表示領域をクリックすると、プログラムはログ ページを表示します

最後に、インデックスを簡単に見てみましょう。 wxss

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

このファイルはindex.wxmlで使用されるスタイルセレクターを定義します。この部分は比較的単純なので、ここではあまり説明しません

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