第一章到第六章复习

第一章

认识微信小程序

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

小程序特征：无需安装 触手可及 用完即走 无需卸载

应用场景特点：无处不在 触手可及 随时可用 用完即走

主要体现在：简单的业务逻辑 低频度的使用场景

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

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

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

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

5：调试区的功能是帮助于代码调试及排查有问题的区域。

第二章

小程序的基本目录结构

主体文件
app.js 小程序逻辑文件，主要用来注册小程序全局实例。

app.json 小程序公共设置文件，配置小程序全局设置。

app.wxss 小程序主样式表文件，类似html的css文件。

页面文件
. js文件 页面逻辑文件， 在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
 . wxml文件 页面结构文件， 用于设计页面的布局、数据绑定等， 类似 HTML 页面中的. html文件。该文件在页面中不可缺少。
 . wxss文件 页面样式表文件， 用于定义本页面中用到的各类样式表。当页面中有样式表文件时， 文件中的样式规则会层叠覆盖 app. wxss中的样式规则； 否则， 直接使用app. wxss中指定的样式规则。该文件在页面中不可缺少。
. json文件 页面配置文件。该文件在页面中不可缺少。

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

逻辑层
逻辑层(App Service)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有，js脚本文件的集微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。、

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

1.页面临时数据或缓存

在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。
setData()函数的参数接收一个对象，以(kev,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原窗口打开页面。

配置文件 
小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

全局配置文件
小程序的全局配置保存在全局配置文件(app.jn)中，使用全局配置文件来配置页面文件《和)的路径、设置窗口(windor)表现、这定网络请求API的超时时间值文hn 以及配置多个切换页(ubtanr)等。

1.pages配置项
pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径” +“文件名”。

2.winndow配置项
window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。window配置项可以配置的对象参考表。

3.abBar配置项
 当需要在程序顶部或底部设置菜单栏时，可以通过配置 tabBar 配置项来实现。tabBar 配置项可以配置的属性如表所示。

接受数组值，数组中的每一项也都是一个对象。对象的数据值说明如表所示

4.networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过 networkTimeout 配置项进行统一设置不能在API中单独设置。networkTimeout 可以配置的属性如表所示。

5.debug配置项
 debug 配置项用于开启开发者工具的调试模式，默认为 false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以 info 的形式输出到 Console (控制台) 面板上。

页面配置文件
页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window配置项白容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)的配置值。

逻辑层文件
小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。

项目逻辑文件
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
App()函数用于注册一个小程序，参数为Object，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表;

页面逻辑文件
页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示。

1. 设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object No- OLEtation， JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式
(字符串、数字、布尔值、对象、数组)。 LED
Security 视图层可以通过WXML对数据进行绑定。
数据初始、数据绑定及运行效果如图2-12所示。

2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、 onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx. navigateTo和wx. redirectTo及<navigator/>中的query。
onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。
用该函数。

onUnload 页面卸载函数。当页面卸载、进行 navigateBack或redirecfTo操作时，调用该函数。

3.定义事件处理函数
开发者在Pae()中自定义的函数称为事件处理函数。视图层可以在组件中加入事作定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数。

4. 使用 setData 更新数据
小程序在Page对象中封装了一个名为setData()的函数，用来更新data中的数据。函数参数为Objeet，以“key：value”对的形式表示将this. data中的key对应的值修改为value。

页面结构文件 

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即 .wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。 

数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。

 1.简单绑定

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

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

条件数据绑定

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

1.   wx:if条件数据绑定

wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。

<view  wx:if="{ {conditon}}">内容</view>

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

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。

 列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。

1.    wx:for

在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件。

2.    block  wx:for

与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。

模板
在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件
结合定义为一个模板，以后在需要的文件中直接使用这个模板。

1.定义模板

模板代码由wxml组成，因此其定义也是在wxml 文件中，定义模板的格式为: 

<template name="模板名">

2.调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为: <template is="模板名称"data=="{{传入的数据}}"/> 其中，<template>为模板标签；is属性用于指定要调用的模板名称；data属性定义要传入的数据，如果模板中不需要传入数据，data属性可以省略。

引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。

1.  import方式

如果在要引用的文件中定义了模板代码，则需要用import方式引用。

2.  include方式

include方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码
复制到include 所在位置。

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

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。

