复习第一章介绍微信小程序，第二章微信小程序开发基础，第三章微信小程序页面布局

目录

第一章介绍微信小程序

认识微信小程序

 微信小程序开发流程

小程序的应用场景的特点

微信小程序图

第二章微信小程序开发基础

页面文件

主体文件

小程序的开发框架 

创建小程序页面

     页面文件夹创建

运行结果 

配置文件

逻辑层文件

页面逻辑文件

页面结构文件

运算

第三章微信小程序页面布局

盒子模型

块级元素与行内元素 

行内元素

浮动与定位

元素定位 

flex布局

---

第一章介绍微信小程序

认识微信小程序

小程序简介
        微信(WeChat)是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信(Instant Messaging，M)服务的应用程序。

        小程序、订阅号、服务号、企业微信(企业号)属于微信公众平台的四大生态体系它们面向不同的用户群体，应用于不同的方向和用途。

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

小程序的优势
        小程序嵌入微信之中，不需下载安装应用，用户通过扫码或者搜索等相关功能即可，具有

无须安装、触手可及、用完即走、无须卸载的优势。

 微信小程序开发流程

        微信小程序开发流程为:第1步，在微信公众平台上注册小程序账号；第2步，下载开发者工具进行编码；第3步，通过开发者工具提交代码，待通过审核后便可以发布。

小程序的应用场景的特点

       小程序的应用场景具有，简单的业务逻辑、低频度的使用场景等特点。

微信小程序图

在pages中新建文件包，再在文件包中新建文件.wxml.js.json.wxss。

第二章微信小程序开发基础

​    项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）。
        在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。
​

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

 pages 和utils 目录
        pages目录用于存放所有页面。peges目录中有2个子目录，分别是imdex和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名(.wxml、.wxss、.js和.json)的文件。

       utils目录用于存放一些公共的.js文件，也可以统称为工具包。当某个页面需要用到 utls.js 函数时，可以将引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目来存放。

页面文件

 index.js:页面逻辑文件，JavaScript代码在该文件编写来控制页面的逻辑。

index.json:页面配置文件。

index.wxml:页面结构文件，用于设计页面的布局、数据绑定等。

index.wxss:页面样式表文件，用于定义本页面中用到的各类样式表。

主体文件

 app.js:小程序逻辑文件。

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

app.wxss:小程序主样式表文件，类似HTML的.css文件。

小程序的开发框架 

     微信团队为小程序的开发提供了MINA框架，小程序MINA框架将整个系统划分为视图层和逻辑层。

 视图层
视图层(View)由框架设计的标签语言WXML(WeiXin Markup Language)和用于描述 WXML 组件样式的WXSS(weiXinStyle Sheets)组成，它们的关系就像HTML和CSS的关系。对于微信小程序面言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;wxss 文件用于描述页面的样式。

 逻辑层
逻辑层(AppService)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行，并且采用JavaScript编写。 

页面数据绑定 
MINA 框架为页面组件提供了bindtap、bindtouchstar 等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互(数据)。

创建小程序页面

     页面文件夹创建

           单击pages目录 再点击2.并命名文件夹为wer

单击wer文件，再点击 加号创建4个文件（wer.js、wer.json、wer.wxml、wer.scss）并在wer文件夹中的.js、.wxml、.jsom文件编写代码。

代码 
wer.js文件中的代码：

Page({
  
})

wer.json文件中的代码：

{
  
}

wer.wxml文件中的代码：

天地不仁，以万物为刍狗；圣人不仁，以百姓为刍狗。

配置页面
因为页面没有配置在模拟机上，所以 需要在utils目录中的app.json文件中添加一行代码

 "pages/wer/wer",

具体在

运行结果 

   文字在最上面也没有关系，有的是在距下点，正常。

配置文件

   小程序的全局配置保存至app.json文件中，使用app.json来配置 pages的路径、Window的表现、tabBar、networkTimeout配置项  、debug配置项 。

   各全局配置项描述如下： 全局配置文件内容的整体结构如下：

