第一到六章总结

第一章总结

小程序简历

小程序、订阅号、服务号、企业微信(企业号)属于微信公众平台的四大生态体系它们面向不同的用户群体，应用于不同的方向和用途。小程序是微信的一种新的开发能力具有出色的用户使用体验，可以在微信内被便捷地获取和传播；订阅号为媒体和个人提供种新的信息传播方式，构建信息发布者与浏览者之间更好的沟通与管理模式；服务号为企和组织提供更强大的服务与用户管理能力，帮助企业快速实现全新的公众号服务平台；企微信(公众号)为企业提供专业的通信工具、丰富的办公应用与应用程序接口(ApplicatProgramming Interface, API)，助力企业高效沟通与办公

小程序特征

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

微信小程序功能介绍

  1.工具栏

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

2. 模拟区

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

3.目录文件区

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

4.编辑区

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

5. 调试区

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

1)Console面板Console面板是调试小程序的控制面板，当代码执行出现错误时，错误信息将显示在Console面板中，便于开发者排查错误。另外，在小程序中，开发者可以通过console.log语句将信息输出到Console面板中。此外，开发者可以在Console面板直接输入代码并调试。

2)Sources面板Sources面板是源文件调试信息页，用于显示当前项目的脚本文件，如图1-26所示调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮。

Sources面板中显示的代码是经过小程序框编译过的脚本文件，开发者的代码会被包含在define函数中。对于Page代码，在文件尾部通过reguire函数主动调用。

3)Network面板Network面板是网络调试信息页，用于观察和显示网络请求request和socket等网络相关的详细信息。

4)Security面板Security面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题。如果设置安全论证，则会显示“Thesecurityofthispageisunknown.”

5)Storage面板Storage面板是数据存储信息页，开发者可以使用wx.setStorage或者wx.setStorageSync将数据存储到本地存储，存储在本地存储中的变量及值可以在Storage面板中显示。

6)AppData面板AppData面板是实时数据信息页，用于显示项目中被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更情况反映到前端界面。

7)Wxml面板Wxml面板是布局信息页，主要用于调试Wxml组件和相关CSS样式，显示Wxml转化后的界面。Wxml面板调试区的左侧部分是Wxml代码，右侧部分是该选择器的CSS样式。

8)Sensor面板Sensor面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现用于调试重力感应API。

9）Trace面板Trace面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android)设备的路由信息。

10)扩展菜单项最右边的扩展菜单项“：”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息

第二章总结

小程序的基本目录结构

我们以第1章新建的系统默认示例项目为参考，了解微信小程序项目的基本目录结构。如图2-1所示，在微信小程序的基本目录结构中，项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.json、app.wxss和project.config.json)。
在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。
app.js  小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
app.json  小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

app. wxss  小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

1、主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。

app.js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。

app.json小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

app.wxss小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2、页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。

.js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。

.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。

.json文件页面配置文件。该文件在页面中不可缺少

小程序的开发框架

微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScriptAPI，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言WXML(WeiXinMarkupLanguage)和用于描述WXML组件样式的WXSS(WeiXinStyleSheets)组成，它们的关系就像HTML和CSS的关系。逻辑层(AppService)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

MINA框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。

微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Native)的组件承载。所以，小程序MINA框架有着接近原生App的运行速度，对Android端和iOS端能呈现得高度一致，并为开发者准备了完备的开发和调试工具

1.视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元

2.逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集thi微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信对队做了适当修改，以便提高开发小程序的效率。主要修改包括：

(1)增加app()和Page()方法，进行程序和页面的注册。

(2)提供丰富的API，如扫一扫、支付等微信特有的能力。

(3)每个页面有独立的作用域，并提供模块化能力。

逻辑层就是通过各个页面的.is脚本文件来实现的。由于小程序并非运行在浏览器中所以JavaScript在Web中的一些功能在小程序中无法使用，如document、window等。

开发者开发编写的所有代码最终会被打包成独立的JavaScript文件，并在小程序启动!时候运行，直到小程序被销毁

3.数据层

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

1.页面临时数据或缓存

在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

setData()函数的参数接收一个对象，以(key，value)的形式表示将key在this.data中对应的值改变成value。

2.文件存储(本地存储)

使用数据API接口，如下：

wx.getStorage获取本地数据缓存。

wx.setStorage设置本地数据缓存。

wx.clearStorage清理本地数据缓存。

3.网络存储与调用

上传或下载文件API接口，如下：

wx.request发起网络请求。

wx.uploadFile上传文件。

wx.downloadFile下载文件。

调用URL的API接口，如下：

wx.navigateTo新窗口打开页面。

wx.redirectTo原窗口打开页面

第三章总结

盒子模型

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

块级元素

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

行内元素

1)行内元素不能被设置高度和宽度，其高度和宽度有内容决定。

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

