1~3总结

第一章

小程序简介

微信（WeChat）是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信

(Instant Messaging,IM）服务的应用程序

小程序是一种不需要下载安装即可使用的应用，应用将无处不在，随时可用，且无须安装与卸载。

小程序是微信的一种新的开发能力，具有出色的用户使用体验，可以在微信内被便捷地获取和传播；订阅号为媒体和个人提供一种新的信息传播方式，构建信息发布者与浏览者之间更好的沟通与管理模式；服务号为企业和组织提供更强大的服务与用户管理能力，帮助企业快速实现全新的公众号服务平台；企业微信（公众号）为企业提供专业的通信工具、丰富的办公应用与应用程序接口（Application Programming Interface，API)，助力企业高效沟通与办公。

代码：

json：

{

  "usingComponents": {

    "navigation-bar": "/components/navigation-bar/navigation-bar"

  }

}

less：

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;

}

ts：

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

          })

        }

      })

    },

  },

})

wxml：

<!--index.wxml-->

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>

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

工具界面功能介绍
1.工具栏
     在工具栏中司以实现多种功他，例如账号的切推，拟区，瑞独区，确试区的是示/
藏，小程序的编译、预览，切换后台，请理缓存等。
2.模拟区
    在模拟区中选择模拟手机的类型，显示比例、网络类型后，模拟器中会录示小程字的运
行效果。
3目录文件区
    目录文件区用来是示当前项日的目录结构，单击左上角的“”按键可以进行目录和文件
的创建，右键单击目录文件区中的文件或口录可以进行“硬盘打开”“重命名”“酬除”等霜
关操作。
4.编辑区
    编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、j及.jon文件的
操作，使用组合键能提高代码的编辑效率。

5.调试区
    调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提
供了9个调试功能模块，分别是Console、Soures、Network、Secunty、Storge、AppData
Wxml、Sensor和Trace。最右边的扩展菜单项“:"是定制与控制开发工具按钮。

第二章总结

 一、基本目录结构：
在微信下程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）

在主目录中3个以“app”开头的文件是微信下程序框架的主描述文件，是应用程序级别的文件

project.config.json文件是项目配置文件，包含项目名称、AppID等

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同的扩展名（.wxml、.wxss、.js、.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件、页面配置文件。按照规定，同一个页面的4个文件必须用来存放具有相同的路径与文件名

主题文件：

app.js：小程序逻辑文件

app.json：小程序公共设置文件

app.wxss：小程序主样式表文件

页面文件：

.js：页面逻辑文件

.wxml：页面结构文件

.wxss：页面样式文件

.json：页面配置文件

二、小程序开发框架：

小程序MINA框架将整个系统划分为视图层、逻辑层和（数据层）

视图层：MINA框架的视图层由WXML与WXSS编写，由组件来进行展示
视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构wxss 文件用于描述页面的样式
逻辑层：逻辑层用于处理事务逻辑（采用JavaScript编写）
1.增加app()和Page()方法，进行程序和页面的注册
2.提供丰富的 API,如扫一扫、支付等微信特有的能力
3.每个页面有独立的作用域，并提供模块化能力
数据层：数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用
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  原窗口打开页面

三、创建小程序页面：
1.

添加新的文件news,并创造四个子文件news.js  json   wxml    wxss

2.

 在news.wxml中写下想写的文字

3.

在news.json中写{}

4.

在news.js中写page({})

5.

6.运行结果

2.4配置文件
        小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容
        小程序的全局配置保存在全局配置文件(apPjson)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等（参考下图）

1.配置项
        pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项

设置 pages 配置项时，应注意以下3点:
        （1）数组的第一项用于设定小程序的初始页面

        （2）在小程序中新增或减少页面时，都需要对数组进行修改

        （3）文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、wxml 和wxss 文件进行整合数据绑定

2.window配置项
        window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式（参考下图）

3.tabBar配置项

        当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现其中，list(列表)接受数组值，数组中的每一项也都是一个对象（参考下图）

4.networkTimeout配置项

        小程序中各种网络请求 API的超时时间值只能通过networkTimeout配置项进行统一设置不能在 API中单独设置（参考下图）

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

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

"navigationBarBackgroundColor":"#ffffff"

"navigationBarTextStyle":"black"

"navigationBarTitleText"："页面window 配置演示”

"backgroundColor":"#eeeeee"

"backgroundTextStyle":"1ight"

2.5逻辑层文件
        小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件

2.5.1项目逻辑文件
        项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

        App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命周期函数、用户自定义属性和方法（参考下图）

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法，然后通过epp.json的 pages属性注册相应的页面，最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的Home键离开微信时，小程序没有被直接销毁，而是进入后台这两种情况都会触发onHide方法;当用户再次进入微信或再次打开小程序时，小程序会从后台进人前台，这时会触发onShow方法。只有当小程序进人后台一段时间(或者系统资源占用过高)时，小程序才会被销毁

  onShow: function(options){
    console.log("小程序显示");
  },
  onHide: function(){
    console.log("小程序进入后台");
  },

运行结果

