微信小程序第一章到第三章总结

第一章

认识微信小程序

简介: 2011年1月推出2017年1月上线，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用

优势：无需安装、触手可及、用完即走、无需卸载场景 简单的业务逻辑使用频率低

使用场景：

微信小程序作为一种轻量级的应用服务形式，在线下的使用场景中能发挥大的作用。

商城小程序：微信使用人数多，流量大，方便和快速支付，非常适合在上面开发商城。网上订餐：适合网上订餐，方便支付。企业形象展示：利用展示附近的小程序功能，介绍附近的企业。医疗挂号：方便挂号和消息通知，进度查看。各种共享单车类似的共享经济app.在线考试 在线下单 小程序 小游戏 跳一跳 麻将 斗地主等。

微信小程序开发流程

第一步：在微信公众号平台上注册小程序账号

第二步：下载开发者工具进行编码

第三步：通过开发者工具提交代码，通过审核后便可发布

微信开发者功能介绍

软件图标

​

微信小程序功能介绍

1.编辑器：提供了一个可视化的编辑器，可以用来编写小程序的代码。编辑器支持语法高亮、代码提示、代码格式化等常见功能。

2.调试器：提供了一个调试器，可以用来调试小程序的代码。调试器支持断点调试、观察变量值、执行代码片段等常见功能。

3.预览器：提供了一个预览器，可以用来预览小程序的运行效果。预览器支持移动端和桌面端两种模式，并支持实时预览。

4.小程序模拟器：提供了一个小程序模拟器，可以用来模拟小程序的运行环境。小程序模拟器支持模拟手机端和电脑端两种环境，并支持模拟多种常见场。

5 在项目中有新建项目 可以用来创建新的项目 还学了一个导入项目 可以在文件中选择文件进行导入

我的第一个微信小程序

{
  "usingComponents": {
  }
}

// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  methods: {
    // 事件处理函数
    bindViewTap() {
      wx.navigateTo({
        url: '../logs/logs',
      })
    },
    onChooseAvatar(e: any) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    onInputChange(e: any) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    getUserProfile() {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
  },
})

 
 
 
 
 
<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        </button>
        <view class="nickname-wrapper">
          <text class="nickname-label">昵称</text>
          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
        </view>
      </block>
      <block wx:elif="{{!hasUserInfo}}">
        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
      </block>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
  </view>
</scroll-view>

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}
 
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.usermotto {
  margin-top: 200px;
}
 
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}
 
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
 
.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}
 
.nickname-label {
  width: 105px;
}
 
.nickname-input {
  flex: 1;
}

 效果​

 本章小结

本章首先介绍了微信小程序，讲解了微信小程序的特征及微信小程序应用场景的特点然后重点讲解了微信小程序项目的开发流程，最后介绍了微信小程序开发工具的使用。通过对本章的学习，读者能够从概念上对小程序有一个基本认识，为学习后续章节打下良好的基础。
思考练习题

第二章

 主体文件（utils)

介绍

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责程序的整体配置，它们的名称是固定的。

 组成文件

■appjs 小程序逻辑文件，主要用来注册小程序全局实例。在编译时

app.js文件和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少

app.wxss 小程序主样式表文件，类似HTML的:css文件。在主样式表文件中设的样式在其他页面文件中同样有效。该文件在项目中不是必需的。用的比较少

页面文件（pages)

介绍

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会app.json 设置的路径找到相对应的资源进行数据绑定。

组成文件 

.js文件页面逻辑文件，在该文件中编写 JavaScript 代码控制页面的逻辑。孕在每个小程序的页面中不可缺少。

.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML中的.html 文件。该文件在页面中不可缺少。

.wxss 文件 页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使app.wxss 中指定的样式规则。该文件在页面中不可缺少。

.json 文件 页面配置文件。该文件在页面中不可缺少。

微信小程序的框架组成

介绍

微信团队为小程序的开发提供了 MINA框架。MINA框架通过微信客户端提供文件系统网络通信、任务管理数据安全等基础功能，对上层提供了一整套JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

