第1~6章总结

1.1认识微信小程序

微信小程序（Mini Program），一种不需要下载安装即可使用的应用。小程序嵌于微信之中，用户通过扫描二维码和搜索关键字即可使用，可以被理解为“嵌在微信的超级APP”.

1.无须安装

小程序嵌于微信程序之中，用户在使用过程中无需在应用商店下载安装外部应用.

2.触手可及

用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通.

3.用完即走

用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走.

4.无须卸载

用户在访问小程序后可直接关闭小程序，无需卸载.

小程序通常应用简单的业务逻辑和低频的使用场景。

1.2微信小程序开发流程

注册账户=>准备开发环境=>下载并安装微信开发工具=>开发小程序项目=>运行及发布小程序

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

1.工具栏

在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。

2.模拟区

在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。

3.目录文件区

目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。

4.编辑区

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json文件的操作，使用组合键能提高代码的编辑效率。

5.调试区

调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了九个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项“”是定制与控制开发工具按钮。

2.1小程序基本目结构

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

主题文件
app.js        小程序逻辑文件，主要用来注册小程序全局案例。
app.json    小程序公共设置文件，配置小程序全局设置。
app.wxss   小程序主样式表文件，类似HTML的.css文件。

页面文件（页面文件在页面中不可缺少）

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

2.2小程序的开发框架

视图层（View），由框架设计的标签语言WXML（Weixin Markup Language）和用于描述WXML组件样式的WXSS（WeiXin Style Sheets）组成，他们的关系就像HTML和CSS的关系。

逻辑层（App Service），是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。

数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用。

页面临时数据或缓存：在Page（）中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。setData（）函数的参数接收了一个对象，以（key,value）的形式表示将key在this.data中对应的值改变成value。

文件存储（本地存储）
wx.getStorage     获取本地数据缓存。
wx.setStorage     设置本地数据缓存。
wx.clearStorage   清理本地数据缓存。
网络存储与调用
上传或下载文件API接口，如下：

wx.request            发起网络请求。
wx.uploadFile       上传文件。
wx.downloadFile   下载文件。
调用URL的API接口，如下：

wx.navigateTo       新窗口打开网页。
wx.redirectTo         原窗口打开网页。

2.3创建小程序页面

pages中新建文件，再在文件中创建“.js、.json、.wxss、.wxml”。

2.4配置文件

小程序的全局配置保存在全局配置文件（app.json）中，使用全局配置文件来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值(networkTimeout）以及配置多个切换页（tabBar）等。

{

//设置页面路径

"pages":[ ],

//设置默认页面的窗口表现

"window":{ },

//设置底部tab的表现

"tabBar":{ },

//设置网络请求API的超时间值

"networkTimeout":{ },

//设置是否已开启debug模式

"debug":false

}

2.5逻辑层文件

项目逻辑文件和页面逻辑文件

2.6页面结构文件

数据绑定

1.简单绑定

简单绑定是指用大括号（{{}}）将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

2.运算

在{{}}内可以做一些简单的运算（主要有算术运算、逻辑运算、三元运算、字符串运算等），这些运算均应符合JavaScript运算规则

条件数据绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

1. wx:if条件数据绑定
2. block wx:if条件数据绑定

列表数据绑定

1. wx:for
2. block wx:for

模板

模板代码由wxml组成，因此其定义也是在wxml文件中。

模板定义后即可进行调用。

引用页面文件

imput方式和include方式

页面事件

小程序中的事件是用户的 种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时,事件就会执行逻辑层中对应的事件处理函数。
       要实现这种机制,需要定义事件函数和调用事件。

• 定义事件函数 在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
• 调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现,key(属性名)以bind或catch开头，再加上事件类型，如 bindtap、catchlongtaPo其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡,catch开头的事件绑定可以阻止冒泡事件向上冒泡。value（属性值)是在s中定义的处理该事件的函数名称，如click。

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。

• 冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
• 非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

2.7页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。

1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位px(respnesive pixel)。WXSS规定屏幕宽度为750rpx,在系统数据绑定过程中Ppx会按比例转化为px。

2.样式导入

为了便于管理WXSS文件，我们可以将样式存放在不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。

3.选择器

目前，WXSS仅支持CSS中常用的选择器，如.class、#id、element、::befor、::afert等。

4.WXSS文件与CSS文件由大部分属性名及属性值相同。

3.1盒子模型

