【微信小程序】第二章---第三章总结

  "window": {
    "backgroundColor": "#ccc",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序window功能演示",
    "navigationBarTextStyle": "black"
  },

3. tabBar配置项

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

4. tabBar中的list选项

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

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

设置new2的“首页”，“新闻”。

 "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/new1/new1",
        "iconPath": "images/sy.jpg",
        "selectedIconPath": "images/sy.jpg",
        "text": "首页"
      },
      {
        "pagePath": "pages/new2/new2",
        "iconPath": "images/wx.jpg",
        "selectedIconPath": "images/wx.jpg",
        "text": "新闻"
      }
    ]
  },

5. networkTimeout配置项

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

例：提高网络响应效率

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

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。

6. debug配置项

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

2.5 逻辑层文件

项目逻辑文件

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

当小程序初始化完成时，会触发onLaunch（全局只触发一次）

当小程序启动（或从后台进入前台显示），时会触发onshow

当小程序从前台进入后台，会触发onHide

当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息

例：在app.js中写以下代码

// app.js
App({
  onLaunch: function () {
    console.log("小程序初始化完成.....")
  },
  onShow: function(options){
    console.log("小程序显示");
    console.log(this.data);
    console.log("小程序进入后台")
  },
  onError:function(msg){

  },
  fun:function(){
    console.log("在app.js中定义的方法");
  },
  data: '在app.js中定义的方法'
});

页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。

1. 设置初始数据

在new2.js输入以下代码

 data:{
    name:'xzy',
    age:100,
    birthday:[{year:1924},{month:1},{data:1}],
    object:{hobby:'computer'}
  },

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

在new2.wxml输入以下代码

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

  </view>
  <view>爱好：{{object.hobby}}</view>

例：在new1.js和new2.js文件加入以下代码

new1.js

