微信小程序開(kāi)發(fā)怎樣創(chuàng)建頁(yè)面

我們有兩個(gè)頁(yè)面，index 頁(yè)面和 logs 頁(yè)面，即歡迎頁(yè)和小程序啟動(dòng)日志的展示頁(yè)，他們都在 pages 目錄下。愛(ài)掏網(wǎng) - it200.com微信小程序中的每一個(gè)頁(yè)面的【路徑 + 頁(yè)面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個(gè)頁(yè)面是小程序的首頁(yè)。愛(ài)掏網(wǎng) - it200.com

每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。愛(ài)掏網(wǎng) - it200.com.js 后綴的文件是腳本文件，.json 后綴的文件是配置文件，.wxss 后綴的是樣式表文件，.wxml 后綴的文件是頁(yè)面結(jié)構(gòu)文件。愛(ài)掏網(wǎng) - it200.com

index.wxml 是頁(yè)面的結(jié)構(gòu)文件：

{{userInfo.nickName}}{{motto}}

本例中使用了 、、 來(lái)搭建頁(yè)面結(jié)構(gòu)，綁定數(shù)據(jù)和交互處理函數(shù)。愛(ài)掏網(wǎng) - it200.com

index.js 是頁(yè)面的腳本文件，在這個(gè)文件中我們可以監(jiān)聽(tīng)并處理頁(yè)面的生命周期函數(shù)、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁(yè)面交互事件等。愛(ài)掏網(wǎng) - it200.com

//index.js
// 獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  // 事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    // 調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      // 更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss 是頁(yè)面的樣式表：
/**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;
}

復(fù)制代碼

頁(yè)面的樣式表是非必要的。愛(ài)掏網(wǎng) - it200.com當(dāng)有頁(yè)面樣式表時(shí)，頁(yè)面的樣式表中的樣式規(guī)則會(huì)層疊覆蓋 app.wxss 中的樣式規(guī)則。愛(ài)掏網(wǎng) - it200.com如果不指定頁(yè)面的樣式表，也可以在頁(yè)面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。愛(ài)掏網(wǎng) - it200.com

index.json 是頁(yè)面的配置文件：

頁(yè)面的配置文件是非必要的。愛(ài)掏網(wǎng) - it200.com當(dāng)有頁(yè)面的配置文件時(shí)，配置項(xiàng)在該頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。愛(ài)掏網(wǎng) - it200.com如果沒(méi)有指定的頁(yè)面配置文件，則在該頁(yè)面直接使用 app.json 中的默認(rèn)配置。愛(ài)掏網(wǎng) - it200.com

logs 的頁(yè)面結(jié)構(gòu)

{{index + 1}}. {{log}}

logs 頁(yè)面使用 控制標(biāo)簽來(lái)組織代碼，在 上使用 wx:for-items 綁定 logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開(kāi)節(jié)點(diǎn)

//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))
      })
    })
  }
})

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注愛(ài)掏網(wǎng) - it200.com其它相關(guān)文章！

推薦閱讀：

微信小程序開(kāi)發(fā)獲取用戶基本信息

微信小程序開(kāi)發(fā)怎樣創(chuàng)建項(xiàng)目

以上就是微信小程序開(kāi)發(fā)怎樣創(chuàng)建頁(yè)面的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注愛(ài)掏網(wǎng) - it200.com其它相關(guān)文章！