调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以"key =value" 形式出现，key (属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。

小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

第三章

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

块级元素与行内元素
块级元素：
        块级元素默认占一行高度，一行内通常只有一个块级元素（浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下：
（1）一个块级元素占一行。
（2）块级元素的默认高度由内容决定，除非自定义高度。

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
  (4）块级元素的宽度、高度、外边距及内边距都可以自定义设置。
  (5）块级元素可以容纳块级元素和行内元素。<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下：

<view style ="border:1px solid #f00">块级元素1 </view>
<view style = "border: 1px solid #0f0;margin: 15px; padding: 20px">块级元素2</view>
<view style = "border: 1px solid #00f;width: 200px; height: 80px">块级元素3</view>
<view style = "border: 1px solid #ccc;"></view>
     <view style = "height:60px">块级元素4</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父级元素高度随内容决定，内容为文本</view>

运行结果：

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

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

（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素。
（3)同一块内，行内元素和其他行内元素显示在同一行。
<text/>组件默认为行内元素，使用<view/>及<text/>组件演示盒子模型及行内元素的示例如下:

<view style="padding: 20px;"></view>
     <text style="border: 1px solid #f00;">文本1</text>
     <text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本2</text>
     <text style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</text>一行显示不全，自动换行显示

浮动与定位

1.元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父级元素中指定位置的过程。

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

left-元素向左移动；

right-元素向右移动。

清除浮动

由于浮动元素不再占用原文档流的位置，因此它对页面中其他元素的排列产生影响。在CSS中，clear属性用于清除浮动元素对其他的影响。

left-清除左边浮动的影响。

right-清除右边浮动的影响。

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

none-不清楚浮动。

可以在父元素外添加一个空元素，实现父元素包裹浮动元素。代码如下：

<view>box1 box2 box3 左浮动 在父元素后添加一个空元素 </view>
<view style="border: 1px solid #f00; padding: 5px" class="clear-float">
      <view style="float:left;border: 1px solid #0f0">box1 </view>
      <view style="float:left;border: 1px solid #0f0">box2 </view>
      <view style="float:left;border: 1px solid #0f0">box3</view>
</view>
//wxss
.clearfloat::after{display:block;clear:both;height:0;content:""}

运行结果：

浮动布局虽然灵活，但无法对元素的位置进行精准的控制，在CSS中，通过position属性可以实现对页面元素的精准定位。

static-默认值，

relative-相对定位，

absolute-绝对定位，

fixed-固定定位，

静态定位代码如下：

<!--三个元素均为定位 static-->
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box3</view>

相对定位代码如下：

<!--box2 元素相对定位 relative top：30px left：30px -->
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;position: relative;left: 30px; top: 30px;">box2</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box3</view>

绝对定位代码如下：

<!--box2 元素绝对定位 absolute top：30px left：30px -->
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;position: absolute;left: 30px; top: 30px;">box2</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box3</view>

固定定位代码如下：

<!--box2 元素固定定位 fixed top：30px left：30px -->
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;position: fixed;left: 30px; top: 30px;">box2</view>
<view style="border: 1px solid #0f0; width: 100px;height: 100px;">box3</view>

固定定位代码如下：

<view style="position: relative;top: 50px;left: 50px;border: 1px solid #0f0;">
  <view style ="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
  <view style ="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px">box2</view>
  <view style ="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>

flex布局
flex是万维网联盟，改布局可以简单快速地完成各种可以伸缩的设计，以便很好的支持响应式布局。flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器，flex布局的所有直接子元素自动成为容器的成为，称为flex项目。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。设置display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。主轴即可以是水平方向，也可以是垂直方向。

 flex容器支持的属性：

display用来指定元素是否为flex布局。

flex-direction用于设置主轴的方向。即项目排列的方向。

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行。

flex-flow是flex-direction和flex-warp的简写形式，默认之为row nowrap。

justify-content用于定义项目在主轴上的对齐方式。

align-itmes用于指定项目在交叉轴上的对齐方式。代码如下：

<view class="contl">
      <view class="item">1</view>
      <view class="item item2">2</view>
      <view class="item item2">3</view>
      <view class="item item2">4</view>
</view>
 

.cont1{
  display:flex;
  flex-direction:row;
  align-items:baseline;
}
.item{
  background-color:#ccc;
  border:1px solid #f00;
  height:100px;
  width:50px;
  margin:2px;
}
.item2{
  height:80px;
}
.item3{
  display:flex;
  height:50px;
  align-items:flex-end;
}
.item4{
  height:120px;
}

align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，乳沟只有一根轴线，该属性不起作用。

order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。代码如下：

<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item" style="order:1">1</view>
  <view class="item" style="order:3">2</view>
  <view class="item" style="order:2">3</view>
  <view class="item">4</view>
</view>

运行结果：

flex-grow定义项目的放大比例，默认值为0，即不放大。代码如下：

<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-basis:100px;">2</view>
  <view class="item" style="flex-basis: 200px;">3</view>
  <view class="item">4</view>
</view>

flex-shrink用来定义项目的缩小比例默认值为1，如果空间不足，该项目将被缩小。代码如下：

<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-shrink: 2">2</view>
  <view class="item" style="flex-shrink: 1">3</view>
  <view class="item" style="flex-shrink: 4">4</view>
</view>

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto（即项目的本来大小）。代码如下：

<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-basis:100px;">2</view>
  <view class="item" style="flex-basis: 200px;">3</view>
  <view class="item">4</view>
</view>

flex属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。代码如下：

.item{flex:auto;}//等价于.item{flex:1 1 auto;}
.item{flex:none;}//等价于.item{flex:0 0 aoto;}

align-self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。无法格式如下：

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致。auto表示继承容器align-items的属性，如果没有父元素，则等于stretch（默认值）。

第四章页面组件

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

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

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

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

    1.id 组件的唯一表示，保持整个页面唯一，不常用

    2. class 组件的样式类，对应 WXSS 中定义的样式

    3.  style 组件的内联样式，可以动态设置内联样式

    4. hidden 组件是否显示，所有组件默认显示

    5. data-*自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可
    以通过传人参数对象的 currentTarget,dataset 方式来获取自定义属性的值

    6. bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数

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

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

通过<view>组件实现页面布局示例代码如下：

<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
  <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
  <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
</view>
<view style="text-align: center;">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
  <view style="border: 1px solid #f00;">1</view>
  <view style="display: flex;">
    <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
    <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
  </view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
  <view style="border: 1px solid #f00;flex-grow: 1;flex-direction: column;">
    <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
    <view style="border: 1px solid #f00;flex-grow: 2;">3</view>
  </view>
</view>

运行结果：

2.2 Scroll-View

通过设置seroll-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 组件。这样做，能通过单击顶部状态栏回到页面顶部。

通过serol-view 组件可以实现下拉刷新和上拉加载更多，代码如下：

<view class="container" style="padding: 0rpx;">
<!-- 垂直滚动，这里必须设置高度 -->
  <scroll-view scroll-top="{{scrollTop}}"scroll-y="true" style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.pic_url}}"></image>
      <view class="text">
       <text class="title">{{item.name}}</text>
       <text class="description">{{item.short_description}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <losding hidden="{{hidden}}" bindchange="loadingChange">
      加载中……
    </losding>
  </view>
</view>

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

3 基础内容组件

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

3.1 icon

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

3.2 text

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

//text.wxml
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{25-x}}" wx:for-item="y">
<text decode="{{true}}" space="true">&nbsp;&nbsp;</text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text>
</block>
</block>
</view>
</block>
 
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{39+x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}">&nbsp;</text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>

