小程序框架解密

下載環境，我們只需要默認安裝即可，然后用手機微信掃描環境安裝成功之后彈出的二維碼，新建一個項目，（沒有AppID可以不填，只是有些功能會受限）就能進入到微信小程序開發的安裝環境。就是如圖所示。

小程序基本架構解密

點擊開發者工具左側導航的“編輯”，我們可以看到這個項目，已經初始化并包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例

app.json解析

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。

app.js解析

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.wxss解析

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 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;
}

創建頁面

小程序中所有的頁面都在Pages中，在新建項目的初始化代碼中，有兩個頁面，一個是index，表示首頁，一個是logs，表示日志頁，我們可以用過新建來創建頁面，但是一定要讓這個頁面的文件夾在Pages文件夾中，且這個頁面的文件也要含有.wxml (表示頁面結構的文件) .js(頁面的 腳本文件) .wxss(頁面的樣式表)。

例如，下圖新建了一個test頁面，架構如圖所示

解密框架

顯示我們創建的頁面（邏輯層）

剛才創建了一個text頁面，那么如何讓我們創建的頁面顯示在小程序中。（我們先簡單在text中寫點東西）
當我們新建了一個text文件時，首先需要在app.json文件的pages下配置頁面。注意，頁面的配置是有順序的，此案例中我們把text配置在了最前面，那么此時啟動小程序先看到的就是text頁面

小程序的模塊化（邏輯層）

文件作用域
在 JavaScript 文件中聲明的變量和函數只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數，不會互相影響。
通過全局函數 getApp()可以獲取全局的應用實例，如果需要全局的數據可以在 App()中設置
這里舉例子使用官方文檔中的例子

模塊化

我們可以將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。

需要注意的是：

exports 是 module.exports 的一個引用，因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發者采用 module.exports 來暴露模塊接口，除非你已經清晰知道這兩者的關系。
小程序目前不支持直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。

官方案例

數據綁定（視圖層）

內容
WXML 中的動態數據均來自對應 Page 的 data。
數據綁定使用 {{ }}（雙大括號）將變量包起來

<!--text.wxml-->
<view class="text">{{msg}}</view>

//text.js
Page({
    data:{
        msg:"通過數據綁定顯示在頁面上"
    }
})

在視圖中的運行結果

組件屬性

<!--text.wxml-->
<view id="item-{{id}}"> </view>

//text.js
Page({
  data: {
    id: 0
  }
})

屬性控制

<!--text.wxml-->
<view wx:if="{{condition}}"> </view>

//text.js
Page({
  data: {
    condition: true
  }
})

布爾類型

<!--text.wxml-->
<checkbox checked="{{false}}"> </checkbox>

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。

運算
可以在 {{}} 內進行簡單的運算，比如三目運算，和算術運算

三目運算

<!--text.wxml-->
<view hidden="