小程序框架解密

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

小程序基本架構(gòu)解密

點(diǎn)擊開發(fā)者工具左側(cè)導(dǎo)航的“編輯”，我們可以看到這個(gè)項(xiàng)目，已經(jīng)初始化并包含了一些簡單的代碼文件。最關(guān)鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個(gè)。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會(huì)讀取這些文件，并生成小程序?qū)嵗?/p>

app.json解析

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

app.js解析

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。

//app.js
App({
  onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    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{
      //調(diào)用登錄接口
      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 是整個(gè)小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

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

創(chuàng)建頁面

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

例如，下圖新建了一個(gè)test頁面，架構(gòu)如圖所示

解密框架

顯示我們創(chuàng)建的頁面（邏輯層）

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

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

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

模塊化

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

需要注意的是：

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

官方案例

數(shù)據(jù)綁定（視圖層）

內(nèi)容
WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng) Page 的 data。
數(shù)據(jù)綁定使用 {{ }}（雙大括號(hào)）將變量包起來

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

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

在視圖中的運(yùn)行結(jié)果

組件屬性

<!--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"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。

運(yùn)算
可以在 {{}} 內(nèi)進(jìn)行簡單的運(yùn)算，比如三目運(yùn)算，和算術(shù)運(yùn)算

三目運(yùn)算

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