一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和外边框(margin）4个部分组成，对padding、border和margin可以进一步细化为上、下、左、右4个部分：

• width和height 内容的宽度和高度。
• padding-top、padding-right、padding-bottom和padding-left 上内边距、右内边距、底内边距和左内边距。
• border-top、border-right、border-bottom和border-left 上边框、右边框、底边框和左边框。
• margin-top、margin-right、margin-right、margin-bottom和margin-left 上外边距、右外边距、底外边距和左外边距

3.2块级元素与行内元素

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

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

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

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

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

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

3.3浮动与定位

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

{float：none|left|right;}

其中，

none——默认值，表示元素不浮动；

left——元素向左浮动；

right——元素向右浮动。

由于浮动元素不再占用源文档流的位置，因此它会对页面中的其他元素排列造成影响。在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下：

{clear:left|right|both|none}

其中：

left——清除左浮动的影响。

right——清除右浮动的影响。

both——同时清除左右两侧浮动的影响。

none——不清除浮动。

元素定位

static——默认值

relative——相对定位

absolute——绝对定位

fixed——固定定位

3.4flex布局

flex布局是万维网联盟(Woorld Wide Web ConsortiumW3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。flex是 flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container),flex布局的所有直接子元素自动成为容器的成员，称为le 项目(flex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置（与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross start。
设置display属性可以将一个元素指定为flex布局，设置 Hlex-direction 属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。

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-reverse;}

其中：

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

row-reverse——主轴为水平方向，起点在右端；

column——主轴为垂直方向，起点在顶端；

column-reverse——主轴为垂直方向，起点在底端。

4.flex-flow

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

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

示例代码如下：

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

5.justify-content

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

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

其中：

justify-content——与主轴方向有关，默认主轴水平对齐，方向从左到右；

flex-start——左对齐，默认值；

flex-end——右对齐；

center——居中；

space-between——两端对齐，项目之间的间隔都相等；

space-around——每个项目两侧的间隔相等。

6.align-items

align-items用于指定项目在交叉轴上的对齐方式，语法格式如下：

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

其中：

align-items——与交叉轴方向有关，默认交叉由上到下；

flex-start——交叉轴起点对齐；

flex-end——交叉轴终点对齐；

center——交叉轴中线对齐；

baseline——项目根据它们第一行文字的基线对齐；

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

 7.align-content

align-content用来定义项目有多跟轴线（出现换行后）在交叉轴上的对齐方式，如果只有一跟轴线，该属性不起作用。语法格式如下：

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

其中：

space-between——与交叉轴两端对齐，轴线之间的间隔平均分布；

space-around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。

其余各属性值的含义与align-items属性的含义相同。

容器内项目支持六个属性：

order：定义项目的排列顺序

flex-grow：定义项目的放大比例（当有多余空间时）

flex-shrink：定义项目的缩小比例（当空间不足时）

flex-basis：定义在分配多余空间之前，项目占据的主轴空间

flex：flex-grow、flex-shrink、flex-basis的简写

align-self：用来设置单独的伸缩项目在交叉轴上的对齐方式

4.1组件的定义及属性

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

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

<标签名 属性名=“属性值”>内容...</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性，但他们也有一些公用的属性，如id、class、style、hidden、data-*、bind*/catch*等。

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

4.2容器视图组件

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

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

scroll-view 

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

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

4.3基础内容组件

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

icon 

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

text 

text组件用于展示内容，类似HTML中的<span>，text组件中的内容支持长按选中，支持转义字符“/”，属于行内元素。

progress

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

4.4表单组件

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

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

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

checkbox 

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

switch 

switch组件的作用类似于开关选择器。

slider 

slider组件为滑动选择器，可以通过滑动来设置相应的值。

picker 
picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。

picker-view 

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

input 

input组件为输入框，用户可以输入相应的信息。

textarea 

textarea组件为多行输入框组件，可以实现多行内容的输入。

label 
label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id，或者将控件放在该标签下，当点击label组件时，就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。label目前可绑定的控件：<button/><checkbox/><radio/><switch/>。

form

from组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<from/>表单中formType为submit的<button/>组件时，会将表单组件中的value值进行提交。

4.5多媒体组件

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

image

image为图像组件，与HTML中的<img/>类似，系统默认image组件的宽度为300px、高度为2250px。

image组件中的mode属性有13种模式，其中缩放有四种，裁剪有九种。

缩放模式

• scaleToFill     不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
• aspectFit       保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以将图片完整地显示出来。
• aspectFill       保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向将会发生截取。
• widthFix         宽度不变，高度自动变化，保持原图高度不变。

裁剪模式

• top                不缩放图片，只显示图片的顶部区域。
• button            不缩放图片，只显示图片的底部区域。
• center            不缩放图片，只显示图片的中间区域。
• left                 不缩放图片，只显示图片的左边区域。
• right               不缩放图片，只显示图片的右边区域。
• top_left          不缩放图片，只显示图片的左上边区域。
• top_right        不缩放图片，只显示图片的右上边区域。
• buttom_left     不缩放图片，只显示图片的左下边区域。
• buttom_right   不缩放图片，只显示图片的右下边区域。

audio 

audio组件用来实现音乐播放、暂停等。

video

video组件用来实现视频的播放、暂停等，视频的默认宽度为300px，高度为225px。

camera

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

4.6其他组件

在小程序中，除了前面介绍的组件以外，map组件和canvas组件比较常用。

map 
map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等功能，不能在croll-view、swiper、picker-view、picker-view、movable-view组件中使用。map组件的polyline属性用来指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等。

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

实现绘图需要3部：

1>创建一个canvas绘图上下文。

var context =wx.createCanvasContext('myCanvas')

2>使用canvas绘图上下文进行绘图描述。

context.setFillStyle('green')    //设置绘图上下文的填充色为绿色
context.fillRect(10.10.200.100)  //方法画一个矩形，填充为设置的绿色

3>画图

context.draw()

5.1即速应用概述

 优势
极速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发功能的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发。据不完全统计在微信小程序正式发布的一年内，在极速应用上打包代码并成功上线的微信小程序已超过五万个。

即速应用的功能特点主要体现在以下几个方面：

开发流程简单，零门槛易上手 

1. 使用即速应用来开发微信小程序的过程非常简单，无需储备相关代码知识，没有开发经验的人也可以轻松上手。
2. 登录即速应用的官方网站（www.jisuapp.cn）,进入制作页面，从众多行业模板中选择一个合适的面板。
3. 在模板的基础上进行简单编辑和个性化制作。
4. 制作完成后，将代码一键打包并下载。
5. 将代码上传至微信开发者工具。
6. 上传成功后等待审核通过即可。
7. 行业模板多样，种类齐全 。

目前，即速应用已经上线60多个小程序行业模板，涉及餐饮、婚庆、旅游、运动、美容、房地产等多个行业。这些小程序行业模板可以有效的帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率。

丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。目前，即速应用有四个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。

即速应用的应用范围主要范围主要包括以下类型：

咨询类：新闻，媒体。
电商类：网购（服装、电器、读书、母婴......）。
外卖类：餐饮及销售。
到店类：餐饮及酒吧。
预约类：酒店、KTV、家教、家政，其他服务行业。

5.2即速应用组件

即速应用界面介绍

登录官网，注册账户后，即可使用即速应用。即速应用的主页面主要分为菜单栏、工具栏、编辑区和属性面板。

菜单栏 
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”用于进入后台管理页面，“帮助”用于提示帮助功能，“客服”用于进入客服界面，“历史”用来恢复前项操作，“保存”用来保存已制作的内容，“生成”选项用于实现小程序打包上线设置。

工具栏 
工具栏包括“页面管理”和“组件库”两个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制和删除等操作。“组件库”有九个基础组件、七个布局组件、十八个高级组件和两个其他组件。

编辑区 
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右侧的“前进”“后退”可以进行恢复操作，“模板”选项可以用来选择模板，“元素”选项可以用来显示页面中的组件及层次关系，“数据”选项可以用来进行页面数据管理，“模块”可以用来选择模块。

属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件样式，不同组件有不同的样式需要设置。

应用组件 
即速应用提供了大量的组件供用户快速布局页面，包括7个布局组件、9个基本组件、18个高级组件和2个其他组件。

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

双栏组件 

双栏组件用来布局整体，它可以把一个区域分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不会出现。双栏里面可以添加基本的组件，从而达到整体的布局效果。双栏还可以嵌套双栏，可以在其中一个栏里嵌入一个双栏从而将整体分成三部分。

面板组件

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

自由面板组件 

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

顶部导航组件

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

底部导航组件 

底部导航组件固定于页面底部，用于编辑底部的导航。

分割线组件 

底部导航组件分割线组件被放置于任意组件之间，用于实现分割。

动态分类组件

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

基本组件

基本组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、分类、图片、列表、图文集和视频。

文本组件 

文本组件用于展示文字、设置点击事件，是小程序页面中最常用的组件。

图片组件 

图片组件用于在页面中展示图片。

按钮组件 

按钮组件用于在页面中设置按钮。

标题组件 

标题组件用于在页面中设置标题。

轮播组件 

轮播组件用于实现图片的轮播展示。

单击“添加轮播分组”按钮进入后台管理，然后点击“轮播管理”→→“新建分组”选项可以创建轮播分组。分别填写“分组名称”和“分组描述”，单击“确定”按钮进入轮播管理界面。

分类组件 
分类组件可以设置不同内容展示在不同类别中，还可以添加、删除分类的个数及进行相应的设置。

图片列表组件 
图片列表组件可以将图片以列表的形式展示，还可以设置图片的名称、标题和点击事件。

图文集组件 
图文及组件用于展示图片、标题和简介。

视频组件
视频组件用于展示视频。

高级组件

高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改。下面介绍几种常用的组件。

动态列表组件 

动态列表组件是容纳基础组件来展示后台数据的容器，通过添加基础组件来展示对应的后台数据。

要使用动态列表组件，必须在后台进行数据管理，单击“管理对象”按钮，进入管理后台。

单击“新增数据对象按钮”，进入“数据对象列表”页面。

单击“添加字段"按钮,添加相应字段。

单击"保存"按钮并返回,进入"对象管理"页面。

单击“数据管理”按钮，进入“数据管理”页面。

单击“添加数据”按钮新建数据，进入“添加数据”页面。

添加相应数据并保存，继续添加所需数据。

退回到编辑页面，为了方便布局，拖拽“自由面板”组件到动态列表中，然后拖拽一个图片和两个文本组件到自由面板组件。嗯在动态列表属性面板的绑定数据对象中选择数据对象，同时图片组件绑定数据对象样式字段，文本组件分别绑定数据对项的名称和价格字段。

个人中心组件
个人中心组件显示个人相关信息的组件，包括图像、昵称、我的订单、收货地址、购物车等。

动态表单组件 
动态表单组件相当于HTML中的<from>标签,是一个容器组件,可以添加子表单组件和基本组件,用来收集用户提交的相关信息给后台数据对象。

在编辑页面添加相应的动态表单子组件。单击“管理对象”按钮，添加数据对象列表前端提交数据可以通过后台进行查看并统计。

评论组件 
评论组件提供信息发布或回复信息的组件。

计数组件 
技术组件可以用于点赞、统计浏览量等类似的计数功能。

地图组件 
地图组件用于显示指定地址的地图，常用于显示定位及导航功能。

城市定位组件 
城市定位组件通常与列表类组件搭配使用，常见搭配有动态列表和商品列表。例如，城市定位组件与商品列表搭配，可以实现通过城市定位来搜索出某具体位置信息下的商品列表。

悬浮窗组件
悬浮窗组件的固定搭配有客服我的订单购物车回到顶部悬浮窗组件通常出现在个人中心或商品列表页面。

其他组件

其他组件包括音频组件和动态容器组件。

音频组件 

音频组件用于播放音乐（每一个页面有一个音频组件即可）手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐，也可以上传本地音频进行更换。

动态容器组件

动态容器组件用于动态页面，及所在页面绑定的数据对象。动态容器组件可以添加多种组件——文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件。其中文本组件和图片组件可以绑定相应的数据对象字段（填充相应动态数据），若有技术组件，则会自动与动态容器失联。

后台管理
即速应用后台提供了非常强大的后台管理理，开发者在后台进行修改操作就可以让数据即时更新，开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具、多商家管理等功能。

数据管理
数据管理包括数据总览、访客分析和传播数据功能。
数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图。

访客分析是以图例的形式来展示用户从微信的哪个模块来访问及访问的次数、比例、用户来源地区、用户访问时间及使用设备等，便于管理者更好地做好营销工作。

传播数据主要是用于提供新老访客的比例1，以及访客使用哪些主要平台打开应用的次数及占比。

分享设置

分享设置主要提供可以分享应用的方式。

5.3即速应用后台管理

用户管理

用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能。

应用数据
应用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据。

轮播管理
轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容。

 分类管理
分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商。

商品管理
商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能。

经营管理
经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营。

营销工具
营销工具是小程序营销推广的有力工具，主要有会员卡、优惠券、积分、储值、推广、秒杀、集集乐、拼活动、大转盘、砸金、刮乐等。这些营销工具都需要事前在后台合理设置后，才能在活动中发挥更大的作用。

多商家管理
多商家管理是即速应用为有众多商家的商城(如“华东商城”“义乌商城”等)开设的管理功能，方便管理者统计每家店铺的订单及进行收益分析。

5.4上传打包

进入极速应用后台管理，选择左边选项“分享设置”按钮，单击“微信小程序”选项。

选择代码包下载选项，单击确定按钮。通过"微信公众平台→小程序→设置→开发设置获取APP ID和APP Secret在"服务器配置"中填写相关信息,选择相应分类,单击“打包”按钮即可成功打包。

单击“下载”按钮，即可下载该小程序代码包。

上传
打开微信web开发者工具，新建项目，并填写相关内容。其中，项目目录为下载包解压后的目录。单击“确定”按钮，打开小程序代码，编译无误后，填写该项目的版本号，单击“上传”按钮即可实现该小程序代码上传，上传成功后，打开微信公众平台的“开发管理”界面就可以看到该小程序的版本信息。待审核通过后，即可在“微信”→“发现”→“小程序”中搜索到该小程序。

6.1网络API

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求小程序要有与后台交互的能力。微信原生API接口或第三方API提供了各类接口实现前后端交互。

网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。

• 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.onSocketMessage(CallBack)接口 用于实现监听WebSocket关闭。

6.2多媒体API

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

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

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

wx.chooseImage(Object)接口用于从本地相册选择图片或者使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx.saveFile保存图片到本地。 若调用成功，则会返回tempFilePaths和tempFIles,tempFilePaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size。

wx.saveImageToPhotoAlbum(Object)接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum。

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

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

开始录音 
wx.startRecord(Object)接口用于实现开始录音。当主动给调用wx.stopRecord(Object)接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。驼腰持久保持，则需要调用wx.saveFile()接口。

停止录音  
wx.stopRecord(Object)接口用于实现主动调用停止录音。

示例代码：

 wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
    },
    fail:function(res){
 
    }
  })
  setTimeout(function(){
    wx.stopRecord()
  },100000)