(3)同一块内，行内元素和其他行内元素显示在同一行

行内块元素 

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

浮动与定位

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本格式如下：
float:none lleft lright;/
其中，none——默认值，表示元素不浮动；
left——元素向左浮动；
right——元素向右浮动。

当box3左浮动后，父元素的边框未能包裹box3元素。这时，可通过清除浮动来解决。
由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响。在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下：
clear:left lright both none
其中，left——清除左边浮动的影响，也就是不允许左侧有浮动元素；
right——清除右边浮动的影响，也就是不允许右侧有浮动元素；
both——同时清除左右两侧浮动的影响；
none——不清除浮动。

元素定位 

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。基本格式如下：
position:static |relative labsolute lfixed)
其中，static——-默认值，该元素按照标准流进行布局；
relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它；
absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响；
fixed-一固定定位，相对于浏览器窗口进行定位。
对box1、box2、box3进行元素相对定位

flex布局

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

1、display
display用来指定元素是否为flex布局，语法格式为：
  .box {display:flex linline -flex;}

2、flex-direction
flex -direction用于设置主轴的方向，即项目排列的方向，语法格式为：
  .box {flex-direction:row lrow-reverse lcolumn lcolumn-reverse;}

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

row-reverse——主轴为水平方向，起点在右端；
column——主轴为垂直方向，起点在顶端；
column-reverse——主轴为垂直方向，起点在底端。

3,flex-wrap
flex -wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下：

.box {flex -wrap:nowrap lwrap lwrap -reverse;}
其中，nowrap——不换行，默认值；
wrap- 换行，第一行在上方；
wrap -reverse-—换行，第一行在下方。
当设置换行时，还需要设置align-item属性来配合自动换行，但align-item的值不能为‘stretch”。

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

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

5，justify-con 
justify-content用于定义项目在主轴上的对齐方式。语法格式如下
.box { justify -content:flex -start |flex - end |center |space - between |space -around;}

其中，justify-content——与主轴方向有关，默认主轴水平对齐，方向从左到右；
a, flex- start——左对齐，默认值；
c, flex-end——右对齐；
b，center——居中；
d, space-between——两端对齐，项目之间的间隔都相等；
e, space-around——每个项目两侧的间隔相等。

6,align-items
align-items用于指定项目在交叉轴上的对齐方式，语法格式如下：
.box {align-items:flex -start |flex -end lcenter baseline lstretch;}

其中，align-items——与交叉轴方向有关，默认交叉由上到下；
flex-start——交叉轴起点对齐；
flex-end——交叉轴终点对齐；
center——交叉轴中线对齐；
baseline——项目根据它们第一行文字的基线对齐；
stretch——如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

7，align-content
align -content用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下：
. box{ align – content: flex – start lflex – end | center |space – between space -around |stretch}
      其中，space-between—与交叉轴两端对齐，轴线之间的间隔平均分布：
space-around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。
其余各属性值的含义与align-items属性的含义相同。

项目属性

1，order 
order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。语法格式如下：
.item{order: <number>;}

2,flex-grow
flex-grow定义项目的放大比例，默认值为0，即不放大。语法格式如下：
.item{flex-grow:<number>;}

3,flex-shrink 
flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小。语法格式如下：
.item {flex-shrink:<number>;}

4，flex-basis

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。语法格式如下：
.item {flex-basis:<number > lauto;}

5,flex 
flex属性是flex-grow、flex-shrink 和flex-basis的简写，其默认值分别为0、1、auto。语法格式如下：
item  {flex:<flex-grow＞l<flex-shrink＞|<flex-basis＞;}

示例代码如下：
item  {flex:auto；}//等价于.item {flex:1 1 auto；}
item flex:none； }//等价于.item {flex:0 0 auto; }

6,align-self
align-self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下：
.item { align - self:auto lflex - start lflex - end |center |baselinestretch;}
在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。auto 表示继承容器align-items的属性，如果没有父元素，则等于stretch(默认值)。

第四章总结

组件的定义及属性

    组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。
       每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：
                    <标签名 属性名=”属性值”>内容···<标签名>
        组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-*、bind*/catch*等。
       id 组件的唯一表示，保持整个页面唯一，不常用。
       class 组件的样式类，对应WXSS中定义的样式。
       style 组件的内联样式，可以动态设置内联样式。
       hidden 组件是否显示，所有组件默认显示。
       data-* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值。
       bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数。

容器视图组件

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

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

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

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

基础内容组件 

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

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

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

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

表单组件

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

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

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

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

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

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

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

1.普通选择器

2.多列选择器

多列选择器(mode=multiSelector)允许用户从不同列中选择不同的选择项，其选项是
维数组或数组对象。

3.时间选择器、日期选择器
时间选择器(mode=time)可以用于从提供的时间选项中选择相应的时间