全局配置文件内容的整体结构如下：

{
//设置页面路径
"pages":[],
//设置默认页面的窗口表现
"window":{},
//设置底部tab的表现
"tabBar":{},
//设置网络请求API的超时时间值
"networkTimeout":{},
//设置是否开启debug模式
"debug":false
}

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

   pages 配置项是必填项。

  设置 pages 配置项时，应注意以下3点:
    (1)数组的第一项用于设定小程序的初始页面。
    (2)在小程序中新增或减少页面时，都需要对数组进行修改。
    (3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、wxm 和wxss 文件进行整合数据绑定。
面

 pages代码
         app.json 文件的配置代码如下

  "pages": [ "pages/zlfw/zlfw",
    "pages/zlfw2/zlfw2",
    "pages/index/index",
    "pages/wer/wer",
    "pages/logs/logs"
  ],

pages运行结果

window配置项
      window配置项专门设置小程序的状态栏、导航栏、标题、窗口背景等样式，可以配置的参考对象如下所示：

window配置代码
     在app.json中window配置代码

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light" 
 
  },

window 运行结果

tabBar配置项
   tabBar配置项用来配置程序顶部或者底部菜单栏，可以配置参考对象如下所示：

 其中，list(列表）接受数组值，数组中的每一项也都是一个对象。对象的数值说明如下所示

tabBar配置代码 
app.json中的代码配置 

       点击首页会跳转到zlfw页面，点击新闻就会跳转到zlfw2页面，且底部菜单栏的图标会发生变化

 如果设置iconpath与selectedIconPath一样的话图标不会变化 ，再如果color跟selectedColor的值一样，则点击底部菜单栏时文字颜色不发生变化。

 "tabBar": {
    "color": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#fff",
    "selectedColor": "#ff0000",
    "list": [{"pagePath": "pages/zlfw/zlfw",
      "iconPath": "/image/home.png",
      "selectedIconPath": "/image/home_1.png",
      "text": "首页"},
      {"pagePath": "pages/zlfw2/zlfw2",
        "iconPath": "/image/lock.png",
        "selectedIconPath": "/image/lock-fill.png",
        "text": "新闻"}]
  },

注意：如果自己的文件目录上没有img文件包就自己创建一个放图片的文件包，且 文件路径名字要写对。

 tobBar运行结果
 点击模拟器上的首页后效果如下

点击模拟机上的新闻后效果如下 

networkTimeout配置项 
    小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项 进行统一设置，且不能在API中单独设置，networkTimeout配置项 可以配置的属性如下所示：

networkTimeout配置代码 
 在app.json中代码

 " networkTimeout":{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downioadFile":20000
},

networkTimeout运行结果

debug配置项

 debug配置项用于开启开发者工具的调试模式，默认为false。

pages、tabBar、networkTimeout、window整体代码

{
  "pages": [ "pages/zlfw/zlfw",
    "pages/zlfw2/zlfw2",
    "pages/index/index",
    "pages/wer/wer",
    "pages/logs/logs"
  ],
  "tabBar": {
    "color": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#fff",
    "selectedColor": "#ff0000",
    "list": [{"pagePath": "pages/zlfw/zlfw",
      "iconPath": "/image/home.png",
      "selectedIconPath": "/image/home_1.png",
      "text": "首页"},
      {"pagePath": "pages/zlfw2/zlfw2",
        "iconPath": "/image/lock.png",
        "selectedIconPath": "/image/lock-fill.png",
        "text": "新闻"}]
  },
 " networkTimeout":{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downioadFile":20000
},
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light" 
 
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

逻辑层文件

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

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

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

onLaunch()、onShow()、onHide()代码
          实现onLaunch()、onShow()、onHide()这些参数需要在app.js中打以下代码

// app.js
App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
    
  },
})

onLaunch()、onShow()、onHide()的运行效果
     运行效果需要在调试台中Console窗口中观看是否有“小程序初始化、小程序启动、小程序隐藏 ”的文字出现。