// pages/new1/new1.js
Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
console.log("new1 onLoad......")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady:function() {
    console.log("new1 onReady......")

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow:function() {
    console.log("new1 onShow......")

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide:function() {
    console.log("new1 onHide......")

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload:function() {
    console.log("new1 onUnload......")

  },

})

new2.js

// pages/new1/new1.js
Page({

  data:{
    name:'xzy',
    age:100,
    birthday:[{year:1924},{month:1},{data:1}],
    object:{hobby:'computer'}
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
console.log("new2 onLoad......")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady:function() {
    console.log("new2 onReady......")

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow:function() {
    console.log("new2 onShow......")

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide:function() {
    console.log("new2 onHide......")

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload:function() {
    console.log("new2 onUnload......")

  },

})

保持并编译后，Console面板出现了

单击new2的“新闻”选项卡，Console面板出现了

再次单击“首页”选项卡，Console面板出现了

3. 定义事件处理函数

定义事件处理函数

 myclick:function(){
    console.log("点击了view")
  }

4. 使用setData更新数据

new2.js：

// pages/new1/new1.js
Page({

  data:{
    name:'xzy',
    age:100,
    birthday:[{year:1924},{month:1},{data:1}],
    object:{hobby:'steam'}
  },
  chtext:function(){
    this.setData({
      name:'haha'
    });
  },
  charray:function(){
    this.setData({
      'birthday[0].year':1900
    });
  },
  charray:function(){
    this.setData({
      'object.hobby':'game'
    })
  },
  adddata:function(){
    this.setData({
      'address':'尼泊尔'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
console.log("new2 onLoad......")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady:function() {
    console.log("new2 onReady......")

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow:function() {
    console.log("new2 onShow......")

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide:function() {
    console.log("new2 onHide......")

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload:function() {
    console.log("new2 onUnload......")

  },

})

new2.wxml：

 <view>{{name}}</view>
  <button bind:tap="chtext">修改普通数据</button>
  <view >{{birthday[0].year}}</view>
<button bind:tap="charray">修改数组数据</button>
<view>{{object.hobby}}</view>
<button bind:tap="chobject">修改对象数据</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>

效果图：

2.6 页面结构文件

页面结构文件（WXML）是框架设计的一套类似HTML的标签语言，结合基础组件，事件系统，可以构建出页面的结果，即.wxml文件。

WXML还具有数据绑定，条件数据绑定，列表数据绑定，模版，引用页面文件，页面事件等能力。

2.6.1 数据绑定

1. 简单绑定

2. 运算

<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{age==4}}</view>
<view>三元计算：{{age==4?2:num}}</view>

2.6.2 条件数据绑定

1. wx:if条件数据绑定

<view wx:if="{{age<50}}">1</view>
<view wx:elif="{{age==50}}">2</view>
<view wx:else>3</view>

2.6.3 列表数据绑定

1. wx:for

 students:[
      {name:'Tom',age:'18',happy:'cs'},
      {name:'Anne',age:'16',happy:'mc'},
      {name:'joke',age:'20',happy:'ys'}
    ]

<view wx:for="{{students}}">
<text>姓名：{{item.name}}--年龄：{{item.age}}--爱好：{{item.happy}}</text>
</view>

2.6.4 模版

1. 定义模版

<template name="stu">

2. 调用模版

<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.name}}--年龄：{{item.age}}--爱好：{{item.happy}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>

2.6.5 引用页面文件

1. import方式

<text>姓名：{{item.name}}--年龄：{{item.age}}--爱好：{{item.happy}}</text>

//使用import方式引用
<template is="stu" data="{{students}}"></template>

2.include方式

2.6.6 页面事件

Page({
click:function(event){
console.log(event);
}
})

2.7 页面样式方式

1. 尺寸单位

WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中rpx会按比例转化为px。

2. 样式导入

//a.wxss
.cont{border:1px solid #f00;}

//b.wxss
@ import"a.wxss;"
.cont{padding:5rpx;margin:5px;}

3. 选择器

目前，WXSS仅支持CSS中常用的选择器，如.class,#id,element等

4. WXSS常用属性

3.1 盒子模型

微信小程序的视图层由ＷＸＭＬ和ＷＸＳＳ组成。盒子模型就是我们在页面设计中经常用到的一种思维模型。在ＣＳＳ中, 一个独立的盒子模型由内容(ｃｏｎｔｅｎｔ)、内边距(ｐａｄｄｉｎｇ)、边框(ｂｏｒｄｅｒ)和外边距( ｍａｒｇｉｎ) ４个部分组成

盒子模型结果：

盒子模型元素：

图中各元素的含义如下:
ｗｉｄｔｈ和ｈｅｉｇｈｔ　内容的宽度和高度。
ｐａｄｄｉｎｇ－ｔｏｐ、ｐａｄｄｉｎｇ－ｒｉｇｈｔ、ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ和ｐａｄｄｉｎｇ－ｌｅｆｔ　上内边距、右内边距、底内边距和左内边距。
ｂｏｒｄｅｒ－ｔｏｐ、ｂｏｒｄｅｒ－ｒｉｇｈｔ、ｂｏｒｄｅｒ－ｂｏｔｔｏｍ和ｂｏｒｄｅｒ－ｌｅｆｔ　上边框、右边框、底边框和左边框。
ｍａｒｇｉｎ－ｔｏｐ、ｍａｒｇｉｎ－ｒｉｇｈｔ、ｍａｒｇｉｎ－ｂｏｔｔｏｍ和ｍａｒｇｉｎ－ｌｅｆｔ　上外边距、右外边距、底外边距和左外边距。

3.2 块级元素与行内元素

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

3.2.1 块级元素

(１) 一个块级元素占一行。

(２) 块级元素的默认高度由内容决定, 除非自定义高度。

(３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度

(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。(５) 块级元素可以容纳块级元素和行内元素。

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

<!-- 每个块级元素占一行 -->
<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>

<!-- 块级元素的高度随内容决定，内容为文本元素，块级元素的高度为100px -->
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父级元素高度随内容决定，内容为文本</view>

显示效果：

3.2.2 行内元素

行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。将一个元素的ｄｉｓｐｌａｙ属性设置为ｉｎｌｉｎｅ后, 该元素即被设置为行内元素。行内元素的特点如下:

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

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

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

< ｔｅｘｔ/ > 组件默认为行内元素, 使用< ｖｉｅｗ/ > 及< ｔｅｘｔ/ > 组件演示盒子模型及行内元素的示例代码如下:

<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.2.3 行内块元素

当元素的ｄｉｓｐｌａｙ属性被设置为ｉｎｌｉｎｅ－ｂｌｏｃｋ时, 元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:

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

显示效果：

3.3 浮动与定位

3.3.1 元素浮动与清除

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

{ｆｌｏａｔ:ｎｏｎｅ ｜ｌｅｆｔ ｜ｒｉｇｈｔ;}

ｎｏｎｅ ——— 默认值 , 表示元素不浮动 ;

ｌｅｆｔ ——— 元素向左浮动 ;

ｒｉｇｈｔ———元素向右浮动

示例代码，分别对box1,box2,box3元素左浮动

<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);">box3</view>
</view>

<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);">box3</view>
</view>

<view>box1,box2左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid  rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);">box3</view>
</view>

<view>box1,box2,box3左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="float: left;border: 1px solid rgb(234, 0, 255);">box3</view>
</view>

效果如图：

在ＣＳＳ中, ｃｌｅａｒ属性用于清除浮动元素对其他元素的影响, 其基本格式如下:

{clear:left | right | both | none}

ｌｅｆｔ ——— 清除左边浮动的影响 , 也就是不允许左侧有浮动元素 ;

ｒｉｇｈｔ ——— 清除右边浮动的影响 , 也就是不允许右侧有浮动元素 ;

ｂｏｔｈ ——— 同时清除左右两侧浮动的影响 ;

ｎｏｎｅ ——— 不清除浮动。

代码示例：

<view>box1,box2左浮动,box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="clear: left;border: 1px solid rgb(234, 0, 255);">box3</view>
</view>

效果如图：

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

代码如下：

.wxml

<view>box1,box2,box3左浮动,在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px;" class="clear-folat">
<view style="float: left;border: 1px solid rgb(0, 255, 106);">box1</view>
<view style="float: left;border: 1px solid rgb(89, 0, 255);">box2</view>
<view style="float: left;border: 1px solid rgb(234, 0, 255);">box3</view>
</view>

.wxss

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

效果如图：

3.3.2 元素定位

浮动布局虽然灵活, 但无法对元素的位置进行精确的控制。在ＣＳＳ中, 通过ｐｏｓｉｔｉｏｎ属性可以实现对页面元素的精确定位。

{position:static | relative | absolute | fixed}

ｓｔａｔｉｃ———默认值, 该元素按照标准流进行布局;

ｒｅｌａｔｉｖｅ———相对定位, 相对于它在原文档流的位置进行定位, 它后面的盒子仍以标准流方式对待它;

ａｂｓｏｌｕｔｅ———绝对定位, 相对于其上一个已经定位的父元素进行定位, 绝对定位的盒子从标准流中脱离, 它对其后的兄弟盒子的定位没有影响;

ｆｉｘｅｄ———固定定位, 相对于浏览器窗口进行定位;

对box1,box2,box3进行元素静态定位：

<!-- 三个元素均未定位 -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>

效果如图：

对box2进行元素相对定位：

<!-- box2元素相对定位 relative top:30px left:30px -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>

效果如图：

对box2进行元素绝对定位：

<!-- box2元素绝对定位 relative top:30px left:30px -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>

效果如图：

对box2进行元素固定定位：

<!-- box2元素固定定位 fixed top:60px left:30px -->
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:fixed;left:30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>

效果如图：

通过例子我们发现，绝对定位和固定定位的效果相同，这是因为它们的父元素是Page，没有定位。

将，box1,box2,box3的父元素采用相对定位，将box2采用绝对定位，代码如下：

<!-- box1,box2,box3的父元素采用相对,box2元素绝对定位 -->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:absolute;left:30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
</view>

效果如图：

box1,box2,box3的父元素采用相对,box2元素固定定位，代码如下：

<!-- box1,box2,box3的父元素采用相对,box2元素固定定位 -->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border: 1px solid rgb(0, 255, 106);width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid rgb(89, 0, 255);width: 100px;height: 100px;position:fixed;left:30px;top: 30px;">box2</view>
<view style="border: 1px solid rgb(234, 0, 255);width: 100px;height: 100px;">box3</view>
</view>

效果如图：

3.4 fiex布局

ｆｌｅｘ布局是万维网联盟(ＷｏｒｌｄＷｉｄｅＷｅｂＣｏｎｓｏｒｔｉｕｍ, Ｗ３Ｃ) 在２００９年提出的一种新布局方案, 该布局可以简单快速地完成各种可以伸缩的设计, 以便很好地支持响应式布局。ｆｌｅｘ是ｆｌｅｘｉｂｌｅｂｏｘ的缩写, 意为弹性盒子模型, 可以简便、完整、响应式地实现各种页面布局。

容器默认存在两根轴: 水平的主轴(ｍａｉｎａｘｉｓ) 和垂直的交叉轴(ｃｒｏｓｓａｘｉｓ)。主轴的开始位置(与边框的交叉点) 叫做ｍａｉｎｓｔａｒｔ, 结束位置叫做ｍａｉｎｅｎｄ; 交叉轴的开始位置叫做ｃｒｏｓｓｓｔａｒｔ, 结束位置叫做ｃｒｏｓｓｅｎｄ。

项目默认沿主轴排列。单个项目占据的主轴空间叫做ｍａｉｎｓｉｚｅ, 占据的交叉轴空间叫做ｃｒｏｓｓｓｉｚｅ。

3.4.1 容器属性

fiex容器支持的属性有7种：

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

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

（b）ｒｏｗ－ｒｅｖｅｒｓｅ———主轴为水平方向, 起点在右端;

（c）ｃｏｌｕｍｎ———主轴为垂直方向, 起点在顶端;

（d）ｃｏｌｕｍｎ－ｒｅｖｅｒｓｅ———主轴为垂直方向, 起点在底端；

3. flex-wrap

ｆｌｅｘ－ｗｒａｐ用来指定当项目在一根轴线的排列位置不够时, 项目是否换行, 其语法格式如下:

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

nowrap ——— 不换行 , 默认值 ;

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

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

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

ｆｌｅｘ－ｗｒａｐ不同值的显示效果:

4. flex-flow

ｆｌｅｘ－ｆｌｏｗ是ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ和ｆｌｅｘ－ｗｒａｐ的简写形式 , 默认值为ｒｏｗｎｏｗｒａｐ。语法格式如下 :

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

5. justify-content

ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ用于定义项目在主轴上的对齐方式。语法格式如下:

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

ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ ——— 与主轴方向有关 , 默认主轴水平对齐 , 方向从左到右 ;

(a)ｆｌｅｘ－ｓｔａｒｔ ——— 左对齐 , 默认值 ;

(b)ｆｌｅｘ－ｅｎｄ ——— 右对齐 ;

(c)ｃｅｎｔｅｒ———居中;

(d)ｓｐａｃｅ－ｂｅｔｗｅｅｎ ——— 两端对齐 , 项目之间的间隔都相等 ;

(e)ｓｐａｃｅ－ａｒｏｕｎｄ ——— 每个项目两侧的间隔相等。

ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ不同值的显示效果如图：

6. align-items

ａｌｉｇｎ－ｉｔｅｍｓ用于指定项目在交叉轴上的对齐方式 , 语法格式如下 :

.box{align-items:flex-start | flex-end | center | baseline | stretch;}

ａｌｉｇｎ－ｉｔｅｍｓ ——— 与交叉轴方向有关 , 默认交叉由上到下 ;

ｆｌｅｘ－ｓｔａｒｔ ——— 交叉轴起点对齐 ;

ｆｌｅｘ－ｅｎｄ ——— 交叉轴终点对齐 ;

ｃｅｎｔｅｒ ——— 交叉轴中线对齐 ;

ｂａｓｅｌｉｎｅ ——— 项目根据它们第一行文字的基线对齐 ;

ｓｔｒｅｔｃｈ ——— 如果项目未设置高度或设置为ａｕｔｏ , 项目将在交叉轴方向拉伸填充容器 , 此为默认值。

代码如下：

//.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;
}

效果如图：

另外其他效果：

flex-start:

flex-end:

center:

stretch:

7. align-content

ａｌｉｇｎ－ｃｏｎｔｅｎｔ用来定义项目有多根轴线 ( 出现换行后 ) 在交叉轴上的对齐方式 , 如果只有一根轴线 , 该属性不起作用。语法格式如下 :

.box{
 align-content:flex-start | fled-end | center | space-between | space-around | stretch

}

ｓｐａｃｅ－ｂｅｔｗｅｅｎ ——— 与交叉轴两端对齐 , 轴线之间的间隔平均分布;

ｓｐａｃｅ－ａｒｏｕｎｄ ——— 每根轴线两侧的间隔都相等 , 轴线之间的间隔比轴线与边框间隔大一倍。

其余各属性值的含义与ａｌｉｇｎ－ｉｔｅｍｓ属性的含义相同。

(a): flex-start (b): center (c): flex-end

3.4.2 项目属性

容器内的项目支持６个属性：

1.ordex

ｏｒｄｅｒ属性定义项目的排列顺序, 数值越小, 排列越靠前, 默认值为０

.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>order默认为0</view>
<view class="cont1">
  <view class="item" style="order: 1;">1</view>
  <view class="item" style="order: 2;">2</view>
  <view class="item" style="order: 3;">3</view>
  <view class="item">4</view>
</view>
<view>order:0  order:1  order:2  order:3</view>



//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: stretch;
}
.item4{
  height: 120px;
}

效果如图：

2. flex-grow

ｆｌｅｘ－ｇｒｏｗ定义项目的放大比例, 默认值为０, 即不放大。语法格式如下:

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


//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: stretch;
}
.item4{
  height: 120px;
}

效果如图：

3. flex-shrink

ｆｌｅｘ－ｓｈｒｉｎｋ用来定义项目的缩小比例, 默认值为１, 如果空间不足, 该项目将被缩小。

.item{flex-shrink:<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-shrink: 2">2</view>
  <view class="item" style="flex-shrink: 1">3</view>
  <view class="item" style="flex-shrink: 4">4</view>
</view>


//wxss
.cont1{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 240px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: stretch;
}
.item4{
  height: 120px;
}

效果如图：

4. flex-basis

ｆｌｅｘ－ｂａｓｉｓ属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为ａｕｔｏ (即项目的本来大小)。语法格式如下:

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


//.cont1{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 240px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: stretch;
}
.item4{
  height: 120px;
}

效果如图：

5. flex

ｆｌｅｘ属性是ｆｌｅｘ－ｇｒｏｗ、ｆｌｅｘ－ｓｈｒｉｎｋ和ｆｌｅｘ－ｂａｓｉｓ的简写, 其默认值分别为０、１、ａｕｔｏ。语法格式如下:

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

示例代码如下：

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

6. align-self

ａｌｉｇｎ－ｓｅｌｆ属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下:

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

在该属性值中 , 除了ａｕｔｏ以外 , 其余属性值和容器ａｌｉｇｎ－ｉｔｅｍｓ的属性值完全一致。

ａｕｔｏ表示继承容器ａｌｉｇｎ－ｉｔｅｍｓ的属性 , 如果没有父元素 , 则等于ｓｔｒｅｔｃｈ ( 默认值 ) 。

西伯利亚雪橇哈

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
【微信小程序】第二章---第三章总结

logs.wxml：定义了三个标签，分别为view，block和text，其中view标签为容器，block用于绑定 logs数组，而text标签用于显示每一条log。project.config.json：项目配置文件，包含项目名称，AppID等相关信息。logs.json：来配置页面title的内容。logs.wxss：对页面样式进行控制。app.wxss：小程序主样式表文件。index.wxss：配置页面样式。logs.js：定义了logs数组。
复制链接

扫一扫