미니 프로그램 개발의 기초 - 인덱스 페이지 분석(5)

이전 튜토리얼에서는 WeChat 애플릿 개발 자체와 관련이 없는 몇 가지 기술적 문제에 대해 설명했습니다. 이제 주제로 돌아가겠습니다.

이 튜토리얼에서는 기본적으로 생성되는 인덱스 페이지를 중심으로 설명합니다. 이전 튜토리얼에서 작성한 것처럼 각 페이지에는 .js(처리 로직), .wxml(페이지 내용 설명) 및 .wxss(페이지 스타일 구성)의 세 가지 파일이 포함되어 있습니다.

설명하기 전 사진을 올려주세요

여기에 사진 설명을 적어주세요

내용 사용자 아바타, 사용자 이름, "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>

의 내용을 살펴보겠습니다. 페이지의 계층 구조는 상대적입니다. 세 개의 보기 태그, 하나의 이미지 및 두 개의 텍스트 태그로 간단합니다. 여기서 보기는 컨테이너 태그이고, 이미지는 사용자의 아바타를 표시하는 데 사용되며, 첫 번째 텍스트는 사용자의 별명을 표시하는 데 사용되며, 두 번째 텍스트는 "Hello World"입니다. "

페이지 설명 파일에서 볼 수 있는 두 번째 뷰 태그의 bindtap="bindViewTap"을 포함하여 여러 변수가 바인딩되어 있습니다. src="{{userInfo.avatarUrl }}이미지 태그의 및 두 개의 텍스트 태그의 콘텐츠 텍스트입니다. 그렇다면 이러한 변수는 어디에 정의되어 있나요?

//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에 의해 바인딩된 변수를 정의하는 객체. 여기서 페이지가 로드될 때 onLoad 메소드가 호출됩니다. 이 메소드는 사용자 정보를 얻고 이를 userInfo 속성에 할당하기 위해 앱 객체의 getUserInfo 메소드를 호출합니다. 사용자의 아바타와 닉네임이 인터페이스에 표시될 수 있습니다. 모토 속성은 또한

페이지 객체로 이동하는 메소드를 정의합니다. wx.navigateTo를 호출하여 페이지 탐색에 대한 자세한 내용은 이 예제에서 설명하며, 사용자가 사용자의 아바타 및 닉네임 보기 영역을 클릭하면 프로그램이 로그 페이지를 표시합니다

마지막으로 index.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!