微信小程序一到六章复习总结

认识微信小程序

简介
微信是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序。2017年1月上线微信

特点
无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
触手可及
用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通。
用完即走
用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。
无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载

场景

简单的业务逻辑
简单是指应用本身的业务逻辑并不复杂。例如，出行类应用“of0小黄车”，用户通过扫描二维码就可以实现租车，该应用的业务逻辑非常简单，服务时间很短暂，“扫完即走”。此外，各类020API，如家政服务、订餐类应用、天气预报类应用，都符合“简单”这个特性。不过，对于业务复杂的应用，无论从功能实现上还是从用户体验上，小程序都不如原生App。
低频度的使用场景
低频度是小程序使用场景的另一个特点。例如，提供在线购买电影票服务的小程序应用“猫眼”，用户对该小程序的使用频度不是很高，就没有必要在手机中安装一个单独功能的App。

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

 小程序的基本目录结构

app.js主负责逻辑
app.json主配置文件
app.wxss主样式文件

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

        project.config.json文件是项目配置文件，包含项目名称、AppID等相关信息。

        pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同拓展名（.wxml、.wxss、.js和.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。

        utils目录用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用

小程序的开发框架

配置文件 

 页面配置文件

 逻辑层文件

 

 冒泡事件

 页面样式文件

 

盒子模型

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

盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和 外边距（margin）4个部分组成。如上图所示。

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

flex布局

      flex布局是Flexible Box的缩写，称为弹性盒布局，是一种布局方式，用来为盒模型提供最大的灵活性，可以应用于容器中，也可以应用于行内元素。

      Flex布局的作用是控制子集全部在主轴上排列，采用Flex布局的元素的父元素称为Flex容器，采用Flex布局的元素的子元素称为Flex项目，是容器的成员。容器默认存在着两根轴：水平主轴X和垂直主轴Y，其中一个为主轴，一个则为侧轴，主轴方向可以通过属性设置，默认情况下水平X轴为主轴。

容器属性

项目属性

组件的定义及属性

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

每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：

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

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-∗、bind∗/catch∗等。

id组件的唯一表示，保持整个页面唯一，不常用。
 class组件的样式类，对应WXSS中定义的样式。
 style组件的内联样式，可以动态设置内联样式。
 hidden组件是否显示，所有组件默认显示。
 data-∗ 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。
 bind∗/catch∗ 组件的事件，绑定逻辑层相关事件处理函数。

容器视图组件 

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

view

view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Interface, UI）组件，通过设置view的CSS属性可以实现各种复杂的布局。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组件。这样做，能通过单击顶部状态栏回到页面顶部。 

swiper

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

icon

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

text

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

progress

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

button

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

radio

单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/ >（单项选择器）和<radio/ >（单选项目）两个组件组合而成，一个包含多个 <radio/ >的<radio-group/ >表示一组单选项，在同一组单选项中<radio/ >是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。它们的属性如下表所示。

checkbox

复选框用于从一组选项中选取多个选项，小程序中复选框由 <checkbox -group/ >（多项选择器）和<checkbox/ >（多选项目）两个组件组合而成。一个<checkbox-group/ >表示一组选项，可以在一组选项中选中多个选项。它们的属性如下表所示。

switch

switch组件的作用类似开关选择器，其属性如下表所示。

 slider

slider组件为滑动选择器，可以通过滑动来设置相应的值，其属性如下表所示。

普通选择器

普通选择器（mode=selector）的属性如下表所示。

多列选择器

多列选择器（mode=multiSelector）允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如下表所示。

时间选择器、日期选择器

省市选择器

省市选择器（mode=region）是小程序的新版本提供的选择快速地区的组件，其属性如下表所示。 

 picker-view

picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过<picker-view-column/ >自定义设置。picker -view组件的属性如下表所示。

input

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

textarea

textarea组件为多行输入框文件，可以实现多行内容的输入。textarea组件的属性如下表所示。

image

image组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、高度为2250 px, image组件的属性如下表所示。

audio

audio组件用来实现音乐播放、暂停等，其属性如下表所示。

camera

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

map

map组件用于在页面中显示地图或路径，常用于LBS(基于位置服务)或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用。

map组件的属性如下表所示。

canvas

canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为300px，高度为225px，同一页面中的canvas-id不能重复，否则会出错。canvas组件的属性如下表所示。

即速应用界面介绍

布局组件

        布局组件用于设计页面布局，主要包括双栏、面板、自由面板、顶部导航、底部导航、分割线和动态分类。

双栏组件

