微信小程序1~3章博客复习总结

每天都好想睡觉

已于 2024-05-16 08:35:00 修改

阅读量958

点赞数 30

文章标签：微信小程序小程序

于 2024-04-24 17:01:30 首次发布

本文链接：https://blog.csdn.net/ygtxy364949/article/details/138106187

版权

第一章

微信小程序概述

认识微信小程序：

1.1 小程序简介

小程序简介：
小程序于2011年1月推出，2017年1月正式上线

1.2小程序的特征

小程序的特征：
无需安装、触手可及、用完即走、无需卸载

1.3 小程序应用场景的特点

（1）小程序应用场景的特点：

（2）简单的业务逻辑、低频度的使用场景

1.4 微信小程序开发流程

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

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

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

1.5 下载微信小程序开发中工具APP

学习这本课程中，首先，需要安装一个软件APP，之后注册一个微信小程序账号

微信小程序开发者工具界面功能介绍：

微信小程序界面划分于5大区域：工具栏、模拟区、目录文件区、编辑区和调试区。

1.工具栏：
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等

2.模拟区：
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果

3.目录文件区：
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作

4.编辑区：
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json 文件的操作，使用组合键能提高代码的编辑效率。常用的组合键如表1-1所示。

5.调试区：
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sourees、Network、Security、Storage、AppDataWxml、Sensor和Trace。最右边的扩展菜单项“:”是定制与控制开发工具按钮，如图1-24 所示。

1.Console面板：
Comsole面板是调试小程序的控制而板，当代码执行出现错误时，错误信息将显示Consoke面板中，便于开发者排查错误，如图1-25所示。另外，在小程中，开发者可通过console.loe语句将信息输出到Console面板中。此外，开发者可以在 Console 面板直接轮人代码并调试

2.Sources面板：
Sourees面板是源文件调试信息页，用于显示当前项目的脚本文件，如图1-26所示调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮，Sources面板中显示的代码是经过小程序框架编译过的脚本文件，开发者的代码会被包含在defne 函数中。对于Page 代码，在文件尾部通过require 函数主动调用

3.Network面板：
Network面板是网络调试信息页，用于观察和显示网络请求request和socket 等网络相关的详细信息

4.Security面板：
Security面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题。如果设置安全论证，则会显示“The security of this page is unknown.”

5.Storage面板：
Storage 面板是数据存储信息页，开发者可以使用wx.setStorage或者wx.setStorageSyne 将数据存储到本地存储，存储在本地存储中的变量及值可以在Sorage 面板中显示

6.AppData面板：
AppDala面板是实时数据信息页，用于显示项目中被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更情况反映到前端界面

7.Wxml面板：
Wxml面板是布局信息页，主要用于调试Wxm】组件和相关CSS样式，显示Wxm转化后的界面。Wxml面板调试区的左侧部分是Wxm代码，右侧部分是该选择器的CSS样式

8.Sensor面板：
Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现,用于调试重力感应 API

9.Trace面板：
Trace面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android)设备的路由信息

10.扩展菜单项：
最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息

第二章

2.1微信小程序开发基础

在微信下程序的基本目录结构中，项目主目录下有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个文件必须用来存放具有相同的路径与文件名

2.1.1主页文件

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

（1）app.js:小程序逻辑页面，主要用来注册小程序全局实例。

（2）app.json:小程序公共配置文件，配置小程序全局设置。

（3）app.wxss:小程序主样式表文件，类似的HTML的.CSS文件。

2.1.2页面文件

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

（1）.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。
（2）.wxml:页面结构文件，用于设计页面的布局、数据绑定等。
（3）.wxss：页面样式表文件，用于定义本页面中用到的各类样式表。
（4）.json：页面配置文件，该文件在页面中不可缺少。

2.2 小程序开发框架

2.2.1视图层

MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示，.wxml文件用于描述页面的结构； .wxss文件用于描述页面的样式

2.2.2 逻辑层

逻辑层用于处理事务逻辑。

微信小程序开发框架的逻辑层是采用javaScrict编写的。在javaScrict的基础上, 微信团队做了适当修改, 以便提高开发小程序的效率。主要修改包括:

