微信小程序 1-6章复习

第一章  微信小程序概述

微信小程序开发流程为：第1步，在微信公众平台上注册小程序账号；第二步，下载开发者工具进行编码；第3步，通过开发者工具提交代码，待通过审核后便可以发布。

微信开发者工具界面分为5大区域：工具栏、模拟区、目录文件区、编辑区和调试区。

1.工具栏

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

2.模拟区

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

3.目录文件区

  目录文件区用来显示当前项目的目录结构

4.编辑区

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml 、.js及.json文件的操作。

5.调试区

调试区的功能帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor和Trace

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

2.1 小程序的基本目录结构

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

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

一.主体文件

（1）app.js:小程序逻辑文件，主要用来注册小程序全局实例

（2）app.json:小程序公共设置文件，配置小程序全局设置

（3）app.wxss：小程序主要样式表文件，在主样式表文件中设置样式在其他页面文件中同样有效。

二.页面文件

（1）.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

（2）.wxml:页面结构文件，用于设计页面的布局、数据绑定等。

（3）.wxss：页面样式表文件，用于定义本页面中用到的各类样式表。

（4）.json：页面配置文件，该文件在页面中不可缺少。

2.2 小程序的开发框架

1.视图层：MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示

.wxml文件用于描述页面的结构； .wxss文件用于描述页面的样式。

2. 逻辑层：逻辑层用于处理事务逻辑。

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

（1）页面临时数据或缓存

（2）文件存储（本地存储）

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

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

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

（3）网络存储与调用

 wx.request: 发起网络请求

 wx.uploadFile: 上传文件

wx.downloadFile: 下载文件

调用URL的API接口，如下：

 wx.navigateTo ：新窗口打开页面

 wx.redirectTo: 原窗口打开页面

2.3 创建小程序页面

在page目录下创建一个news目录，并在news目录下创建 news.js 、news.json、 news.wxml和 news.wxss空文件。

首先，打开news.wxml文件，输入“欢迎学习小程序”

然后，打开项目配置文件app.json ，输入“pages/news/news"

 接下来，打开news.json文件，输入{   }

打开news.js文件，输入

Page({

})

2.4 配置文件

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

2.window 配置项：window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。

3. tabBar配置项：当需要在程序顶部或底部设置菜单栏时，可以通过配置项来实现。

 4.networkTimeout 配置项：小程序各种网络请求API的超时时间值只能通过 networkTimeout配置项进行统一设置，不能在API中单独设置。

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

2.5逻辑层文件

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

 页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数 等。

1.设置初始数据：设置初始数据是对页面的第一次数据绑定，对象data将会以JSON的形式由逻辑层传至视图层。

视图层可以通过WXML对数据进行绑定 

2.定义当前页面的生命周期函数

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onHide、onUnload.

onLoad:页面加载函数，当页面加载完成后调用该函数，一个页面只会调用一次。

onShow:页面显示函数，当页面显示时调用该函数，每次打开页面都会调用一次。

onReady:页面数据绑定函数，当页面初次数据绑定完成时调用该函数，每次打开页面都会调用一次。

onHide:页面隐藏函数，当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。

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

 

2.6 页面结构文件

页面构建文件（WXML）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

2.6.1 数据绑定

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

2.6.2 条件数据绑定

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

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

2.6.3 列表数据绑定

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

<view  wx:for="{{items}}">
{{index}}:{{item}}
</view>

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

<block wx:for="{{student}}">
<view>
<text>{{indent}}</text>
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</view>
</block>

2.6.4 模板

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

<template name="模板名">

将模板定义后，就可以对其进行调用了。调用那个模板的格式为：

<template is="模板名称" data=="{{传入的数据"}}/>

2.6.5 引用页面文件

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

例如：在a.wxml文件中定义一个item模板，代码如下：

//a.wxml
<template name="item">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</template>

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

2.6.6  页面事件
（1）定义事件函数：在.js 文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码

（2）调用事件：调用事件也被称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。

（3）冒泡事件：冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。

（4）非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

2.7 页面样式文件

1.尺寸单位：由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx。WXSS规定屏幕宽度为375rpx,在系统数据绑定过程中rpx会按比例转化为px。2.样式导入 ：为了便于管理WXSS文件，我们可以将样式存放与不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。

3.选择器：目前，WX仅支持CSS中常用的选择器，如.class、#id、element、brfore、aftert等。

4.WXSS常用属性：

 第三章 页面布局

3.1 盒子模型

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

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

3.2 块级元素与行内元素

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

3.2.1 块级元素

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

（1）一个块级元素占一行。

（2）块级元素的默认高度由内容决定，除非自定义高度。

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。

（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置。

