微信小程序文档小程序开发指南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属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


设置项目的属性有：

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| stretch

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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，我们可以搭建出任何效果的界面。

后面的是一些底层原理渲染之类的

以后深入一点再看吧