(１) 增加app()和Page()方法, 进行程序和页面的注册。

(２) 提供丰富的API, 如扫一扫、支付等微信特有的能力。

(３) 每个页面有独立的作用域, 并提供模块化能力。

2.2.3数据层

数据层在逻辑上包括页面临时数据或缓存文件存储（本地存储）和网络存储与调用。

（1）页面临时数据或缓存
（2）文件存储（本地存储）
wx.getStorage:获取本地数据缓存

wx.setStorage:设置本地数据缓存
wx.clearStorage:清理本地数据缓存
（3）网络存储与调用
wx.request: 发起网络请求
wx.uploadFile: 上传文件
wx.downloadFile: 下载文件
调用URL的API接口，如下：
wx.navigateTo ：新窗口打开页面
wx.redirectTo: 原窗口打开页面

2.3创建另一个页面

启动微信发开发工具，创建新项目，如图所示：

2.3.1创建另一个页面文件

在pages目录新建一个yi目录，并在ti目录中新建yi.js、yi.json、yi.wxss、yi.wxml空文件。之后把原来的index目录删掉。

在app.json中删掉"pages/index/index"

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

（1）首先，我们学习如何能在页面中显示“欢迎学习小程序，实现大梦想”，打开建的yi目录，找到yi.wxml文件中输入“欢迎学习小程序，实现大梦想”。如下所示：

（2）打开yi.json文件，输入代码：

{
}

（3）打开yi.js文件，引入Page()方法输入代码：

Page({
  
})

将四个文件按Ctrl+S进行保存后，进行编译，运行结果如下所示：

2.4 配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容

2.4.1 全局配置文件

小程序的全局配置保存在全局配置文件(app.json) 中, 使用全局配置文件来配置页面文件(pages) 的路径、设置窗口(window) 表现、设定网络请求ＡＰＩ的超时时间值(netwoekTimeout) 以及配置多个切换页(tabBar) 等。

1.Pages配置项

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

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

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

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

2.window配置项

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

3.tabBar配置项

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

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

"tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/test1/test1",
      "iconPath": "img/屏幕截图 2024-03-08 083355.png",
      "selectedIconPath": "img/屏幕截图 2024-03-08 083457.png",
      "text": "首页"
    },{
      "pagePath": "pages/a1/a1",
      "iconPath": "img/屏幕截图 2024-03-08 083405.png",
      "selectedIconPath": "img/屏幕截图 2024-03-08 083457.png",
      "text": "新闻"
    }]
  }

其中list（列表）接收数组值，数组中每个项都是一个对象。

对象的数据值说明如下：

配置后的页面效果


{
  "pages": [
    "pages/wy/wy",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
"tabBar": {
  "color":"#666666",
  "selectedColor":"#ff0000",
  "borderStyle":"black",
  "backgroundColor":"#ffffff",

  "list":[
  {
      "pagePath":"pages/logs/logs",
      "text":"首页",
      "iconPath":"images/7.png",
      "selectedIconPath":"images/7.png"
  },
  {
      "pagePath":"pages/wy/wy",
      "text": "新闻",
      "iconPath": "images/8.png",
      "selectedIconPath": "images/8.png"
  }
  ]
},
"networkTimeout": {
  "request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"页面window配置演示",
"blckroundColor":"#eeeeee",
"blckroundTextStyle":"light"
}

运行效果

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

networkTimeout配置参考表如下：

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

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

 {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor":"#eeeeee",
    "backroundTextStyle":"light"
  }

2.5逻辑层文件

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

2.5.1项目逻辑文件

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

App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表所示

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

案例demo代码：

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

运行效果：

2.5.2页面逻辑文件

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

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

（1)设置初始数据

设置初始数据是对页面的第一次数据绑定。

（2)定义当前页面的生命周期函数

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

■ onload 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。

■ onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。

■ onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次, 代表页面已经准备就绪, 可以和视图层进行交互。

■ onHide 页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行tab 切换时,调用该函数。

■ onUnload页面卸载函数。当页面卸载、进行navigateBack 或redirectTo 操作时, 调用该函数。

示例1：

