這篇文章主要介紹了小程序如何創(chuàng)建頁面，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、南川ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的南川網(wǎng)站制作公司

我們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動日志的展示頁，他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑 + 頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js 后綴的文件是腳本文件，.json 后綴的文件是配置文件，.wxss 后綴的是樣式表文件，.wxml 后綴的文件是頁面結(jié)構(gòu)文件。

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

<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>

本例中使用了 、、 來搭建頁面結(jié)構(gòu)，綁定數(shù)據(jù)和交互處理函數(shù)。

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

<font size="3" face="微軟雅黑" style="">//index.js
// 獲取應(yīng)用實例
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ù)
    app.getUserInfo(function(userInfo){
      // 更新數(shù)據(jù)
      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>

復(fù)制代碼

頁面的樣式表是非必要的。當(dāng)有頁面樣式表時，頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。

index.json 是頁面的配置文件：

頁面的配置文件是非必要的。當(dāng)有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。

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

<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 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點

<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>

感謝你能夠認真閱讀完這篇文章，希望小編分享小程序如何創(chuàng)建頁面內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學(xué)習(xí)!

新聞名稱：小程序如何創(chuàng)建頁面
網(wǎng)頁網(wǎng)址：http://www.chinadenli.net/article2/gpdooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、標簽優(yōu)化、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)