微信小程序文档小程序开发指南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，咱们能够搭建出任何效果的界面。

 

 

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

之后深刻一点再看吧