首先，在yi.js文件中输入代码：

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

在yi.wxml中输入代码：

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

按Ctrl+S保存后，运行效果如下：

示例2：

在miniprogram目录文件下，新建一个images文件放入两张图片

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

// yi.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
  }
})

在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/ti/ti",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/logs.jpg",
      "selectedIconPath": "images/logs.jpg"
    },{
      "pagePath": "pages/ti/ti",
      "text": "ti页",
      "iconPath": "images/ti.jpg",
      "selectedIconPath": "images/ti.jpg"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

运行效果：

2.6页面文件

页面结构文件(WXML) 是框架设计的一套类似HTML的标签语言, 结合基础组件、事件系统, 可以构建出页面的结构, 即.ｗｘｍｌ文件。在小程序中, 类似HTML的标签被称为组件, 是页面结构文件的基本组成单元。

2.6.1.数据绑定

１.简单绑定

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

注意：简单绑定作用于组件属性、控制属性等，双大括号外应该添加双引号。

2.运算

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

示例代码如下：

目的算术运算、逻辑运算、三元运算运算代码

在yi.wxml写入代码：

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

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

// yi.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
}
})

运行结果：

2.6.2条件数据绑定

概念：条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

１.wx:if条件数据绑定wx:if条件数据绑定是指使用wx:if 这个属性来判断是否数据绑定当前组件。当需要添加多个分支块时, 可以使用wx:elif、wx:else属性。当控制表达式为true 时,数据绑定一个分支; 当控制表达式为false 时, 数据绑定另一个分支。

２.block:wx:if 条件数据绑定

例如：

目的：使用条件数据绑定运行字符串

在yi.js中继续加入代码：

// yi.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
num:100,
students:[
  {nickname:"Tom",height:150,weight:150},
  {nickname:"Anne",height:160,weight:100}
]
}
})

在yi.wxml继续加入代码：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算术运算：{{age+num}}</view>
<view>逻辑运算：{{age==40}}</view> 
<view>三元运算：{{age==1 ?3:4}}</view> 
 
<view wx:if="age>40">1</view> 
<view wx:elif="age==40">2</view> 
<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>

运行效果：

2.6.3列表数据绑定

概念：列表数据绑定用于将列表中的各项数据进行重复数据绑定。

１.wx:for 在组件上, 可以使用wx:for 控制属性绑定一个数组, 将数据中的各项数据循环进行数据绑定到该组件, 格式如下:

<view wx.for="{{items}}">
{{index}}:{{item}}
</view>

2.6.4 模板

概念：在小程序中, 如果要经常使用几个组件的组合(如“登录” 选项), 通常把这几个组件结合定义为一个模板, 以后在需要的文件中直接使用这个模板。

１.定义模板

模板代码由wxml组成, 因此其定义也是在wxml文件中, 定义模板的格式为:

< template  name＝ "模板名" >

相关组件代码为: </template> 其中, < template> 为模板标签, name 属性用于定义模板的名称。

２.调用模板

将模板定义后, 就可以对其进行调用了。调用模板的格式为: < template is＝ "模板名称" data == "{{传入的数据}}" />

例如：

2.6.5 引用页面文件

在WXML文件中, 不仅可以引用模板文件, 还可以引用普通的页面文件。 WXML 提供了两种方式来引用其他页面文件。

１.import方式

2.Include方式

2.6.6 页面事件

简单来说, 小程序中的事件是用户的一种行为或通信方式。在页面文件中, 通过定义事件来完成页面与用户之间的交互, 同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上, 当达到触发条件时, 事件就会执行逻辑层中对应的事件处理函数。

(1)定义事件函数

概念：在.js文件中定义事件函数来实现相关功能, 当事件响应后就会执行事件处理代码。
(2)调用事件　

概念：调用事件也称为注册事件。

（3）冒泡事件

概念：冒泡事件是指某个组件上的事件被触发后, 事件会向父级元素传递, 父级元素再向其父级元素传递, 一直到页面的顶级元素。

（4）非冒泡事件

概念：非冒泡事件是指某个组件上的事件被触发后, 该事件不会向父节点传递。

2.7 页面样式文件