音频播放控制API

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

wx.playVoice(Object)接口 用于实现开始播放语音。
wx.pauseVoice(Object)接口 用于实现暂停正在播放的语音。
wx.stopVoice(Object)接口 用于结束播放语音。

音乐播放控制API

音乐播放控制API主要用于实现对背景音乐的控制，音乐文件只能时网络流媒体，不能是本地音乐文件。音乐播放控制API主要包括以下8个API：

• wx. playBackgroundAudio(Object)接口 用于播放音乐。
• wx. getBackgroundAudioPlayerState(Object)接口 用于获取音乐播放状态
• wx. seek BackgroundAudio(Object)接口 用于定位音乐播放进度
• wx. pauseBackgroundAudio()接口 用于实现暂停播放音乐
• wx. stopBackgroundAudio()接口 用于实现停止播放音乐
• wx. onBackgroundAudioPlay(CallBack)接口 用于实现监听音乐播放，通常被wx. playBackgroundAudio(Object)方法触发，在CallBack中可改变播放图标。
• wx. onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被wx. pauseBackgroundAudio()方法触发。在CallBack中可以改变播放图标。
• wx. onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停止或wx.seek BackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标。

6.3文件API

从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的功能，，主要包括以下五个接口：

• wx.saveFIle(Object)接口  用于保存文件到本地。
• wx.getSavedFileList(Object)接口  用于获取本地已保存的文件列表。
• wx.getSaveFileInfo(Object)用于获取本地文件的文件信息,此接口只能用于获取已保存到本地的文件，若需要获取临时文件，则使用wx.getFileInfo(Object)接口。
• wx.removeSaveFile(Object)接口  用于删除本地储存的文件。
• wx.openDocument(Object)接口  用于新开页面打开文档，支持格式：doc、xls、ppt、pdf、docx、xlsx、pptx。