框架的组成

视图层(View)：

视图层使用WXML（类似于HTML）和WXSS（类似于CSS）来构建页面的结构和样式，支持响应式布局和组件化开发。

逻辑层(App Service)：

逻辑层使用JavaScript来控制页面的逻辑和交互，可以调用微信开放的API和系统能力，实现用户界面的动态更新和事件处理。

数据层(Data Binding)：

数据层使用WXS（类似于JavaScript）来实现数据的绑定和操作，可以实现页面数据和逻辑的解耦和复用。

数据层的三个作用

1.页面临时数据或缓存
在Page()中，使用 setData 函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。
setData()兩数的参数接收一个对象，以(key,value)的形式表示将 key 在 this. data 中对应的值改变成 value。
2.文件存储(本地存储)
使用数据 API接口，如下:
wx. getStorage获取本地数据缓存
wx.setStorage设置本地数据缓存。
wx.clearStorage 清理本地数据缓存
3.网络存储与调用
上传或下载文件 API接口，如下:
釂wx.request 发起网络请求
wx.uploadFile 上传文件。
wx.downloadFile下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗口打开页面。

配置文件 

 全局配置文件

介绍

小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件*文件(page)的路径、设置窗口(window)表现、设定网络请求AP的超时(netwodkTimeout)以及配置多个切换页(tabBar)等。表2-2列出了各全局配置描述

 页面文件(pages)

pages配置项接受一个数组，用来指定小程序由哪些页面组成、数组的每一开幕意7代表对应页面的“路径”+“文件名”。pages 配置项是必填项。串设置pages配置项时，应注意以下3点
(1)数组的第一项用于设定小程序的初始页面，
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.j、j.wss文件进行整合数据绑定，
例如，app.json 文件的配置如下

设置窗口(window)

window配置项负责小程序状态栏、导航跳、标题、窗口背景色等系列样式。

设定网络请求AP的超时(netwodkTimeout)

小程序中各种网络请求API的超时时间值只能通过netwodkTimeout配置项进行统一设置不能再API单独设置

配置多个切换页(tabBar)

当需要在程序顶部或者底部设置菜单栏时可以通过配置tabBar配置项来实现

其中 list接受数组值，数组中的每一项也都是一个对象。对象的数据说明

 debug 配置项 

 debug 配置项用于开启开发者工具的调试模式，默认为!。开启后，页面的注册数据更新、事件触发等调试信息将以 而 的形式输出到 consote(控制台)面板上

逻辑层文件 

页面配置文件

页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置 windo内容。在配置页面配置文件后，页面中的window 配置值将覆盖全局配置文件(ap的配置值。）

项目逻辑文件

 项目逻辑文件 app.js中可以通过 App()函数注册小程序生命周期函数、全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过 getApp()获取App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命户自定义属性和方法，其参数如表2-7所示。

 

首先我们在app.js中输入代码 

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
   console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
  },
  globalData: {
    userInfo: null
  }
})

新建一个images文件放入两张图片

在new.js文件中输入代码： 

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>

 在logs.js文件中输入代码：

// logs.js
const util = require('../../utils/util.js')
 
Page({
  data: {
    logs: []
  },
  onLoad() {
   console.log("logs onLoad ......"),
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  },
// 生命周期函数--监听页面加载 
 
      //生周期函数--监听页面初次渲染完成 
      onReady: function (){
        console.log("logs onReady......")},
      // 生命周期函数--监听页面显示 
      onShow: function () {
        console.log("logs onShow ......")},
      //*生命周期函数--监听页面隐藏 
      onHide: function () {
        console.log("logs onHide ......")
      },
      //生命周期函数--监听页面卸载
       onUnload: function (){
        console.log("logs onUnload......")
       }
})

 在app.json中写入代码：