//text.js
Page({
data:{
  x:[1,2,3,4,5],
  y:[1,2,3,4,5,6,7,8,9]
}
})

运行结果：

3.3 progress

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

wxml代码如下：

<view>显示百分比</view>
<progress percent="80" show-info="80"></progress>
<view>改变宽度</view>
<progress percent="50" show-info="2"></progress>
<view>自动显示进度条</view>
<progress percent="80" active=""></progress>

运行结果：

4 表单组件

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

4.1 button

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

4.2 radio

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

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

4.4 switch

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

4.5 slider

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

4.6 picker

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

1．普通选择器

2．多列选择器

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

3．时间选择器、日期选择器

时间选择器（mode=time）可以用于从提供的时间选项中选择相应的时间，其属性如表所示：

日期选择器（mode=date）可以用于从提供的日期选项中选择相应的日期，其属性如表所示：

4．省市选择器

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

4.7 picker-view

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

4.8 input

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

4.9 textarea

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

4.10 label

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

目前，label组件可以绑定的控件有<button/> <checkbox/> <radio/> <switch/>。

4.11 form

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

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

5.1 image

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

image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。
1．缩放模式
  scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
  aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以将图片完整地显示出来。
  aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向将会发生截取。

  widthFix宽度不变，高度自动变化，保持原图宽高比不变。

