小程序的目錄結構/配置介紹/視圖層wxml數據綁定/雙線程模型/小程序的啓動流程

安裝好微信小程序開發軟件，建立項目

小程序文件結構和傳統web對比

結構	傳統web	微信小程序
結構	HTML	WXML
樣式	CSS	WXSS
邏輯	Javascript	Javascript
配置	無	JSON

經過以上比對得出，傳統web是三層結構。而微信小程序是四層結構，多了一層。

小程序基本目錄

 配置介紹

小程序包括兩種配置：一種是全局配置app.json和頁面本身的json文件

注意：配置文件中不能出現註釋

全局配置app.json

app.json是小程序的全局配置文件，包括小程序的全部頁面路徑、界面表現、網絡超時、頁面樣式等等。

字段的含義：

1.pages字段——用於描述當前小程序全部頁面路徑

當你添加了一個新的路徑，會自動生成一個文件夾。數組第一項表明小程序的初始頁面（首頁）

2.window字段——用於設置小程序的狀態欄、導航條、標題、背景顏色等等

3.tabBar字段——客戶端底部或頂部有tab欄能夠切換頁面，能夠經過tabBar配置顯示切換的頁面

注意：list裏面最少寫2個，最多5個

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

頁面配置json

每個小程序的頁面也可使用.json文件來對本頁面的窗口進行配置。頁面中配置項在當前頁面會覆蓋app.json的window中相同的配置項。

頁面配置中只能設置app.json中window對應的配置項，以決定本頁面的窗口表現，因此無需寫window這個屬性。直接寫屬性

 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

視圖層wxml數據綁定

數據綁定

1.普通寫法

test.js   (須要如今test.js data中設置一個變量傳參)

Page({
    data:{
    message:''hello
}
})

test.wxml   (獲取數值)注意須要使用{{}}

<text>pages/test/test.wxml</text>
<view>{{message}}</view>

 2.組件屬性   （在變量前加item）

test.js

Page({
    data:{
    id:0,
}
})

test.wxml

<view id="item-{{id}}"></view>

3.bool類型

不要直接寫checked="false",其計算結果是一個字符串,必須使用{{}}

<view checked="{{false}}"></view>

運算

1.三元運算

test.js

Page({
    data:{
    flag:true, 
}
})

test.wxml

<view hidden="{{flag ? true:false}}">Hidden</view>   #獲取flag的值，flag爲true就隱藏

2.邏輯判斷  wx:if 

Page({
    data:{
    b:5, 
}
})

<view wx:if="{{b>3}}">hello</view>    #判斷b>3就顯示hello

3.算數運算

<view>{{a+b}}+{{c}}+b</view>

4.字符串運算

<view>{{'hello'+name}} </view>

Page({
    data:{
    name:'jason', } })

列表渲染

1.wx:for   相似於for循環

項的變量名默認爲item     wx:for-item能夠指定數組當前元素的變量名

下標變量名默認爲index   wx:for-index能夠指定數組當前下標的變量名

<view wx:for="{{list}}" wx:for-index="key" wx:for-item="value" wx:key="index">   #wx:key提升使用效率
<!-- {{index}}:{{item.name}} --> 
{{key}}:{{value.name}}   #把index取別名key,把item取別名value </view>

Page({
    data:{
    list:[{name:"egon",like:"騷"},{name:"jason",like:"讀書"}]
}
})

條件渲染

wx:if

在框架中，使用wx:if="{{condition}}"來判斷是否須要渲染該代碼塊

<view wx:if="{{condition}}"> True </view>

hidden

<view hidden="{{condition}}"> True </view>

相似wx:if

頻繁切換 用hidden

不常使用 用wx:if

雙線程模型

 上圖爲官方文檔給出的雙線程模型

小程序的宿主環境

微信客戶端微信客戶端提供雙線程去執行wxml,wxss，js文件。

雙線程模型

1.上述的渲染層上面運行這wxml文件已經wxss文件，渲染層使用是的webview線程進行渲染（一個程序會有多個頁面，也就會有多個view線程進行運做）

2.js文件是運行在邏輯層，邏輯層的js是經過jscore進行運行的。

經過雙線程界面的渲染過程是怎樣的？

wxml與DOM樹

其實咱們wxml文件與咱們html中的DOM樹是同樣的，這樣咱們就能夠有js來模擬一個虛擬的DOM樹。

若是咱們的wxml文件中若是有變量：要與js邏輯層共同渲染頁面成爲一個真正的DOM樹。

 

總結：就是將渲染層的wxml文件轉成虛擬化DOM,而後結合js中真實數據造成真實的DOM樹，而後再渲染出來。

界面渲染的總體流程

1在渲染層將wxml文件與wxss文件轉化成js對象也就是虛擬DOM

2 在邏輯成將虛擬的DOM對象配合生成，真實的DOM樹，在交給渲染層渲染

3 當數據變化是，邏輯層提供更新數據，js對象發生改變，用diff算法進行比較

4 將更新的內容，反饋到真實的DOM樹中，更新頁面

小程序的啓動流程

在app生命週期中執行了什麼？    

注意點：

1.從後臺進入前臺時會觸發onShow()

2.從前臺進入後臺會觸發onHide()

執行App()函數也就是註冊一個App

​ 1 在註冊app的時候，能夠判斷小程序的進入場景

​ 2 咱們能夠在執行經過生命週期函數，作一些數據請求

​ 3 能夠在app中設置一個全局對象，讓全部頁面都能使用

在每一個頁面js的什麼週期中執行了什麼？

Page({

  /**
   * 頁面的初始數據
   */
  data: {
      name:"sb",
      like:"票",
      num:0,
      c:false,
      a:1,
      b:2,
      list:[{name:"egon",like:"騷"},{name:"jason",like:"淫十"}]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    console.log("onShow")
  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
    console.log("onHide")
  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
    console.log("onUnload")
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh")
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    console.log("onReachBottom")
  }

1 在生命週期函數中發送網絡請求，從服務端獲取數據

2 初始化一些數據，在data裏面，以方便wxml引用

3 監聽wxml的事件，綁定對應的事件函數

4 還有頁面滾動，上拉，下拉等

頁面的生命週期