双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不会出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏里面可以添加基本的组件，从而达到整体的布局效果。双栏还可以嵌套双栏，即可以在其中的一个栏里嵌人一个双栏，从而将整体分成3部分（若需要将整体分成4部分，就再嵌套一个双栏，依次类推）。

面板组件

面板组件相当于工个大画板，“用户可以将很多基本（甚至高级）的组件（如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等）放进面板组件里一起管理。

自由面板组件

自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向自由面板内拖入部分组件（包括文本组件、图片组件和按钮组件），也可以拖入任意相关容器组件，用于不规则布局。

顶部导航组件

顶部导航组件固定于页面顶部，用于编辑顶部的导航。常用的手机应用在顶部有一条导航，上面写有手机应用、App的名称或l0g0，以及返回键等。

底部导航组件

底部导航组件固定于页面底部，用于编辑底部的导航。通过底部导航组件可以添加标签、删除标签，同时可以分别设置每个标签的名称、原始图片、点击图片及链接至某一页面。

分割线组件

分割线组件被置于任意组件之间，用于实现分割。

动态分类组件

动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。

网络API

网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口。

 wx.request（Object）接口 用于发起HTTPS请求。
 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关闭。

发起网络请求

wx. request（Object）实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表6-1所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求。

上传文件 

wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其属性值如下表所示。

 下载文件

wx. downloadFile（Object）接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTPGET请求，返回文件的本地临时路径。其相关属性如下表所示。

图片API

图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：

 wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
 wx.previewImage（Object）接口 用于预览图片。
 wx.getImageInfo（Object）接口用于获取图片信息。
 wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。

选择图片或拍照

wx. chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx. saveFile保存图片到本地。其属性值如下表所示。

预览图片

wx. previewImage（Object）接口主要用于预览图片，其相关属性如下表所示。

获取图片信息

wx. getImageInfo（Object）接口用于获取图片信息，其相关属性值如下表所示。

保存图片到系统相册

wx. saveImageToPhotosAlbum（Object）接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum。其相关属性如下表所示。

录音API 

录音API提供了语言控制的功能，主要包括以下两个API接口：

 wx.startRecord（Object）接口用于实现开始录音。
 wx.stopRecord（Object）接口用于实现主动调用停止录音。

开始录音

wx. startRecord（Object）接口用于实现开始录音。当主动调用wx.stopRecord（Object）接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx. saveFile（）接口。其相关参数如下表所示。

 音频播放控制API

音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API：

wx.playVoice(Objec）接口用于实现开始播放语音。

wx.pauseVoice(Objec）接口用于实现暂停正在播放的语音。
wx.stopVoice(Object）联口用于结束播放语言。

播放语音

wx. playVoice（Object）接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。其相关参数如下表所示。

音乐播放控制API

音乐播放控制API主要用于实现对背景音乐的控制，音乐文件只能是网络流媒体，不能是本地音乐文件。音乐播放控制API主要包括以下8个API:
wx.playBackgroundAudio(Object）接口用于播放音乐。
wx.getBackgroundAudioPlayerState(Object）接口，用于获取音乐播放状态。
wx.seekBackgroundAudio(Objecl）接口，用于定位音乐播放进度。
wx.pauseBackgroundAudio(）接口用于实现暂停播放音乐。
wx. stopBackgroundAudio(）接口 用于实现停止播放音乐。
wx. onBackgroundAudioPlay(Cal Back)接口用于实现监听音乐播放。wx.onBackgroundAudioPause(CallBack）接口 用于实现监听音乐暂停。wx.onBackgroundAudioStop(CallBack）接口用于实现监听音乐停止。

文件API

从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API 提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口：
wx.saveFile(Object）接口用于保存文件到本地。
wx. gelSavedFileList(0bject）接口用于获取本地已保存的文件列表。
wx. getSaveFilelnfo(Object）接口 用于获取本地文件的文件信息。
wx. removeSaveFile(Object）接口用于删除本地存储的文件。
wx.openDocument(Object）接口用于新开页面打开文档，支持格式：doc、xls、
ppt、pdf、docx、xlsx、ppts。

保存文件

wx. saveFile(Object)用于保存文件到本地。

获取本地文件列表

wx.getSavedFileList(Object）接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/0108：00：00到当前时间的秒数）文件列表。

获取本地文件的文件信息

wx.getSaveFileInfo(0bject)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx.getFileInfo(Object)接口。

删除本地文件

wx.removeSaveFile(Object）接口用于删除本地存储的文件。

打开文档

wx.openDocument(Object)接口用于新开页面打开文档，支持格式有doc、xls、ppt、pdf、
docx、xlsx、pptx。