裁剪模式

  top不缩放图片，只显示图片的顶部区域。
  bottom不缩放图片，只显示图片的底部区域。
  center不缩放图片，只显示图片的中间区域。
  left不缩放图片，只显示图片的左边区域。
  right不缩放图片，只显示图片的右边区域。
  top left不缩放图片，只显示图片的左上边区域。
  top right不缩放图片，只显示图片的右上边区域。

  bottom left不缩放图片，只显示图片的左下边区域。
  bottom right不缩放图片，只显示图片的右下边区域。

5.2 audio

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

5.3 video

video组件用来实现视频的播放、暂停等。视频的默认宽度为300 px，高度为225 px, video组件的属性如表所示。

5.4 camera

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

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

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

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

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

第五章即速应用概述

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

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

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

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

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

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

（5）预约类：酒店、KTV、家教、家政，其他服务行业。

5.1.2 即速应用界面介绍
登录即速应用官网，单击“注册”按钮，在如图5-1所示的页面填写相应信息，即可完成注册。完成注册后，即可登录账号，使用即速应用。

即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板。

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

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

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

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

5.2 即速应用组件

即速应用提供了大量的组件供用户快速布局页面，9个基础组件和11个应用组件。

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

1．双栏组件

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

2．分割线组件

分割线组件被放置于任意组件之间，用于实现分割。分割线组件的属性面板如图所示。

3.弹窗组件

弹窗组件是用来新建弹窗，可以找模板或者新建弹窗等。

4．面板组件

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

5．自由面板组件

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

6.滑动面板组件

滑动面板组件是用来设置单面横滑和多面横滑，也可以使用模板等。

7．动态分类组件

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

 8.分类导航

9.侧边栏

10.悬浮窗

11.分类横滑

5.2.2 基础组件

基础组件用于编辑内容

1.文本组件

文本组件是用来编辑文字信息，可以设置字体的大小，字体的样式和位置等。

 2.图片组件

图片组件主要是用来插入图片，或者进行图片模板，设置图片的样式等。

3.按钮组件 

按钮组件是用来拉一个按钮框，可以编辑按钮的文字，也可以设置按钮的类型和样式等。

4.标题组件

标题组件是用来编辑标题的组件，可以编辑标题的文字，样式等。

5.商品列表组件 

商品列表组件是用来设置以下商品的组件，可以设置组件样式，选择模板等。

6.视频组件

视频组件是用来插入视频或者更改其样式，可以选择视频组件的样式 等。

7.轮播组件

轮播组件用于实现图片的轮播展示，可以更改组件样式添加轮播图，以及数据的绑定等。

8.公告组件

公告组件是用来添加公告，可以输入公告信息，添加组件的样式等等。

9.添加其他组合

添加其他组件是用来选择组合模板，如图所示，可以在组合模板库中选择自己喜欢的模板。

5.3 即速应用后台管理

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

1.数据管理

        数据管理包括数据总览、访客分析和传播数据功能

        数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图。

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

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

2.分享设置

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

3.用户管理

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

4.应用数据

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

5.轮播管理

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

6.分类管理

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

7.商品管理

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

8.经营管理

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

9.营销工具

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

10.多商家管理

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

第六章

6.1 网络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。

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

6.1.2.上传文件

wx. uploadFile（Object）接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求。

6.1.3 下载文件

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

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

6.2.1 图片API
图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：
wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
wx.previewImage（Object）接口 用于预览图片。

wx.getImageInfo（Object）接口用于获取图片信息。
wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。

6.2.2 录音API

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

（1）wx.stariRecord(Object)接口 用于实现开始录音。

（2）wx.stopRecord(Objeet)接日 用于实现主动调用停止录音

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

（1）wx,playVoice(Object)接口 用于实现开始播放语音

（2）wx.pauseVoice(Object)接日 用于实现暂停正在播放的语音

（3）wx, slopVoice(Objec)接日 用于结束播放语音

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

wx.playBackgroundAudio(Object)接 用于播放音乐。

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

wx.seekBackgroundAudio(0bject)接口 用于定位音乐播放进度。

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

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

wx.onBackgroundAudioPlay(CallBack)接日 用于实现监听音乐播放

wx.onBaekgroundAudioPause(CalBack)接口 用于实现监听音乐暂停

wx.onBackgroundAudioStop(CallBack)接口 用于实现监听音乐停止。

6.3 文件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。

6.4 本地数据缓存API
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10 MB，其目的是提高加载速度。数据缓存的接口主要有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后缀的为异步接口。

6.5 位置信息API

小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系。默认为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.onNetworkStatusChange（CallBack）接口 用于监测网络状态改变。
wx.makePhoneCall（Object）接口 用于拨打电话。

wx.scanCode（Object）接口 用于扫描二维码