{
  "pages": [
    "pages/new/new",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/logs1.jpg",
      "selectedIconPath": "images/logs1.jpg"
    },{
      "pagePath": "pages/new/new",
      "text": "new页",
      "iconPath": "images/new1.jpg",
      "selectedIconPath": "images/new1.jpg"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

 运行效果

数据绑定

１.简单绑定

简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、2组件属性、控制属性等的输出。

2.运算绑定

 做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等), 这些运算均应符合JavaScript 运算规则

案例 

在new.wxml中输入代码

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算数运算; {{app+aum}}</view>
<view>逻辑运算; {{app==40}}</view>
<view>三元运算：{{age==1 ?3:4}}</view> 

 在new.js文件中输入代码

Page({
  //页面的初始数据
  data:{
  name:'ljk',//字符串
  age:30,//数字
  birthday:[{year:1999},{month:12},{ date:16 }],//数组object:{hobby:'computer'}//对象
  }
})

 运行效果

条件数据绑定 

在new.js中添加代码

  students:[
    {nickname:"ta",height:180,weight:160},
    {nickname:"ti",height:190,weight:120}
  ]
  }
  })

在new.wxml中添加代码 

<view wx:else>3</view> 
<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view> 
</template>
<template is="stu" data="{{students}}"></template>

运行结果

 页面样式文件 

尺寸单位

由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现,WXSS在此基础上增加了尺寸单位rps (respnesivepixel)。 WXSS规定屏幕宽度为750rps, 在系统数据绑定过程中rpx会按比例转化为px。

样式导入

为了便于管理WXSS文件, 我们可以将样式存放于不同的文件中。 如果需要在某个文件中引用另一个样式文件, 使用＠import语句导入即可。

选择器

目前,WXSS 仅支持CSS中常用的选择器, 如.class、#id、element、beforeｅ、aftert等。

WXSS常用属性

本章小结

本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。

 第三章

盒子模型 
介绍：小程序页面中的元素布局模型，类似于网页中的盒子模型。它由四个基本属性组成：内容(content)、填充(padding)、边框(border)和边距(margin)。

内容(content)：指的是元素中实际的内容，比如文字、图片等。内容的宽度和高度可以通过设置元素的width和height属性来确定。

填充(padding)：指的是内容与边框之间的空白区域。填充可以通过设置元素的padding属性来确定。padding属性可以同时设置上、右、下、左四个方向的填充值，也可以分别设置每个方向的填充值。

边框(border)：指的是内容周围的边界。边框可以通过设置元素的border属性来确定。border属性可以同时设置边框的宽度、样式和颜色。

边距(margin)：指的是元素与其他元素之间的空白区域。边距可以通过设置元素的margin属性来确定。margin属性可以同时设置上、右、下、左四个方向的边距值，也可以分别设置每个方向的边距值。

 块级元素与行内元素

行内元素

介绍

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的 display 属性设置为 imline 后，该元素即被设置为行内元素。

行内元素的特点