小程序隐藏 
     小程序隐藏需要点击模拟器上的‘圆圈’，这样小程序就隐藏在后台，Console窗口就会出现小程序隐藏这5个字。

点击‘圆圈 ’

点击后

再次运行，模拟器上就会显示页面。

页面逻辑文件

         页面逻辑文件的主要功能有三个分别是:

           1.设置初始数据。

           2.定义当前页面的生命周期函数。

           3.定义事件处理函数。

      我们可以发现在逻辑层中 ，Page()方法用来注册一个页面，并且每个页面有且仅有一个。各个参数如下表所示。

数据初始
     名字数据初始化案例方法如下：

        1.打开zlfw.js在data中打代码

数据初始代码
代码如下

 data: {
    name:'xjx',//字符串
    age:30,
    birthday:[{year:2035},{month:5},{date:15}],//数组
    object:{hobby:'computer programent'}//对象
  },

因为需要zlfw.js文件中把数据初始化再传送到zlfw.wxml文件中指定位置。

2.打开zlfw.wxml并写代码，而且数据需要在.wxml文件中绑定。 代码如下:

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

数据初始运行结果 

页面结构文件

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

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

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

      在.wxml中的代码如下：

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

在.js中的代码如下：

data: {
    name:'xjx',//字符串
    age:30,
    num:100,
   
    birthday:[{year:2035},{month:5},{date:15}],//数组
   
}

简单绑定运行效果

运算

   我们可以在 语法{{}}中做一些简单的运算，主要有算术运算、逻辑运算、三元运算、字符串运算、数据路径运算等。

代码（.wxml文件中）

 算术运算

<view>算术运算:{{age+num}}</view>

逻辑运算

<view>逻辑运算:{{age==34}}</view>

三元运算

<view>三元运算:{{3==4?2:8}}</view>
<view>三元运算:{{age==4?2:num}}</view>

代码（.js)

data: {
    name:'xjx',//字符串
    age:30,
    num:100,
   
    birthday:[{year:2035},{month:5},{date:15}],//数组
    object:{hobby:'computer programent'}//对象
}

运算结果

条件数据绑定
   条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
wx:if条件数据绑定
wx:if条件数据绑定是指使用wx:i这个属性来判断是否数据绑定当前组件。.wxml代码如下

<view wx:if="{{age>40}}">条件语句：1</view>
<view wx:elif="{{age==40}}">条件语句：2 elseif==elif </view>
<view wx:else>条件语句：3</view>

运行结果 

第三章微信小程序页面布局