１.尺寸单位

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

２.样式导入

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

３.选择器

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

４.WXSS常用属性

第三章页面布局总结

3.1：盒子模型

微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXin StyleSheets)是基于CSS拓展的样式语言，用于描述 WXML的组成一边框(bomder) 样式，决定WXML的组件如何显示wxss具有外边距 CSS的大部分特性，因此，本章将重点讲解CSS 中内边距(padding)的布局相关内容。

在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中内容 (content) 的各个元素。

盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内
e/right 容(content)、内边距(padding)、边框(border) ht/both|none 和外边距(margin) 4个部分组成，盒子模型结构所示。

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

图中各元素的含义如下：

width和height 内容的宽度和高度

padding -top、padding -right、padding - bottom 和padding -left上内边距、右内边距、底内边距和左内边距。
border - top、border -right、border - bottom 和border -left上边框、右边框、底边框和左边框。

margin-top、margin- right、margin- bottom 和 margin left上外边距、右外边距、底外边距和左外边距。
因此，一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”+“边框”+“外边距”组成。例如:

css中布局都基于盒子模型，不同类型的元素对盒子模型的处理不同。

块元素和行内元素

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

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>

运行结果如下：

2.行内元素
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为inline后，该元素即被设置为行内元素。行内元素的特点如下:
(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

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

(3)同一块内，行内元素和其他行内元素显示在同一行。<text/>组件默认为行内元素，使用<view/>及<text/>组件演示盒子模型及行内元素的示例代码如下:

代码:

<view style="padding: 20px;" >
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #0f0; margin: 10px; padding: 5px;">文本2</text>
<view style="border: 1px solid #00f; display: inline;">块级元素设置为行内元素</view>一行显示不全，自动换行显示
</view>

运行结果如下：

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中通过float属性来定义浮动，格式如下

{float:none|left |right;}

none——默认值，表示不浮动

left——向左浮动

rigth——向右浮动

再下面的示例代码中，分别对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 solif #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 solif #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>

运行结果如下：

通过案例我们发现，当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>

运行结果如下：

另外还可以在父元素外添加一个空元素，实现空元素包裹浮动元素。

带码如下:

<view>box1 box2 box3 左浮动  在父元素后添加一个人空元素</view>
<view style="border: 1px solid #f00; padding: 5px;" class="clearfloat">
<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>

运行结果如下：

3.3.2 元素定位

static————默认值，改元素按照标准进行布局

relative————相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它

fixed————固定定位，相对于浏览器窗口进行定位。

对box1、box2、box3、进行定位静态定位，

代码如下：

<!--三个元素匀未定位static-->
<view style="border:1px solid #0f0; width: 100px;height: 100px;">box1</view>
<view style="border:1px solid #0f0; width: 100px;height: 100px;position: relative;">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>
<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: 30px;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: 30px;top: 30px;">box2</view>
  <view style="border: 1px solid #0f0; width: 100px; height: 100px;">box3</view>

代码结果如下：

3.4 fiex布局

其中，row--主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row; row -reverse--主轴为水平方向，起点在右端; column-主轴为垂直方向，起点在顶端;
column - reverse主轴为垂直方向，起点在底端。图3-13所示为元素在不同主轴方向下的显示效果。

flex-wrap

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

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

其中，nowrap————不换行，默认值；

wrap—reverse————换行，在上方；

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

flex-flow

flex-flow是flex-direction和flex-wrapd的简写形式，默认值为row nowrap.语法格式如下

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

示例代码如下：

.box{flex -flow:row nowrap;}
.box{flex -flow:row-reverse weap;}
.box{flex -flow:column wrap-reverse;}

容器属性

flex-direction示例

a row b row-reverse c column dcolumn-reverse

flex-wrap示例

a nowrap b wrap c wrap-reverse

容器内项目属性

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

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

其中

        flex——块级flex布局，该元素变为弹性盒子;
        inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex 布局规范。
        设置了 flex布局之后，子元素的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——主轴为垂直方向，起点在底端

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

wrap
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>;}

(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 #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}

其中

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

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

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

3.4.2项目属性

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>

运行效果：