日期选择器(mode=date)可以用于从提供的日期选项中选择相应的日期

4.省市选择器
省市选择器(mode=region)是小程序的新版本提供的选择快速地区的组件

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

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

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

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

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

多媒体组件

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

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

mage组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。

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

2.裁剪模式
top   不缩放图片，只显示图片的顶部区域。
bottom   不缩放图片，只显示图片的底部区域。 center   不缩放图片，只显示图片的中间区域。
left   不缩放图片，只显示图片的左边区域。
right   不缩放图片，只显示图片的右边区域。
top_left   不缩放图片，只显示图片的左上边区域。
top_right   不缩放图片，只显示图片的右上边区域。
bottom_left   不缩放图片，只显示图片的左下边区域。
bottom_rightt   不缩放图片，只显示图片的右下边区域。

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

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

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

其他组件

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

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

map 组件的markers属性用于在地图上显示标记的位置

map组件的polyline属性用来指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等

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

实现绘图需要3步：
(1)创建一个canvas绘图上下文。
var context=wx.createCanvasContext('myCanvas')
(2)使用 canvas绘图上下文进行绘图描述。
context.setFillStyle( green') //设置绘图上下文的填充色为绿色context.fillRect(10, 10, 200, 100) //方法画一个矩形，填充为设置的绿色
(3)画图。
context.draw()

第五章总结

即速应用概述

即速应用的优势

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

1.开发流程简单，零门槛制作

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

2. 行业模板多样，种类齐全

即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。
这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率。

3. 丰富的功能组件和强大的管理后台

即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算：社区体系可以实现评论留言和话题管理；多商家系统可以实现分店统一管理、多门店统一运营；营销工具可以实现会员卡、优惠券的设置等营销方式……
目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。
即速应用的应用范围主要包括以下类型：
(1)资讯类：新闻、媒体。
(2)电商类：网购(服装、电器、读书、母婴……)。
(3)外卖类：餐饮及零售。
(4)到店类：餐饮及酒吧。
(5)预约类：酒店、KTV、家教、家政，其他服务行业。

即速应用界面介绍

登录即速应用官网，单击“注册”按钮，在画面填写相应信息，即可完成注册。完成注册后，即可登录账号，使用即速应用。

即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板。
1.菜单栏
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史”选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置。

2. 工具栏
工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件。3. 编辑区
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板，“元素”选项可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块。
4. 属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件内容及点击事件：“组件样式”选项卡用来设置组件的样式，不同组件有不同的样式需要设置。

即速应用组件

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

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

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

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

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

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

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

通过底部导航组件可以添加标签、删除标签，同时可以分别设警每个标签的名称、原始
图片、点击图片及链接至某一页面；通过组件面板可以进行组件背景色、图片及文字的设置。

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

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

基本组件

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

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

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

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

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

5.轮播组件
轮播组件用于实现图片的轮播展示。
单击“添加轮播分组”按钮进入管理后台，然后单击“轮播管理”→“新建分组”选项可以创建轮播分组。
分别填写“分组名称”和“分组描述”。

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

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

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

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

视频组件提供网页应用、小程序和云服务3种视频来源。网页应用使用视频通用代码来
确定视频来源。例如，打开优酷网站，找到需要的视频，进入“分享给朋友”页面，通用代码就显示出来。
单击“复制通用代码”按钮，把复制好的通用代码粘贴到文本框中，保存后即可在小程序项目中添加该视频。

高级组件

高级组件通作需婴后白数期，通过设置后台数据来实现数据后台化，让小程序的数据随
时更新，及时修改，如图5-32所示。下面介绍其中的儿种常用组件。

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

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

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

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

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

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

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

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

其他组件

其他组件包括音频组件和动态容器组件
1.音频组件
音频组件用于播放音乐（每个页而有一个音频组件即可），手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐，也可以上传本地音频进行更换。

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

即速应用后台管理

即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即
时更新，开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具 多商家管理等功能。
1.数据管理
数据管理包括数据总览、访客分析和传播数据功能。
数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及训览量的线图

访客分析是以图例的形式来展示用户从微信的哪个模块来访问及访问的次数、比例、户来源地区、用户访问时间及使用设备等，便于管理者更好地做好营销工作。
传播数据主要是用于提供新老访客的比例，以及访客使用哪些主要平台打开应用的次及占比。
2. 分享设置
分享设置主要提供可以分享应用的方式。

4.应用数据
应用数据是后台管理的主要内容，前端组件（动态列表、动态表单）的数据都是通过
在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据。
5.轮播管理
轮播管理是前端软播组件的后台数排管理器，通过软播管理来设警前端软播组件展示的
图片内容。
6、分类管理
分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实
现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商。
7、商品管理
商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品
管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单
统计、账单明细、运费管理和评价管理功能。は
8.经营管理
经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营。
9.营销工具
营销工具是小程序营销推广的有力工具，主要有会员卡、优惠券、积分、储值、推广、秒杀、集集乐、拼团活动、大转盘、砸金蛋、刮刮乐等。这些营销工具都需要事前在后台合理设置后，才能在活动中发挥更大的作用。
10. 多商家管理
多商家管理是即速应用为有众多商家的商城（如“华东商城”“义乌商城”等）开设的管理功能，方便管理者统计每家店铺的订单及进行收益分析。

第六章总结

网络API

 微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器这就要求微信小程序要有与后台进行交互的能力。微信原生API接口或第三方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关闭。
       在本节，我们将介绍常用的3个网络API。

发起网络请求

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

上传文件

wx.wploadFile(Objecl)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST 请求

下载文件

wx.downloadFile(Objcel)接口用于实现从开发者服务器下载文件资源到本地，在客户端
直接发起一个 HITIP GEr请求，返回文件的本地临时路径

多媒体API

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

图片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(Obiect)接口用于实现开始录音。当主动调用 wx.stopRecord(Object)接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx.saveFile()接口。

停止录音 

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

音频播放控制API

音频播放控制 API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API：
wx.playVoice(Object)接口 用于实现开始播放语音。
wx. pauseVoice(Object)接口 用于实现暂停正在播放的语音。
wx. stopVoice(Object)接口 用于结束播放语音。

播放语音

wx.playVoice(Object)接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放

暂停播放

wx.pauseVoice(Object)用于暂停正在播放的语音。再次调用wx.playVoice(Object)播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用wx.stopVoice(Object)。

结束播放

 wx. stopVoice(Object)用于结束播放语音。

音乐播放控制API

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

1.播放音乐
wx.playBackgroundAudio(Object)用于播放音乐，同一时间只能有一首音乐处于播放状态

2.获取音乐播放状态
wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态

3.控制音乐播放进度
 wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度

4.暂停播放音乐
wx. pauseBackgroundAudio() 接口用于暂停播放音乐。

5.停止播放音乐
wx. stopBackgroundAudio() 接口用于停止播放音乐。

6.监听音乐播放
wx.onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放，通常被wx.playBack-
groundAudio(Object)方法触发，在CallBack中可改变播放图标。

7.监听音乐暂停
wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被wx.pause.
BackgroundAudio()方法触发。在CallBack中可以改变播放图标。

8.监听音乐停止
wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停止或wx.seekBackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标。

文件API

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

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

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

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

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

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

本地数据及缓存API

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

wx.setStorage(Object)或wx.setStorageSync(key,data)接口用于设置缓存数据。wx.getStorage(Object)或wx.getStorageSync(key)接口用于获取缓存数据。wx.removeStorage(Object)或wx.removeStorageSync(key)接口用于删除指定缓存数据。wx.clearStorage()或wx.clearStorageSync()接口用于清除缓存数据。其中，带Sync后缀的为同步接口，不带Sync后缀的为异步接口。

1、保存数据
1.wx.setStorage
wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来 key对应的内容。

2.wx.setStorageSync(key,datd)
wx. setStorageSync(key, data)是同步接口，其参数只有 key 和 dala。

2、获取数据
1.wx.getStorage(Object)
wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。

2.wx. getStorageSync(key) 
wx. getStorageSync(key)从本地缓存中同步获取指定key对应的内容。其参数只有key。

3、删除数据
1.wx. removeStorage(Object)
wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。

2.wx.removeStorageSync(key)
wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key。

4、清空数据
1.wx.clearStorage()
wx.clearStorage()接口用于异步清理本地数据缓存，没有参数。

2.wx.clearStroageSync()
wx.clearStroageSyne()接口用于同步清理本地数据缓存。

位置信息API

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

wx.getLocation(Object)接口用于获取位置信息。

wx.chooseLocation(Object)接口用于选择位置信息。

wx.openLocation(Object)接口用于通过地图显示位置。

1、获取位置信息
wx.getLocation(Object)接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息

2、选择位置信息
wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。

3、显示位置信息
wx.openLocation(Object)接口用于在微信内置地图中显示位置信息

设备相关API

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

wx. getNetworkType(Object)接口 用于获取网络类型。
wx.onNetworkStatusChange(CallBack)接口 用于监测网络状态改变。
wx.makePhoneCall(Object)接口 用于拨打电话。
wx. scanCode(Object)接口 用于扫描二维码。

1、获取系统信息
wx.getSystemInfo(Object)接口，wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。

2、网络状态
1.获取网络状态
wx.getNetworkType(Object)用于获取网络类型

2.监听网络状态变化
wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络连接。

3、拨打电话
wx.makePhoneCall(Object)接口用于实现调用手机拨打电话

4、扫描二维码
wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回相应的内容