盒子模型

     微信小程序的视图层由WXML和WXSS组成。其中，WXSS(WeiXin Style sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有外汍距(m------CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
     在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。
      盒子模型就是我们在页面设计中经常用到的-种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成，如图下图所示。

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

块级元素与行内元素 

        元素按照显示方式分为块级元素、行内元素和行内块元素，它们显示方式都是由display属性控制。

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

块级元素的特点如下：

总是新行开始：块级元素总是从新行开始，其后的元素也只能另起一行，不能与前一个块级元素共用一行。
高度、行高及边距可控制：块级元素的高度、行高以及外边距和内边距都可以通过CSS进行设置。
宽度默认是容器的100%：如果块级元素的宽度没有设置，它将默认为其父元素的宽度。
可以包含内联元素和其他块级元素：块级元素不仅可以容纳文本，还可以包含其他块级元素。
块级元素的宽度、高度、外边距及内边距都可以自定义设置。 
   <view/>组作默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下:

<view style="border: 1px solid #f00">块级元素</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>

运行效果为：

行内元素

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

行内元素（diaplay:inline）特点总结：

1、和其他非块级元素在同一行

2、盒子模型中高度、宽度、上下margin、上下padding设置无效，只能设置左右的margin和左右的padding

3、宽度就是文字或图片的宽度，不可改变

4、行内元素的宽度和高度都不能直接设置

5、行内元素只能容纳文本或其他行内元素，在行内元素中放置其他的块级元素会引起不必要的混乱

代码案例如下

<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 #0f0;display: inline;">块级元素设置为行内元素</view>一行显示不全，自动换行显示</view>

行内块元素 
        当元素的display 属性被设置为i line--block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

行内块元素（display：inline-block）的特点：

    行内块元素可以设置宽、高、内外边距，可以简单理解为行内块元素就是把块级元素以行的形式展示，保留了块级元素对宽、高、内外边距的设置。

案例代码

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

浮动与定位

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

{float:none|left|right;}
none:默认值，表示元素不浮动

left:元素左浮动

right: 元素右浮动

元素没有浮动
    在.wxml中打如下代码：

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

元素box1左浮动
      在.wxml中打如下代码：

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

 

元素box1右浮动
       在.wxml中打如下代码：

<view>box1 右浮动 </view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float:right;border:1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>

元素box1box2 左浮动
     在.wxml中打如下代码

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

运行效果如下：

元素box1box2box3左浮动
        在.wxml中打如下代码：

<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元素。这样的情况可以通过清除浮动来解决。

          从图1到图2

因为浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响。在css中，clear属性用于清除浮动，同理在微信小程序中也是这个属性，基本格式如下：

{clear:left|right|both|none}

none:不清除浮动

left:清除元素左浮动

right: 清除元素右浮动

both:清除元素左右浮动

box3清除左浮动
   方法一运用clear属性
       在.wxml中代码如下所示

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

元素定位 

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

     基本格式如下:

{position:static |relative |absolute |fixed}

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

没有定位
         .wxml代码如下：

<!--三个元素匀未定位 static-->
<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>

相对定位
         在.wxml中代码如下所示

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

绝对定位
 在.wxml中代码如下所示

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

 

 固定定位
 在.wxml中代码如下所示

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

子绝父相
   通过上面案例运行效果来看，固定定位和绝对定位的效果图一样。这是因为它们的父元素是 page,没有定位。

绝对定位

如果对box1,box2,box3的父元素采用相对定位，box2采用绝对定位。我们 在.wxml中代码如下所示

<view>absolute</view>
<view style=" position: relative;top: 0px;left: 0px; 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采用固定定位。

我们 在.wxml中代码如下所示

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

flex布局

         fex布局是万维网联盟(World WideWebConsortium，W3C)在2009年提出的一种新局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局flex是flexible box的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
      flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container),flex布局的所有直接子元素自动成为容器的成员，称为flex项目(flex item)。
      容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end; 交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

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

      fex布局模型如下图所示。

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

容器属性
      flex容器支持的属性有7种，如下表所示。

    flex容器支持的属性

display 
        display用来指定元素是否为flex布局，语法如下所示:

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

flex:块级flex布局，该元素变为弹性盒子；

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

   注意！！！：由于设置了flex布局之后，子元素的float(浮动）、clear(清除浮动)、vertical-align(垂直对齐方式)属性将会失去效果。

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

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

row：主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为 row；如下图a所示。

row-reverse：主轴为水平方向，起点在右端;如下图b所示

column： 主轴为垂直方向，起点在顶端。如下图c所示

column-reverse：主轴为垂直方向，起点在底端。如下图d所示

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

                                     （c)                                                                          (d)

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

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

nowrap:不换行;如图a所示

    wrap：换行、第一行在上方;如图b所示

   wap-reverse:换行，第一行在下方;如图c所示
注意！！！：当设置换行时，还需要设置align-item属性来配合自动换行，但align-tiem的值不能为"stretch "

flex-wrap 不同值的显示效果

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

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

.wxss中示例代码如下:

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

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

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}
    justify-content:与主轴方向有关, 默认主轴水平对齐, 方向从左到右;
    flex-start:左对齐, 默认值;如图a所示
    flex-end:右对齐; 如图c所示
    center:居中;如图b所示
   space-between:两端对齐, 项目之间的间隔都相d所示
   space-around: 每个项目两侧的间隔相等。如图​​​e所示

    justify-content不同值的显示效果

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="cn1">
      <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中代码如下所示

.cn1{
  display: flex;//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;
}