基礎的介紹

框架

小程式開發框架的目標是通過儘可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。

框架提供了自己的檢視層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在檢視層與邏輯層間提供了資料傳輸和事件系統，可以讓開發者可以方便的聚焦於資料與邏輯上。

響應的資料繫結

框架的核心是一個響應的資料繫結系統。

整個系統分為兩塊檢視層（View）和邏輯層（App Service）

框架可以讓資料與檢視非常簡單地保持同步。當做資料修改的時候，只需要在邏輯層修改資料，檢視層就會做相應的更新。

js

小程式開發框架的邏輯層由 JavaScript 編寫。

邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。

在 JavaScript 的基礎上，我們做了一些修改，以方便地開發小程式。

• 增加 App 和 Page 方法，進行程式和頁面的註冊。
• 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 例項和當前頁面棧。
• 提供豐富的 API，如微信使用者資料，掃一掃，支付等微信特有能力。
• 每個頁面有獨立的作用域，並提供模組化能力。
• 由於框架並非執行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。（js不能直接控制HTML裡的內容，只能改變繫結的資料，這是開始接觸時最不習慣的地方）
• 開發者寫的所有程式碼最終將會打包成一份 JavaScript
  ，並在小程式啟動的時候執行，直到小程式銷燬。類似 ServiceWorker，所以邏輯層也稱之為 App Service。

實際遇到的問題

1.資料動態更新

……

})

page或app中先宣告賦初值，然後根據需要在事件函式中呼叫

2.servlet分離

小程式沒有jsp的功能，需要把小程式能力以外的部分分離成servlet，語言任意

呼叫類似ajax

wx.request({
    url: 'http://localhost:8080/WebsiteMode/AdminLogin', //地址，可以用變數拼接
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded' // post方法專門設定
    },
    success: function (res) { //訪問成功的回撥函式
      console.log(".....success.....");
      
      var length1 = res.data.length; //返回的資料使用時必須加 .data
      
      //動態更新繫結的資料
      pagethis.setData({
        result:res.data,
        length: length1
      })
    },
    fail: function (res) {  //訪問失敗的回撥函式
      console.log(".....fail.....");
    },
    dataType: "json" //返回資料是json則必須寫
  })

3.HTML中的迴圈顯示

  <view class="flex-wrp" style="flex-direction:row;" wx:for="{{result}}">
    <view class="flex-item name">{{item.name}}</view>
    <view class="flex-item date">{{item.year}}-{{item.month+1}}-{{item.day}}</view>
    <view class="flex-item time">{{item.hour}}:{{item.minute}}:{{item.second}}</view>
    <view class="flex-item address">{{item.address}}</view>
  </view>

那麼class為flex-wrp的view會迴圈result陣列的長度那麼多次，若長度為0則不顯示

item類似foreach（i in arr）裡的 i ，可以不寫，預設為item

4.居中顯示

.flex-wrp {
  display: flex;
  align-items:stretch;
  justify-content: center;
}
.flex-item {
  display: flex;
  align-items:center;
  justify-content: center;
}

flex似乎不能被子元素繼承

第一個是水平居中，垂直高度同最高的，並且居中

第二個是普通的水平垂直居中