我們有兩個頁面，index 頁面和 logs 頁面，也就是歡迎頁和小程式啟動日誌的展示頁，他們都在 pages 目錄下。微信小程式中的每一個頁面的【路徑 頁面名稱】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程式的首頁。
每一個小程式頁面是由同路徑下同名的四個不同後綴檔案的組成，如：index.js、index.wxml、index.wxss、index.json。 .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: '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
})
})
}
})</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 的 window 中相同的設定項。如果沒有指定的頁面設定文件，則在該頁面直接使用 app.json 中的預設配置。
logs 的頁面結構
<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>登入後複製
logs 頁面使用 控制標籤來組織程式碼，在 上使用wx:for-items 綁定logs 數據，並將logs 資料循環展開節點
<font size="3" face="微软雅黑" style="">//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))
})
})
}
})</font>登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
微信小程式開發取得使用者基本資訊
微信小程式開發如何建立專案
以上是微信小程式開發如何創建頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
