집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿 개발에서 페이지를 만드는 방법

WeChat 애플릿 개발에서 페이지를 만드는 방법

php中世界最好的语言원래의: 2018-06-05 10:16:422536검색

인덱스 페이지와 로그 페이지, 즉 환영 페이지와 미니 프로그램 시작 로그 표시 페이지라는 두 페이지가 있습니다. 둘 다 페이지 디렉토리에 있습니다. 위챗 미니 프로그램의 각 페이지의 [경로 + 페이지 이름]은 app.json의 페이지에 작성해야 하며, 페이지의 첫 번째 페이지는 미니 프로그램의 홈페이지입니다.

각 미니 프로그램 페이지는 index.js, index.wxml, index.wxss, index.json과 같이 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일로 구성됩니다. .js 접미사가 있는 파일은 스크립트 파일이고, .json 접미사가 있는 파일은 구성 파일이며, .wxss 접미사가 있는 파일은 스타일 시트 파일이고, .wxml 접미사가 있는 파일은 페이지 구조 파일입니다.

index.wxml은 페이지의 구조 파일입니다.

<font size="3" face="微软雅黑" style=""><!--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></font>

이 예에서 , , 은 페이지 구조를 구축하고 데이터를 바인딩하며 대화형 처리 기능을 수행하는 데 사용됩니다.

index.js는 페이지의 스크립트 파일입니다. 이 파일에서는 페이지의 수명 주기 기능을 모니터링 및 처리하고, 미니 프로그램 인스턴스를 가져오고, 데이터를 선언 및 처리하고, 페이지 상호 작용 이벤트에 응답할 수 있습니다.

<font size="3" face="微软雅黑" style="">//index.js
// 获取应用实例
var app = getApp()
Page({
  data: {
    motto: &#39;Hello World&#39;,
    userInfo: {}
  },
  // 事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: &#39;../logs/logs&#39;
    })
  },
  onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    // 调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      // 更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})</font>

index.wxss 是页面的样式表：
<font size="3" face="微软雅黑" style="">/**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;
}</font>

코드 복사

페이지 스타일시트는 선택사항입니다. 페이지 스타일 시트가 있는 경우 페이지 스타일 시트의 스타일 규칙은 app.wxss의 스타일 규칙 위에 적용됩니다. 페이지의 스타일 시트를 지정하지 않으면 페이지의 구조 파일에서 app.wxss에 지정된 스타일 규칙을 직접 사용할 수도 있습니다.

index.json은 페이지의 구성 파일입니다.

페이지의 구성 파일은 필요하지 않습니다. 페이지 구성 파일이 있으면 페이지의 구성 항목이 app.json 창의 동일한 구성 항목을 덮어씁니다. 지정된 페이지 구성 파일이 없으면 app.json의 기본 구성이 페이지에서 직접 사용됩니다.

로그의 페이지 구조

<font size="3" face="微软雅黑" style=""><!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view></font>

로그 페이지는 제어 태그를 사용하여 코드를 구성하고, wx:for-items를 사용하여 로그 데이터를 에 바인딩하고, 로그 데이터를 루프하여 노드를 확장합니다.

<font size="3" face="微软雅黑" style="">//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))
      })
    })
  }
})</font>

완전 마스터하신 것 같습니다. 이 기사 Method의 사례를 읽은 후 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!