微信小程序開發教程（三）項目目錄及文件構成

　　第二章咱們已經建立了一個Hello WXapplet示例小程序。咱們從文件目錄結構來了解Hello WXapplet項目的構成。

　　目錄結構顯示，在小程序項目的根目錄下面包含3個app開頭的文件（app.js、app.json、app.wxss）以及pages目錄與utils目錄。其中pages目錄存放了2個頁面（index和log）的構成文件。每一個頁面都是一個目錄，目錄名就是惟一的頁面名，其下由以頁面名爲前綴的2~4個文件組成。

 　　小程序的目錄文件結構如上，左側的3個app文件必須放在小程序根目錄下面，其餘文件由開發者自由控制。

　　app.js是小程序的腳本代碼，用來監聽並處理小程序的生命週期、聲明全局變量、調用框架提供的豐富API等。　

//app.js
App({
  onLaunch: function () {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登陸接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

app.js代碼示例

　　app.json是對整個小程序的全局配置，配置小程序是由哪些頁面組成，配置小程序的窗口背景顏色、配置導航條樣式、配置默認標題等。（json文件中不能夠加註釋）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.json代碼示例

　　app.wxss是整個小程序的公共樣式表。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

app.wxss代碼示例

　　其中app.js和app.json是必需的。

　　

　　小程序頁面是由同路徑下同名不一樣後綴的2~4個文件組成：

　　.js後綴的文件是腳本文件。

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

index.js代碼示例

　　.json後綴的文件是配置文件。（如存在，會層疊覆蓋app.json的window中相同的配置項，json文件中不能夠加註釋）

　　.wxss後綴的樣式表文件。（如存在，會層疊覆蓋app.wxss中的樣式規則）

/**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;
}

index.wxss代碼示例

　　.wxml後綴的文件是頁面結構文件。

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

index.wxml

　　其中.js文件和.wxml文件時必需的。

　　微信小程序中的每個頁面的「路徑+頁面名」都須要寫在app.json的pages中，且pages中的第一個頁面是小程序的首頁。