我們有兩個頁面,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中文網其他相關文章!