微信小程序1-6章总结

第一章 微信小程序概述

1.小程序的特征

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

2.界面功能介绍

（1）工具栏

（2）模拟区

（3）目录文件区

（4）编辑区

（5）调试区

a.Console面板

b.Sources面板

c.Network面板

d.Security面板

e.Storage面板

f.AppData面板

g.Wxml面板

h.Sensor面板

i.Trace面板

z.扩展菜单项

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

一.小程序的基本目录结构

1.主体文件

• app.js  小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
• app.json 小程序公共设置文件，配置小程序全局设置。在文件中不可缺少。
• app.wxss 小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.页面文件

• js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面逻辑。
• .wxml文件 页面结构文件，用于设计页面布局、数据绑定等，类似HTML页面中的.html文件。
• .wxss文件 页面样式表文件，
• .json文件 页面配置文件。

二.小程序的开发框架

三.配置文件

全局配置文件

四.页面样式文件

第三章 页面布局

一.盒子模型

微信小程序的视图层由WXML和WXSS组成。其中，WXSS（WeiXin Style Sheets）是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。

盒子模型是我们在学习页面设计中经常用到的一种思维模型。在CSS中一个独立的盒子模型由内容（content)、内边距(padding)、边框(border)和外边距(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 上外边距、右外边距、底外边距和左外边距。

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

二.块级元素与行内元素

1.块级元素

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

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

2.行内元素

将一个元素的display属性设置为inline后，该元素被设置为行内元素。特点如下：

• 行内元素不背设置高度和宽度，其高度和宽度被内容决定。
• 行内元素内不能放置块级元素，只容纳文本或者其他行内元素。
• 同一块内，行内元素和其他行内元素显示在同一行。

三.flex布局

flex布局主要有容器和项目组成。容器默认存在两根轴：水平的主轴（main axis)和垂直的交叉轴（cross axis）。设置display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。

第四章 页面组件

一.组件的定义及属性

组件是页面视图层的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类基础组件。

组件的语法格式：

<标签名  属性名=”属性值“>内容...</标签名>

• id 组件的唯一表示，保持整个页面唯一。
• class 组件的样式类，对应WXSS中定义的样式。
• style 组件的内联样式，可以动态设置内联样式。
• hidden 组件是否显示，所有组件默认显示。
• data-* 自定义样式，组件触发事件时，会发送给事件处理函数。
• bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数。

二.容器视图组件

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

三.基础内容组件

包括icon、text、progress，主要用于在视图页面中展示图标、文本和进度条等消息。

四.表单组件

表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通，包括button、radio、checkbox、switch、slider、picker、picker-view、input、textarea、label、form。

第五章 即速应用

1.开发流程简单，零门槛制作
登录即速应用的官方网站(www.jisuapp.cn)，进入制作界面，从众多行业模板中选择一个合适的模板。
在模板的基础上进行简单的编辑和个性化制作。
制作完成后，将代码一键打包并下载。
将代码上传至微信开发者工具。
上传成功后，等待审核通过即可。
2.行业模板多样，种类齐全。
3.丰富的功能组件和强大的管理后台。

第六章 API应用

一.网络API

wx.request(Object) 接口  用于将本地资源上传到后台服务器

wx.uploadFile(Object) 接口  用于将本地资源上传到后台服务器

wx.downloadFile(Object) 接口  用于下载文件资源到本地

wx.connectSocket(Object) 接口  用于创建一个WebSocket连接

wx.sendSocketMessage(Object) 接口  用于实现通过WebSocket连接发送数据

wx.closeSocket(Object) 接口  用于关闭WebSocket连接

wx.onSocketOpen(CallBack) 接口  用于监听WebSocket连接打开事件

wx.onSocketError(CallBack) 接口  用于监听WebSocket错误

wx.onSocketMessage(CallBack) 接口  用于实现监听WebSocket接收到服务器的消息事件

wx.onSocketClose(CallBack) 接口  用于实现监听WebSocket关闭

二.多媒体API

多媒体API主要包括图片API、录音API、音频API、音乐播放控制API等，其目的是丰富小程序的页面功能。

三.文件API

wx.saveFile(Object)接口  用于保存文件到本地。
wx.getSavedFileList(Object) 接口  用于获取本地已保存的文件列表。
wx.getSaveFileInfo(Object) 接口  用于获取本地文件的文件信息。
wx.removeSaveFile(Object) 接口  用于删除本地存储的文件。
wx.openDocument(Object) 接口  用于新开页面打开文档，支持格式：doc、xls、ppt、pdf、docx、xlsx、ppts。