2.5.2页面逻辑文件

        页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件

        在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示（参考下图）

1.设置初始数据
        设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object Notation，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式
(字符串、数字、布尔值、对象、数组)

        视图层可以通过 WXML对数据进行绑定

2.定义当前页面的生命周期函数
        在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload

        （1）onLoad：页面加载函数
        （2）onShow：页面显示函数
        （3）onReady：页面数据绑定函数
        （4）onHide：页面隐藏函数
        （5）onUnload：页面卸载函数
demo数据初始、数据绑定与运行效果：

代码：

news.js文件

Page({
  data:{
    name:"摩拉克斯",//字符串
    age:5000,//数字
    birthday:[{year:5000},{month:12},{date:31}],//数组
    object:{hobby:"喝茶"}//对象
  },

news.wxml文件

//index.wxml
<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>

运行结果

demo练习：

代码：

news.js

  //生命周期函数--监听页面加载
onLoad:function(){
  console.log("onLoad")
},
//生命周期函数--监听页面初次渲染完成
onReady:function(){
  console.log("onReady")
},
//生命周期函数--监听页面显示
onShow:function(){
  console.log("onShow")
},
//生命周期函数--监听页面隐藏
onHide:function(){
  console.log("onHide")
},
//生命周期函数--监听页面卸载
onUnload:function(){
  console.log("onUnload")
}
})

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

  //生命周期函数--监听页面加载
onLoad:function(){
  console.log("onLoad")
},
//生命周期函数--监听页面初次渲染完成
onReady:function(){
  console.log("onReady")
},
//生命周期函数--监听页面显示
onShow:function(){
  console.log("onShow")
},
//生命周期函数--监听页面隐藏
onHide:function(){
  console.log("onHide")
},
//生命周期函数--监听页面卸载
onUnload:function(){
  console.log("onUnload")
}
})

运行结果：

控制台就会输出onLoad（页面加载）、onShow（页面显示）、onReady（页面初次渲染完成）

在app. json 文件中设置如下tabBar配置