6.4本地数据及缓存API

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久储存的，但最大不超过10MB，其目的是提高加载速度。数据缓存的接口主要有4个：

• wx.setStroage(Object)或wx.setStrorage(key,data)接口  用于设置缓存数据。
• wx.getStorage(Object)或wx.get.StorageSync(key)接口  用于缓存数据。
• wx.removeStorage(Object)或wx.removeStorageSync(key)接口  用于删除指定缓存数据。
• wx.cleearStorage()或wx.clearStorageSync()接口  用于清除缓存数据。
• 其中，带Sync后缀的为同步接口，不带Sync后缀的为异步接口。

6.5位置信息API

小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局制定的地理信息系统的坐标系，又称火星坐标系。默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口：

wx.getLocation(Object)接口  用于获取地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息。
wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度等信息。
wx.openLocation(Object)接口  用于通过地图显示位置。

6.6设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API：

• wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口  用于获取系统信息。接口调用成功后，返回系统相关信息。
• wx.getNetworkType(Object)接口  用于获取网络类型。如果wx.getNetworkType()接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）。
• wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化时，返回当前网络状态类型及是否有网络连接。
• wx.makePhoneCall(Object)接口  用于拨打电话。
• wx.scanCode(Object)接口用于调起客户端扫码页面，扫描成功后返回相应的内容。