(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定,

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素

(3)同一块内，行内元素和其他行内元素显示在同一行。

块级元素 

介绍

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新级元素时，会自动换行，块级元素一般作为盒子出现。

块级元素的特点

(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素

 浮动

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过foat属性来定义浮动，

其基本格式如下

float:none lleft lright;

其中，none--默认值，表示元素不浮动;
lef--元素向左浮动;
right--元素向右浮动。

 清除浮动

由于浮动元素不再古用原文档流的位置，因此它会对页面中其他元素的。通过清除浮动来解决。在Css 中，cear 属性用于清除浮动元素对其他元素的影响，其基本格式如下,

clear:left lright lboth |none

清除浮动方式

其中，lef--清除左边浮动的影响，也就是不允许左侧有浮动元素night--清除右边浮动的影响，也就是不允许右侧有浮动元素:
both--同时清除左右两侧浮动的影响:
none--不清除浮动

​
<view>box1,box2,box3 元素没有浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1 左浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="float: left; border: 1px solid #0f0;">box1</view>
<view style=" border: 1px solid #0f0;">box2</view>
<view style=" border: 1px solid #0f0;">box3</view>
</view>
<view>box1,box2 左浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="float: left; border: 1px solid #0f0;">box1</view>
<view style="float: left; border: 1px solid #0f0;">box2</view>
<view style=" border: 1px solid #0f0;">box3</view>
</view>
<view>box1,box2,box3 左浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="float: left; border: 1px solid #0f0;">box1</view>
<view style="float: left; border: 1px solid #0f0;">box2</view>
<view style="float: left; border: 1px solid #0f0;">box3</view>
</view>

​​
<view>box1,box2左浮动,box3 清除左浮动</view>
<view style="border: 1px solid #f00; padding: 5px;">
<view style="float: left; border: 1px solid #0f0;">box1</view>
<view style="float: left; border: 1px solid #0f0;">box2</view>
<view style="clear: left; border: 1px solid #0f0;">box3</view>
</view>
​
<view>box1,box2,box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00; padding: 5px;" class="clear-float">
<view style="float: left; border: 1px solid #0f0;">box1</view>
<view style="float: left; border: 1px solid #0f0;">box2</view>
<view style="float: left; border: 1px solid #0f0;">box3</view>
</view>

​
​

 元素定位

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过positon属性可以实现对页面元素的精确定位。基本格式如下:

position:staticlrelative labsolute lfixed

定位方法

其中，static--默认值，该元素按照标准流进行布局:
relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fixed--固定定位，相对于浏览器窗口进行定位。

示例代码如下

定位方法

其中，static--默认值，该元素按照标准流进行布局:
relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fixed--固定定位，相对于浏览器窗口进行定位。

对 box1、box2、box3 进行元素静态定位，示例代码如下

<view style="border:1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box3</view>

效果
 

 对 box1、box2、box3 进行元素相对定位，示例代码如下

<view style="border:1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box3</view>

效果

 对 box1、box2、box3 进行元素绝对定位，示例代码如下

<view style="border:1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box3</view>-->

效果

 对 box1、box2、box3 进行元素固定定位，示例代码如下

<view style="border:1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>

效果

对 box2 box1 box3元素相对定位 将box2进行绝对定位 ，示例代码如下

<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box3</view>

 效果

对 box2 box1 box3元素相对定位 将box2进行固定定位 ，示例代码如下

<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border:1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>

效果 

 

flex布局

 flex布局

介绍

flex 布局是万维网联盟(WoeldWideWebConsortium,W3C) 在２００９ 年提出的一种新布局方案, 该布局可以简单快速地完成各种可以伸缩的设计, 以便很好地支持响应式布局。flex 是flexiblebox 的缩写, 意为弹性盒子模型, 可以简便、完整、响应式地实现各种页面布局。

布局 

flex 布局主要由容器和项目组成, 采用flex 布局的元素称为flex容器(flexcontainer),flex 布局的所有直接子元素自动成为容器的成员, 称为flex项目(flexitem)。

容器默认存在两根轴: 水平的主轴和垂直的交叉轴。 主轴的开始位置(与边框的交叉点) 叫做mainstart, 结束位置叫做mained; 交叉轴的开始位置叫做crosstart, 结束位置叫做crossend。 项目默认沿主轴排列。 单个项目占据的主轴空间叫做mainsize, 占据的交叉轴空间叫做crossize。 flex 布局模型如图所示。

设置display 属性可以将一个元素指定为flex布局, 设置flex-direction属性可以指定主轴方向。 主轴既可以是水平方向, 也可以是垂直方向。

容器属性

（1）display

display用来指定元素是否为flex 布局, 语法格式为:

.box{display:flex|inline-flex;}

 flex———块级flex布局, 该元素变为弹性盒子;

inline-flex———行内flex 布局, 行内容器符合行内元素的特征, 同时在容器内又符合flex 布局规范。 

设置了flex布局之后, 子元素的float、clear 和vertical-align属性将失效。

(2)flex-direction

用于设置主轴的方向, 即项目排列的方向, 语法格式为:

.box{flex-direction:row|row-reverse|column|column-reverse;}

row———主轴为水平方向, 起点在左端, 当元素设置为 flex布局时, 主轴默认为row;

row-reverse———主轴为水平方向, 起点在右端; 

column———主轴为垂直方向, 起点在顶端;

column-reverse———主轴为垂直方向, 起点在底端

(3)flex-wrap

用来指定项目在一根轴线的排列位置不够时，项目是否换行，其语法格式为：

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

 其中，nowrap
wrap--换行，第一行在上方;
-换行，第一行在下方。wrap -reverse
当设置换行时，还需要设置 align-item属性来配合自动换行，但aign-icm
“ stretch ”
 

(4) flex-flow

flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为rownowrap。 语法格式如下:

.box{flex-flow:<flex-direction>||<flex-wrap>;}

 (5)justify-content

justify-content 用于定义项目在主轴上的对齐方式。 语法格式如下:

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

justify-content———与主轴方向有关, 默认主轴水平对齐, 方向从左到右;

flex-start———左对齐, 默认值;

flex-end———右对齐; 

center———居中;

space-between———两端对齐, 项目之间的间隔都相等;

space-around———每个项目两侧的间隔相等。

如图所示为justify-content不同值的显示效果：

 

(6)align-items

align-items用于指定项目在交叉轴上的对齐方式, 语法格式如下:

.box{align-items:flex-start|flex-end|center|baseline|stretch;}
align-items———与交叉轴方向有关, 默认交叉由上到下;

flex-start———交叉轴起点对齐;

flex-end———交叉轴终点对齐;

center———交叉轴中线对齐;

baseline———项目根据它们第一行文字的基线对齐;

stretch———如果项目未设置高度或设置为auto, 项目将在交叉轴方向拉伸填充容器, 此为默认值。 

示例

代码如下

在wxml上输入代码

<view class="cont">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>

 在wxss上输入代码

.clear-float::after {display:black;clear:both;height:0;content:""}
.cont{
  display: flex;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: flex-end;

}
.item4{
  height: 120px;
}

效果图

 

 如图所示为不同对齐方式的显示效果：

(7)align-content

align-content 用来定义项目有多根轴线(出现换行后) 在交叉轴上的对齐方式, 如果只有一根轴线, 该属性不起作用。 语法格式如下:

.box{align-content;flex-start|flex-end|center|space-between|space-around|stretch}

apace-between——与交叉轴两端对齐, 轴线之间的间隔平均分布;

space-around——每根轴线两侧的间隔都相等, 轴线之间的间隔比轴线与边框间隔大一倍。 其余各属性值的含义与align-items属性的含义相同。

 如图所示为align-content 不同值的显示效果:

 

 项目属性

容器内的项目支持六个属性，如图所示

（1）order

order属性定义项目的排列顺序, 数值越小, 排列越靠前, 默认值为０。 语法格式如下:

​
.item{order:<number>;}

​

（2）flex-grow 

 定义项目的放大比例, 默认值为０, 即不放大。 语法格式如下:

.item{flex-grow:<number>;}

（3）flex-shink

  用来定义项目的缩小比例, 默认值为１, 如果空间不足, 该项目将被缩小。语法格式如下:

.item{flex-shink:<number>;}

（4）flex-basis

属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为auto (即项目的本来大小)。 语法格式如下:

.item{flex-basis:<numner>|auto;}

 (5)flex

属性是flex-grow、flex-shrink 和flex-basis 的简写, 其默认值分别为０、１、auto。语法格式如下:

.item{<flex-grow>|<flex-shrink>|<flex-basis>;}

(6)align-self

属性用来指定单独的伸缩项目在交叉轴上的对齐方式。 该属性会重写默认的对齐方式。 语法格式如下:

.item{aligin-self:auto|flex-start|flex-end|center|baseline|stretch;}

在该属性值中, 除了auto以外, 其余属性值和容器align-items的属性值完全一致。 auto表示继承容器align-items的属性

本章小结

本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了 fex 布局的基本原理、容器和项目的相关属性。大家学好这些内容，可为小程序项目的布局打下良好的基础。, 如果没有父元素, 则等于stretch (默认值)。