（5）块级元素可以容纳块级元素和行内元素。

<view/>组件默认为块级元素。使用<view/>组件演示盒子模型及块级元素的示例代码如下：

3.2.2 行内元素

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

（2）行内元素内不能放置块级元素，只级容纳文本和其他行内元素。

（3）同一块内，行内元素和其他行内元素显示在同一行。

<text/>组件默认为行内元素，使用<view/>及<text/>组件演示盒子模型及行内元素的示例代码如下：

3.2.3 行内块元素

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

 

3.3 浮动与定位 

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

{float：none|left|right;}

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

           left——元素向左浮动；

          right——元素向右浮动。

清除浮动：

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

{clear:left|right|both|none}

left——清除左边浮动的影响，也就是不允许左侧有浮动元素； 

right——清除右边浮动的影响，也就是不允许左侧有浮动元素； 

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

none——不清除浮动。

3.3.2 元素定位 
浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。基本格式如下：

{position:static|relative|absolute|fixed}

（1）static——默认值，该元素按照标准流进行布局；

 <view>box1 box2 box3左浮动 在父元素后添加一个空元素</view>
<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>

（2）relative——相对定位，相对于它在原文档的位置进行定位，它后面的盒子仍以标准流方式对待它。代码如下：

<!--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>
 运行结果如图：

（3）absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子标准流中脱离，它对其后的兄弟盒子的定位没有影响。代码如下： 

<!--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>
运行结果如图：

（4）fixed——固定定位，相对于浏览器窗口进行定位。代码如下：

<!--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:fixed;left:30px;top:30px">box2</view>
<view style="border:1px solid #0f0;width:100px;height:100px">box3</view>
 运行结果如图：

3.4 flex布局

3.4.1 容器属性

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器，flex布局的所有直接子元素自动成为容器的成员，称为flex项目。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 

flex容器支持的属性有7种：

1.display：display用来指定元素是否为flex布局，语法格式为：

.box{display:flex|inline-flex;}

2.flex-direction：flex-direction用于设置主轴的方向，语法格式为：

.box{flex-direction:row|row-reverse|column|column-reverse;}

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

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

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

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

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

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

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

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

7.align-content:用来定义项目有多根轴线在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下：

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

3.4.2  项目属性

容器内的项目支持6个属性；其名称和功能如图：

1.order：order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0.语法格式如下：

.item{order:<number>;}

2.flex-grow:定义项目的放大比例，默认值为0，即不放大。语法格式如下：

.item{flex-grow:<number>;}

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

.item{flex-shrink:<number>;}

4.flex-basis:用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto。语法格式如下：

.item{flex-basis:<number>|auto;}

5.flex:flex属性是flex-grow、flex-dhrink和flex-basis的简写，其默认值分别为0、1、auto。语法格式如下：

.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

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

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

第四章 页面组件

4.1 组件的定义及属性

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

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

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

4.2  容器视图组件

4.2.1 view

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

 

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

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

4.2.2 scroll-view 

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

（1）在使用竖向滚动时，如果需要给scroll-view组件设置一个固定高度，可以通过WXSS设置height高度。

（2）请勿在scroll-view组件中使用text area、map、canvas、video组件。

（3）scroll-into-view属性的优先级高于scroll-top。

（4）由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。

（5）如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。

4.2.3 swiper

swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/>和<swiper-item/>两个标签组成，它们不能单独使用。

 <swiper-item/>组件为滑块项组件，仅可以被放置在<swiper/>组件中，宽高尺寸默认按100%显示

4.3 基础内容组件

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

4.3.1 icon

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

示例代码如下：

//.wxml
<view> icon类型:
<block wx:for="{{iconType}}">
<icon type ="{{item}}"/>{{item}}
</block>
</view >
<view >icon大小:
<block wx:for="{{iconSize}}">
<icon type = "success" size="{{item}}"/>{{item}}
</block>
</view>
<view >icon颜色:
<block wx:for="{{iconColor}}">
<icon type = "success" size = "30" color="{{item}}"/>{{item}}
</block >
</view >
//.js
Page({ 
  data:{
  iconType:[ "success"," success_no_circle","info"," warn"," wait- ing","cancel","download","search","clear"],
  iconSize:[10,20,30,40],
  iconColor:['#f00','#0 f0','#00f']
}
  })

 

4.3.2 text

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

4.3.3 progress

 ，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素，其属性如图：

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

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

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

4.4.4 switch

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

4.4.5 slider

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

4.4.6  picker

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

4.4.7 picker-view

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

4.4.8 input

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

4.4.9 textarea

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

4.4.10 label

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

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

4.4.11 form

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

4.5 多媒体组件

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

