在微信小程式淺析中講到微信小程式原理以及怎麼新建一個hello world 工程，還挖了坑。現在把坑填上，捋一捋小程式的程式碼結構。看一下截圖：

全域性檔案

看一下目錄結構：
前面也說到，全域性檔案有且只有三個app.js、app.json、app.wxss。我們瞄一瞄裡面的內容：

app.js

//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方法負責註冊小程式，該方法接收一個object物件，該object物件包含小程式的全域性資料、全域性函式和生命週期函式等。比如globalData是全域性資料，getUserInfo為全域性函式、onLaunch是啟動時呼叫的生命週期函式。值得注意的是小程式只能再裡面註冊，並且在其他地方不要呼叫生命週期函式，生命週期函式應由微信內部呼叫，我們只負責實現。

app.json

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

hello world 一共有兩個頁面，都在page項裡都進行了配置，如果沒有進行配置的話微信將無法載入頁面，還有就是頁面檔案除了字尾名外都必須同名配置項及其屬性有很多，詳見框架->配置。

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

這個沒什麼好說的，主要負責全域性樣式。如果頁面的子樣式有屬性和全域性屬性重合，子樣式會覆蓋全域性樣式。其實這些跟css差不多，wxss是weixin style sheets的縮寫，但是它不支援css級聯選擇器，並且為了適配，引入了rpx作為單位，詳見框架->WXSS

頁面檔案

頁面檔案除了包含js、json、wxss外，還多了一個wxml檔案。前面三個和全域性配置的功能幾乎是一樣的，只不過作用域是在頁面而不是全域性，那我們看看wxml是個什麼鬼。這裡以index頁面為例：

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

結合預覽檢視，可以看到，這是一個類似xml格式的頁面描述檔案—-wxml(WeiXin Markup Language 微信標記語言),為了後續的介紹，把剩下的兩個檔案也貼出來：

index.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.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;
}

仔細觀察上面三個檔案，可以看到，wxml頁面的樣式是通過wxss控制的，類似於html與css。沒有什麼好說的，我們關鍵看看頁面檔案資料是如何和指令碼互動的。
在wxml中：

<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<text class="user-motto">{{motto}}</text>

在js中：

data: {
    motto: 'Hello World',
    userInfo: {}
  }

也就是說頁面中的內容是通過{{content}}與js中data屬性中的content相對應。我們看看具體是怎麼更改的：

在頁面的onLoad方法中，呼叫app全域性物件的getUserInfo方法，並傳遞一個函式進去：

onLoad: function () {
    console.log('onLoad')
    var that = this
    //呼叫應用例項的方法獲取全域性資料
    app.getUserInfo(function(userInfo){
      //更新資料
      that.setData({
        userInfo:userInfo
      })
    })
  }

而在app的getUserInfo方法中：

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

這裡為什麼在登入收到使用者資料的時候使用setData方法設定而不是直接改變data屬性的值呢？因為框架–>註冊頁面中規定了只有通過setData才能改變this.data的值，並且頁面也會更新，直接改變data的值會造成資料的混亂。

總結

總的來說，微信小程式和web前端開發原理差不多。邏輯層由js控制，檢視層由wxml和wxss進行描述和渲染。獲取更詳細的框架資訊，請點選框架；獲取檢視元件,請點選元件；獲取微信提供的js介面，請點選 API

寫了一個多小時，有點小累，發現寫得也蠻長了，繼續挖坑，下一篇再依葫蘆畫瓢寫DEMO。