{
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/news/news",
      "text": "text",
      "iconPath": "img/R-C.png",
      "selectedIconPath": "img/R-C.png"
    },
     {
      "pagePath": "pages/logs/logs",
      "text": "text",
      "iconPath": "img/R-C.png",
      "selectedIconPath": "img/R-C.png"
     }
  ]
  },

  "pages": [
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

运行结果：

页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

 1.数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑
定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法 将变量或运算规则包起来。

2.条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
3.列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
4.模板
在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件
结合定义为一个模板，以后在需要的文件中直接使用这个模板。
5.引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供
了两种方式来引用其他页面文件。
6.页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
定义事件函数 在.is文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key =value”形式出现，key(属性名)以bind或catch开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。在WXML中，冒泡事件有6个，如下表所示。

页面样式文件

页面样式文件(WXSS) 是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。
1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx(respnesive pixel)。WXSS规定屏幕宽度为750 rpx，在系统数据绑定过程中rpx会按比例转化为px。例如，iPhone6的屏幕宽度为375 px，即750 rpx需按比例转化为375px，所以，在iPhone6中，1rpx＝0.5px。
2.样式导入
为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件
中引用另一个样式文件，使用@import语句导入即可。
3.选择器
目前，WXSS仅支持CSS中常用的选择器，如.class、#id、element、::before、:aftert等。
4. WXSS常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如下表所示。

第三章总结 

页面布局
3.1盒子模型
        微信小程序的视图层由WXML和WXSS 组成。其中，WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS 具有外边距(maCSS的大部分特性，盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成

此外，对 padding、border 和 margin 可以进一步细化为上、下、左、右4个部分，在 CSS所示。中可以分别进行设置

图中各元素的含义如下：
        width和height ：内容的宽度和高度

        padding -top、padding -right、padding -botom和 padding-left：上内边距、右内边
距、底内边距和左内边距。

        border -top、border -right、border -bottom 和 border -left：上边框、右边框、底边框
和左边框

        margin -top、margin -right、margin-bottom 和margin_left：上外边距、外边距底外边距和左外边距

        因此，一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”+“边框+“外边距”组成。

例如：

.boxi{

  width:70px;

  padding:5px;

  margin:10px;
}

3.2块级元素与行内元素
元素按显示方式分为块级元素、行内元素和行内块元素，它们的显示方式由display 属性控制

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

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

        <view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下:

<view style="border: 1px solid #f00">块级元素1</view>
<view style="border: 1px solid #0f0;margin:15px;padding:20px">块级元素2</view>
<view style="border: 1px solid #00f;width:200px;height:80px">块级元素3</view>
<view style="border: 1px solid #ccc">
  <view style="height:60px">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">
  父级元素高度随内容决定，内容为文本
</view>

效果：

3.2.3行内块元素

        当元素的 display 属性被设置为inline-block 时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:

<view>
  元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">
  块级元素、行内元素和行内块元素
  </view>三种类型
</view>

效果：

3.3浮动与定位

3.3.1元素浮动与清除

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

{float:none|left|right;}

其中

        none——默认值，表示元素不浮动;
        left——元素向左浮动;
        right——元素向右浮动。
在下面的示例代码中，分别对box1、box2、box3元素左浮动:

<!--元素浮动与清除-->
<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>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>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>

效果：

通过案例我们发现，当box3左浮动后，父元素的边框未能包裹box3元素。这时，可以通过清除浮动来解决。
        由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下:

{clear:left|right|both|none}

其中

        left——清除左边浮动的影响，也就是不允许左侧有浮动元素

        right——清除右边浮动的影响，也就是不允许右侧有浮动元素

        both——同时清除左右两侧浮动的影响

        none——不清除浮动。

代码如下:

<!--清除浮动-->
<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>

效果 ：

 另外，还可以在父元素外添加一个空元素，实现父元素包裹浮动元素。示例代码如下:

wxml文件：

<!--父元素外加一个空元素-->
<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>

wxss文件：

.clear-float::after{display: block;clear: both;height:0;content:""}

 效果：

3.3.2元素定位

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

{position:static|relative|absolute|fixed}

其中

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

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

<!--三个元素均为定位-->
<view style="float: left;border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="float: left;border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="float: left;border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

运行结果：

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

<!--box2元素相对定位Relative top:30px left:30px-->
<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 进行元素绝对定位，示例代码如下：

<!--box2元素绝对定位absolute top:30px left:30px-->
<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 进行元素固定定位，示例代码如下：

<!--box2元素固定定位fixed top:30px left:100px-->
<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: 150px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

运行结果：

如果将box1 box2 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: 150px;top: 30px;">box2</view>
  <view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>

运行结果：

如果将box1 box2 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: 150px;top: 30px;">box2</view>
  <view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>

运行结果：

3.4flex布局
        flex布局是万维网联盟(World WideWebConsortium，W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局nex是exible box的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局（弹性布局）

         flex布局主要由容器和项目组成，采用fex布局的元素称为ex容器(fexcontainer)0ex布局的所有直接子元素自动成为容器的成员，称为fex项目(fexitem)

        容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做 cross start，结束位置叫做 cross end

        项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做
cross size

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

3.4.1容器属性

fex容器支持的属性有7种，如表所示

1.display

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

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

其中

        flex——块级flex布局，该元素变为弹性盒子;
        inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex 布局规范。
        设置了 fex布局之后，子元素的float、clear和 vertical-align 属性将失效

2.flex-direction
flex-direction 用于设置主轴的方向，即项目排列的方向，语法格式为:

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

其中

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

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

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

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

下图所示为元素在不同主轴方向下的显示效果

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

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

 其中

        nowrap——不换行，默认值;

        wrap——换行，第一行在上方;

        wrap-reverse——换行，第一行在下方。

        当设置换行时，还需要设置 align-item属性来配合自动换行，但 align-item 的值不能为“ stretch ”

flex-wrap 不同值的显示效果如图所示

4.flex-flow

flex -flow是fex-direction 和fex-wrap 的简写形式，默认值为 row nowrap。语法格式如下:

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

演示代码：

.box{flex-flow:row nowrap;}//水平方向不换行
.box{flex-flow:row-reverse wrap;}//水平方向逆方向换行
.box{flex-flow:column wrap-reverse;}//垂直方向逆方向换行

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="cont1">
  <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文件 */
.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
 }
 .item{
   background-color: #ccc;
   border: 1px solid yellow;
   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}

其中

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

        space-around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。

        其余各属性值的含义与 align-items 属性的含义相同。
        下图所示为 align-content 不同值的显示效果

3.4.2项目属性

容器内的项目支持6个属性，其名称和功能如表所示

1.order

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

.item{order:<number>;}

示例代码：

<!-- wxml文件 -->
<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item" style="order: 1;">1</view>
  <view class="item" style="order: 3;">2</view>
  <view class="item" style="order: 2;">3</view>
  <view class="item">4</view>
</view>

 运行结果：

2.flex-grow

flex-grow定义项目的放大比例，默认值为0，既不放大。语法格式如下：

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

示例代码如下：

<!-- wxml文件 -->
<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-grow: 1;">2</view>
  <view class="item" style="flex-grow: 2;">3</view>
  <view class="item">4</view>
</view>

运行结果：

3.flex-shrink

flex-shrink用来定义项目的缩小比列，默认值为1，如果空间不足，该项目将缩小，语法格式如下：

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

4.flex-basis

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，他的默认值为auto（及项目的本来大小）。语法格式如下：

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

 示例代码如下：

<!-- wxml文件 -->
<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-basis: 100px;">2</view>
  <view class="item" style="flex-basis: 200px;">3</view>
  <view class="item">4</view>
</view>

 运行结果：

5.flex

        flex属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。语法格式如下：

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

示例代码如下：

.item{flex:auto;}//等价于.item{flex:1 1 auto;}
.item{flex:none;}//等价于.item{flex:0 0 auto;}

6.align-self

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

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

在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致

auto表示继承容器align-items的属性，如果没有元素，则等于stretch（默认值）