4.5.1 image

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

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

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

2.裁剪模式

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

4.5.2 audio

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

4.5.3 video

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

 4.5.4 camera

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

4.6 其他组件

4.6.1 map

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

4.6.2 canvas

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

第五章 即速应用 

5.1.1 即速应用的优势

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

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

使用即速应用来开发微信小程序的过程非常简单，无须储备相关代码知识，没有开发经验的人也可以轻松上手。

（1）登录急速应用的官方网站（www.jisuapp.cn)，进入制作界面，从众多行业模板中选择一个合适的模板。

（2）在模板的基础上进行简单编辑和个性化制作。

（3）制作完成后，将代码一键打包并下载。

（4）将代码上传至微信开发者工具。

（5）上传成功后，等待审核通过即可。

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

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

5.1.2 即速应用界面介绍

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

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

1.菜单栏

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

2.工具栏

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

3.编辑区

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

4.属性面板

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

5.2 即速应用组件

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

5.2.1 布局组件

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

1.双栏组件

双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不糊出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏里面可以添加基本的组件，从而达到整体的布局效果 。

2.分割线

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

 3.弹窗

4.面板组件

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

 

5.自由面板组件

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

 5.2.2 基本组件

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

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

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

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

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

5.轮播组件：

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

单击“添加轮播分组”按钮进入管理后台，然后单击 “轮播管理”——>“新建分组”选项可以创建轮播分组

分别填写“分组名称” 和“分组描述”，单击“确定”按钮进入如图所示的轮播管理界。

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

7.视频组件：视屏组件用于展示视频。

8.公告组件：公告组件是用来设置公告的，可以选择公告的模板样式。

9.添加组合组件:添加组合组件是用来设置页面中的组合组件。

5.3 即速应用后台管理

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

 1．数据管理

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

2.用户管理

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

3. 商品管理

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

4.订单管理

订单管理是用来预览订单的，可以查阅订单总览和订单的管理。

 5.售后订单

售后订单是用来查阅订单的，可以接收各个平台的订单。

6.营销推广

营销推广可以用来查阅营销的预览跟数据信息展示，有会员卡推销，微信会员卡推销等等。

7.账单总览

账单总览是用来查看你最近的收入与支出，可以查阅最近七天或者是一天或是年的收录实际情况。

8.店铺管理

店铺管理是用来管理店铺的，可以点击我的店铺进行管理我的店铺，有堂食点餐和行业预约等功能。

9.功能模块

功能模块是用来了解该功能，可以进入推荐功能进行查阅管理开通，如图所示

10.系统设置

系统设置有以下功能，支付设置、短信管理、微信小程序设置、子账号设置、云资源 配置、商家助手功能自定义、授权管理、抖音小程序设置、自定义版本交易组件、视频号设置、跨境店铺配置、多商家入驻、导航设置等等。

5.4 打包上传

首先打开网站，进入管理页面，选择一个模板，然后点击左下角的系统设置的微信小程序设置，点击授权功能就可以根据步骤上传打包。 

第六章 API应用

6.1 网络API

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

wx.request(Oject)接口：用于发起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关闭。

6.1.1 发起网络请求

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

6.1.2 上传文件

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

6.1.3 下载文件

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

 6.2 多媒体API

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

6.2.1 图片API

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

wx.chooseImage(Object)接口：用于从本地相册图片选择图片或使用相机拍照。

wx.previewImage(Object)接口：用于预览图片。

wx.hetImageInfo(Object)接口：用于获取图片信息。

wx.saveImageToPhotosAlbum(Object)接口：用于保存图片到系统相册。

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

2.预览图片

 wx.previewImage(Object)接口主要用于预览图片，其相关参数如表所示。

3.获取图片信息

wx.hetImageInfo(Object)接口用于获取图片信息，其相关参数如表所示。

 4.保存图片到系统相册

wx.saveImageToPhotosAlbum(Object)接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum。其相关参数如表所示。

wx.chooseImage({
   success:function(res){
  wx.saveImageToPhotosAlbum({
filePath:res.tempFilePaths[0],
  success:function(e){
  console.log(e)
}
 })
},
})

 

6.2.2 录音API

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

wx.startRecord(Object)接口：用于实现开始录音。

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

1.开始录音

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

2.停止录音

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

示例代码如下：

wx.startRecord)
({
success:function(res){
 var tempFilePath=res.tempFilePath
},
fail:function(res){
//录音失败
}
})
setTimeout(function(){
//结束录音
wx.stopRecord()
},10000)

 6.2.3 音频播放控制API

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

wx.playVoice(Object)接口：用于实现开始播放语音。

wx.pauseVoice(Object)接口：用于实现暂停正在播放的语音。

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

