微信小程序文檔小程序開發指南4-9章

4.2 基本的佈局方法——Flex佈局

在小程序開發中，咱們須要考慮各類尺寸終端設備上的適配。在傳統網頁開發，咱們用的是盒模型，經過display:inline | block | inline-block、 position、float來實現佈局，缺少靈活性且有些適配效果難以實現。

這種狀況下，咱們更建議用flex佈局

在開始介紹flex以前，爲了表述方便，咱們約定如下術語：採用flex佈局的元素，簡稱爲「容器」，在代碼示例中以container表示容器的類名。容器內的元素簡稱爲「項目」，在代碼示例中以item表示項目的類名

 

 在不固定高度信息的例子中，咱們只須要在容器中設置如下兩個屬性便可實現內容不肯定下的垂直居中。

.container{

  display: flex;

  flex-direction: column;

  justify-content: center;  //對齊方式

}


記不住就看阮一峯felx：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex不單是一個屬性，它包含了一套新的屬性集。屬性集包括用於設置容器，和用於設置項目兩部分。

設置容器的屬性有：

display:flex;

flex-direction:row（默認值） | row-reverse | column |column-reverse

flex-wrap:nowrap（默認值） | wrap | wrap-reverse

justify-content:flex-start（默認值） | flex-end | center |space-between | space-around | space-evenly

align-items:stretch（默認值） | center  | flex-end | baseline | flex-start

align-content:stretch（默認值） | flex-start | center |flex-end | space-between | space-around | space-evenly


align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。


設置項目的屬性有：
align-content

order:0（默認值） | <integer>     數值越小，排列越靠前，默認爲0。
　　
flex-shrink:1（默認值） | <number>
若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

flex-grow:0（默認值） | <number>
若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-basis:auto（默認值） | <length>

flex:none | auto | @flex-grow @flex-shrink @flex-basis
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

align-self:auto（默認值） | flex-start | flex-end |center | baseline| stretchflex-shrinkflex-shrinkflex-growflex-growflexflex-growflex-shrinkflex-basis0 1 auto

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。


align-selfalign-itemsautoalign-itemsstretch

justify-content 屬性

設置項目在主軸方向上對齊方式，以及分配項目之間及其周圍多餘的空間。

align-items 屬性

設置項目在行中的對齊方式。

align-content 屬性

多行排列時，設置行在交叉軸方向上的對齊方式，以及分配行之間及其周圍多餘的空間。

 

 

4.3 界面常見的交互反饋

4.3.1 觸摸反饋

當咱們手指觸摸了button文字所在的cell區域時，對應的區域底色變成淺灰色，這樣用戶就能夠知道小程序是有及時響應他的此次觸摸操做，用戶就不會很迷惑。

小程序的view容器組件和button組件提供了hover-class屬性，觸摸時會往該組件加上對應的class改變組件的樣式。

觸摸區域底色變成灰色響應用戶的觸摸操做

使用button組件的loading屬性 在按鈕的文字前邊出現一個Loading

4.3.2 Toast和模態對話框

在完成某個操做成功以後，咱們但願告訴用戶此次操做成功而且不打斷用戶接下來的操做。彈出式提示Toast就是用在這樣的場景上，Toast提示默認1.5秒後自動消失， 

小程序提供了顯示隱藏Toast的接口

Page({
  onLoad: function() {
    wx.showToast({ // 顯示Toast
      title: '已發送',
      icon: 'success',
      duration: 1500
    })
    // wx.hideToast() // 隱藏Toast
  }
})

特別要注意，咱們不該該把Toast用於錯誤提示，由於錯誤提示須要明確告知用戶具體緣由，

4.3.3 界面滾動

頁面下拉刷新

頁面上拉觸底

4.4 發起HTTPS網絡通訊

4.4.3 請求參數

// 經過url參數傳遞數據

url:'https://test.com/getinfo?id=1&version=1.0.0',

// 經過data參數傳遞數據

data: { id:1, version:'1.0.0' },

POST請求：

wx.request({
  url: 'https://test.com/postdata',
  method: 'POST',
  header: { 'content-type': 'application/json'},
  data: {
    a: {
      b: [1, 2, 3],
      c: { d: "test" }
    }
  },

4.6 本地數據緩存

小程序提供了讀寫本地數據緩存的接口，經過wx.getStorage/wx.getStorageSync讀取本地緩存，經過wx.setStorage/wx.setStorageSync寫數據到緩存，其中Sync後綴的接口表示是同步接口[9]，執行完畢以後會立馬返回，示例代碼和參數說明以下所示

wx.getStorage({
  key: 'key1',
  success: function(res) {
    // 異步接口在success回調才能拿到返回值
    var value1 = res.data
  },
  fail: function() {
    console.log('讀取key1發生錯誤')
  }
})
try{
  // 同步接口當即返回值
  var value2 = wx.getStorageSync('key2')
}catch (e) {
  console.log('讀取key2發生錯誤')
}

4.6.3 利用本地緩存提早渲染界面

tapScan: function() {
    // 調用wx.login獲取微信登陸憑證
    wx.scanCode({
      success: function(res) {
        var num = res.result // 獲取到的num就是餐桌的編號
      }
    })
  }

4.8 本章小結

在本章咱們學習了小程序開發中常常遇到的場景：利用Flex佈局來進行小程序界面佈局、常見的界面交互反饋、如何進行網絡通訊讓小程序和開發者服務器進行交互等，咱們就這些場景詳細介紹了相關的API的使用技巧和注意事項，咱們也把遇到問題時的思考方式闡述給讀者，讀者能夠細細去體會，經過實踐多動手去理解其中的方法論，更多的組件和API使用參數和示例能夠參考官方的文檔[12]。

閱讀完本章，咱們已經具有獨立完成一個小程序的能力，爲了讓微信用戶能夠真正使用到你的小程序，學會如何發佈小程序是必需要了解的知識，咱們在下一個章節中來闡述如何發佈一個小程序以及發佈先後須要作一些什麼事情。

 

6.2.2 內置組件

咱們基於Exparser框架，內置了一套組件，提供了視圖容器類、表單類、導航類、媒體類、開放類等幾十種組件。有了這麼豐富的組件，再配合WXSS，咱們能夠搭建出任何效果的界面。

 

 

後面的是一些底層原理渲染之類的

之後深刻一點再看吧