学习微信小程序day04

学习微信小程序day04

Scroll Down

最早在html中布局使用的都是table,后来div盒子模型出现了,发现它用来做布局效果特别好,然后就一直沿用至今。但是在微信小程序wxml中使用flexbox盒子模型,它相对传统的盒子模型更加的灵活。

1. 容器和项目概念

  • 采用flex布局的元素,就是容器,在代码中使用container表示容器的类名,容器内的元素称为项目,在代码中使用item表示项目的类名
  • 在flex容器内,默认主轴是从左到右的,交叉轴是垂直于主轴的它的方向是相对于主轴的。他们都可以通过属性来更改默认值。
  • 设置容器和项目都有各自的属性 image.png image.png

2. 容器属性

  • flex-direction它有四个值控制着容器内的项目排列方式,row代表着横向并且从左到右的排列,row-reverse代表的横向从右到左的排列,column代表着纵向从上到下的排列,column-reverse代表着纵向从下到上的排列 image.png image.png image.png image.png image.png image.png image.png image.png
  • flex-wrap属性,设置项目是否允许多行排列,并且多行排列时换行的方向。它有三个值。
    • 默认值是nowrap,代表着不换行,如果项目过多则会溢出当前容器。
    • -wrap代表着当项目在容器中一行展示不下的时候会另起一行。
    • wrap-reverse是换行的方向和wrap相反。
  • justify-content属性,设置项目在主轴上的对齐方式,并且分配项目之间及其周围的多余空间。
    • 默认值是flex-start代表着项目对齐主轴的起点,并且项目之间不留间隙。
    • center代表着项目居中排列,第一个项目距离起点和最后一个项目距离主轴终点的距离相同。
    • flex-end它与flex-start正好相反,代表着项目对齐主轴的终点排列并且项目之间不留间隙。
    • space-between代表着项目之间存在间隙并且间隙相等,而且第一个项目和最后一个项目都是位于主轴的起点和终点。
    • space-around它于space-between相似,只是第一个项目位于主轴的起点和最后一个项目位于主轴终点之间的距离为中间项目之间的距离的一半。
    • space-evenly它代表着第一个项目和最后一个项目位于主轴的起点和终点的距离和中间项目的距离相等。
  • align-items属性,设置项目在行中对齐的方式。
    • 默认是stretch项目拉伸至填满行高。
    • flex-start项目的顶部与行起点对齐。
    • center项目居中对齐。
    • flex-end它与flex-start相反与行终点对齐。
    • baseline项目的第一行文字的基线对齐 image.png image.png
  • align-content属性,项目多行排列的时候设置行在交叉轴上的对齐方式,以及分配行之间以及多余的空间(在设置容器属性的时候如果设置内边距有些效果将会不会展示出来)
    • stretch(默认值):当未设置项目尺寸,将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸,项目尺寸不变,项目行拉伸至填满交叉轴。
    • flex-start:首行在交叉轴起点开始排列,行间不留间距
    • center:行在交叉轴中点排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点距离相等。
    • flex-end:尾行在交叉轴终点开始排列,行间不留间距。
    • space-between:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为0。
    • space-around:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。
    • space-evenly:行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

3. 项目属性

  • order属性,默认值为0,值越大项目排列越靠后 image.png image.png
  • flex-shrink属性,默认值是1,值需要为正数。如果在容器属性中设置项目不换行的话,当项目在主轴方向发生溢出的时候,通过设置项目收缩因子也就是当前值来使用容器。
  • flex-basis属性,没完全理解这个属性是做什么的,大致是定义项目的大小,可以使用width和height来代替。
  • 还有其他的一些属性,个人感觉用到比较少就不做总结

4. 界面常见的一些交互反馈,当用户在界面执行了某些操作的时候界面应该反馈给用户一些有用的信息告诉用户执行的操作已经接收到

  • 使用view和button组件提供的hover-class属性,通过改变触摸之后组件的样式来给用户进行反馈,可以看到当点击组件对应区域的时候,组件背景颜色会变成在wxss中设置的颜色 image.png image.png
  • 如果是一些耗时较长的操作,例如上传或者下载,这个时候就需要给用户响应当前操作正在载入中 image.png image.png image.png
  • 为了用户的使用体验,当上传成功之后也应该反馈信息给用户告诉他当前操作已经成功。
    • 这里当我准备完成这个小功能的时候,出现了两个小问题。在使用wx.navigateTo完成页面跳转的时候发现页面不能跳转,因为我将url写成了已经称为tabbar的页面,前面在页面层级的时候有说到过,定义为tabbar的页面不能使用wx.navigateTo完成跳转。
    • 第二问题是当我准备在跳转成功的页面的js中onLoad函数中调用wx.showToast方法提示已经跳转成功的时候,发现这个方法不能被调用。在前边有说过微信小程序的执行顺序,首先是app.js,然后加载在app.js中引用的js。最后按照app.json中的pages字段中定义的顺序执行对应的js文件。所以在我们跳转页面之后在跳转的页面对应js中调用wx.showToast是无效的。 image.png image.png
  • 模态对话框,上边这个弹出窗口的形式提示用户并不适用于错误提示,因为错误提示需要用户看到错误信息,并且需要用户点击确定才能关闭当前对话框。 image.png
  • 界面滚动,当一个页面的数据非常多的时候一页根本展示不玩就需要通过页面滚动来展示其他的数据,大部分的微信小程序或者app都支持下拉刷新动作。微信小程序则需要在app.json中将enablePullDownRefresh的值设为true才能开启下拉刷新功能。
  • 上拉触底,同样用来加载数据,也需要在app.json配置,通过设置值,当界面的下方距离页面底部距离小于100像素时触发回调 image.png
  • 在实际的使用场景中有时候需要单独对一块区域进行页面滑动,这可以使用其他的组件来完成

5. 通过wx.request请求服务器数据

  • 应微信小程序的规定,服务器必须使用https协议,如果请求的服务器没有配置SSL证书的那么在项目上线的时候添加服务器域名的时候将不会通过。
  • wx.request类似于ajax,他也有一些参数,下面对它的一些参数进行详细了解
    • url,类型为string且必须要有,请求数据的地址
    • data,类型为Object或String非必须,请求携带的参数
    • header,类型为Object非必须,默认为header['content-type']='application/json',定义数据格式为json
    • method,类型为String非必须,常用值有POST,GET,PUT,DELETE定义不同的请求方法
    • dataType,类型为String非必须,默认值为json,定义请求返回数据类型
    • success,类型为function非必须,请求成功时接收请求返回的参数,在方法内可以对参数进行处理
    • fail,类型为function,请求失败时调用的回调函数
    • complete,类型为function,不论请求是否成功都需要调用的回调函数
  • 在app.json中设置请求超时时间,当请求服务器不通,不能一直请求下去,设置请求超时时间,当请求时间超过此事件则认为请求失败 image.png
  • 为了验证wx.request请求数据,我用Java写了一个springboot+springdata jpa的后端项目,提供了一个查询所有用户的借口和一个根据id查询用户的接口。 image.png image.png
  • 微信小程序端发起请求 image.png image.png