1~6章复习

第一章

微信小程序概述

1.3开发功能区介绍

界面划分为五大功能区：工具栏、模拟区、目录文件区、编辑区、和调试区

其中调试区包括：console Source Network......

第二章

微信小程序开发基础

2.1小程序的基本目录结构： √会

2.2小程序开发框架

视图

wxml与wxss编写

逻辑

app.js

数据层

page()中

2.3创建小程序页面

2.3.1在主目录下的pages目录下创建

        并在app。js中注册

2.3.2：会

2.4配置文件

2。4.1全局配置文件内容整体结构如下：

window配置项

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },

 2.5.1项目逻辑文件

第三章

一、盒子

像盒子一样

二、元素

1、块级元素

a、一块只占一行

b、块级默认高度由内容决定，除非自定义高度。

c、块级元素的默认宽度是父级元素的内容区域宽度，除非自定义宽度。

d、块级元素可自定义宽高边距

e、可容纳块级和行内元素

2、行内元素

a、不能设置行高宽，

b、在同一行内

c、行满了才换下一行

3、行内块元素

a、在同一行

b、且可以设置宽高 

 三、浮动与定位

1、浮动

2、清楚

3、定位

四、flex弹性布局

1、容器属性 

display:

flex（块级）inline-flex（行内块）

flex-direction：

row（水平方向，左边起）row-reverse（水平方向，右边起）column（垂直，上边）column-reverse（垂直，下边）

 

flex-warp：换行

nowrap----不换行    wrap----换行  wrap-reverse----从下到上 ，换行

 

 flex-flow：

集成flex-direction&flex-warp的属性
justify-content（主轴）：
定义项目在主轴上的对其方式

flex-start：左起，默认值

flex-end----------右起
space-between----------两端对其  项目之间的间隔相等

space-around----------项目两侧的间隔相等

a'lign-items（交叉轴）
flex-start：交叉起点对齐

flex-end----------交叉终点对齐
center-----交叉轴中线对齐；

baseline--------根据他们第一行文字的基线对其

streth---------如果项目末设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器此为默认值

 

align-content 

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

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

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

space-around每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框间隔大,

第四章： 页面组件总结 

 4.1 组件的定义及属性

概念：组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。
每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：

<标签名  属性名=“属性值”>内容...</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-∗、bind∗/catch∗等。
■ id组件的唯一表示，保持整个页面唯一，不常用。
■ class组件的样式类，对应WXSS中定义的样式。
■ style组件的内联样式，可以动态设置内联样式。
■ hidden组件是否显示，所有组件默认显示。
■ data-∗ 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。
■ bind∗/catch∗ 组件的事件，绑定逻辑层相关事件处理函数。

4.2 容器视图组件

概念：容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。

4.2.1 view

概念：view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Interface, UI）组件，通过设置view的CSS属性可以实现各种复杂的布局。

 

4.2.2  scroll-view

通过设置scroll-view组件的相关属性可以实现滚动视图的功能，

 

【注意】

（1）在使用竖向滚动时，如果需要给scroll -view组件设置一个固定高度，可以通过WXSS设置height来完成。
（2）请勿在scroll-view组件中使用textarea、map、canvas、video组件。
（3）scroll-into-view属性的优先级高于scroll-top。
（4）由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。
（5）如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。 

 

4.2.3 swiper

概念：swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/ >和<swiper-item/ >两个标签组成，它们不能单独使用。<swiper/ >中只能放置一个或多个<swiper-item/ >，若放置其他组件则会被删除；<swiper-item/ >内部可以放置任何组件，默认宽高自动设置为100%。swiper组件的属性如表4-3所示。

 

4.3 基础内容组件

概念：基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息。

4.3.1 icon

概念：icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表4-4所示。

 

 

4.3.2  text 

概念：text组件用于展示内容，类似HTML中的<span >, text组件中的内容支持长按选中，支持转义字符“\”，属于行内元素。text组件的属性如表4-5所示。

 

  

4.3.3 progress

概念：progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素，其属性如表4-6所示。

 

4.4 表单组件

概念：表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在<form/ >标签中使用，还可以作为单独组件和其他组件混合使用。

4.4.1 button

概念：button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说，在一个程序中一个按钮至少有3种状态：默认点击（default）、建议点击（primary）、谨慎点击（warn）。在构建项目时，应在合适的场景使用合适的按钮，当<button>被<form/ >包裹时，可以通过设置form-type属性来触发表单对应的事件。button组件的属性如表4-7所示。

                                                    图4-7    button组件的属性

 

 

 

4.4.8 input

input组件为输入框，用户可以输入相应的信息，其属性如表4-18所示。

4.4.11 form

概念：form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/ >表单中formType为submit的<button/ >组件时，会将表单组件中的value值进行提交。form组件的属性如表4-20所示。
                                                  表4-20 form组件属性

    

4.5 多媒体组件

多媒体组件包括image（图像）、audio（音频）、video（视频）、camera（相机）组件，使用这些组件，可以让页面更具有吸引力。

4.5.4 camera

camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。camera组件的属性如表4-24所示。