1.播放语音

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

 示例代码如下：

wx.startRecord({
 success:function(res){
 var tempFilePath=res.tempFilePath
wx.playVoice({
  filePath:tempFilePath,
 complete:function(){
  }
 })
}
})

2.暂停播放

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

示例代码如下：

 wx.startRecord({
 success:function(res){
 var tempFilePath=res.tempFilePath
wx.playVoice({
 filePath:tempFilePath
})
setTimeout(function(){
//暂停播放
wx.pauseVoice()
},5000)
}
})

3.结束播放

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

示例代码如下：

wx.startRecord({
success:function(res){
var tempFlePath=res.tempFilePath
wx.playVoice({
filePath:tempFilePath
})
setTimeout(function(){
wx.stopVoice()
},5000)
}
})

 6.2.4 音乐播放控制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)接口：用于实现监听音乐停止。

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

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

wx.setStorage(Object) 或wx.setStorageSync(key,data)接口：用于设置缓存数据。

wx.getStorage(Object)或wx.getStorageSync(key)接口：用于获取缓存数据。

wx.removeStorage(Object)或wx.removeStorage(key)接口：用于删除指定缓存。

wx.clearStorage()或wx.clearStorageSync()接口：用于清除缓存数据。

其中，带Sync后缀的为同步接口，不带Sync后缀的为异步接口。

6.4.1 保存数据

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

示例代码如下：

wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

 2.wx.setStorageSync(key,data)

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

示例代码如下：

wx.setStorageSync('age','25')

 6.4.2  获取数据

1.wx.getStorage(Object)

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。其相关参数如表所示

示例代码如下：

wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

 2.wx.getStorageSync(key)

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

示例代码如下：

try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
console.log("获取失败")
}

6.4.3 删除数据

1. wx.removeStorage(Object)

wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。其相关参数如表所示。

示例代码如下：

wx.removeStorage({
  key: 'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

2.wx.removeStorage(key)

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

 6.4.4 清空数据

1.wx.clearStorage()

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

示例代码如下：

wx.getStorage({
  key:'name',
  success:function(res){
    wx.clearStorage()
  },
})

2.wx.clearStorageSync()

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

示例代码如下：

try{
  wx.clearStorageSync()
}catch(e){
}

6.5 位置信息API

小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系。

默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口：

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

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

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

6.5.1 获取位置信息

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

6.5.2 选择位置信息

wx.chooseLocation(Object) 接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息，其相关参数如表所示

6.5.3 显示位置信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息，其相关参数如表所示。

 

wx.getLocation({
  type:'gcj02',
  success:function(res){
    var latitude=res.latitude
    var longitude=res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale:10,
      name:'智慧国际酒店',
      address:'西安市长安区西长安区300号'
    })
  }
})

6.6  设备相关API 

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

wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口：用于获取系统信息。

wx.getNetworkType(Object)接口：用于获取网络类型。

wx.onNetworkStatusChange(CallBack)接口：用于监测网络状态改变。

wx.makePhoneCall(Object)接口：用于拨打电话。

wx.scanCode(Object)接口：用于扫描二维码。

6.6.1 获取系统信息

wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。其相关参数如表所示。

wx.getSystemInfo()接口或wx.getSystemInfoSync()接口 调用成功后，返回系统相关信息，如表所示。

示例代码如下：

wx.getSystemInfo({
  success:function(res){
    console.log("手机型号："+res.model)
    console.log("设备像素比："+res.pixelRatio)
    console.log("窗口的宽度："+res.windowWidth)
    console.log("窗口的高度："+res.windowHeight)
    console.log("微信的版本号："+res.version)
    console.log("操作系统版本："+res.system)
    console.log("客户端平台："+res.platform)
  }
})

6.6.2 网络状态

1.获取网络状态

wx.getNetworkType(Object)用于获取网络类型，其相关参数如表所示。

如果wx.getNetworkType()接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown(Android 下不常见的网络类型）、none（无网络）。

示例代码如下：

wx.getNetworkType({
  success:function(res){
    console.log(res.networkType)
  },
})

2.监听网络状态变化 

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

6.6.3 拨打电话

wx.makePhoneCall(Object)接口用于实现调用手机拨打电话，其相关参数如表所示。

示例代码如下：

wx.makePhoneCall({
  phoneNumber: '18092585093',
})

6.6.4 扫描二维码 

wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回相应的内容，其相关参数如表所示。

扫码成功后，返回的数据如表所示。

示例代码如下：

wx.scanCode({
  success:(res)=>{
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})
wx.scanCode({
  onlyFromCamera:true,
  success:(res)=>{
    console.log(res)
  }
})