一~六、总结

第一章 微信小程序的概述

1小程序的特征：

无需安装，无需下载，触手可及，用完即走，无需卸载。

2小程序的应用场景

具备以下特点：轻量化体验，易操作性，深度融入微信生态系统，多元化应用场景，实时服务与咨询。

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

1.工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。
2. 模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
3.目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
4.编辑区
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json文件的操作，使用组合键能提高代码的编辑效率。                                                                                                      5.调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、 Wxml、Sensor和Trace。最右边的扩展菜单项“氵”是定制与控制开发工具按钮。

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

1小程序的基本目录结构

小程序的基本目录结构主要包括主体文件和页面文件。

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

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

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

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

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

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

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

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

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

2 小程序的开发框架 

1视图层 ：逻辑层用于处理事务逻辑

2逻辑层 ：框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

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

3配置文件

设置pages配置项时，注意3点

(1)数组的第一项用于设定小程序的初始页面。

(2)在小程序中新增或减少页面时，都需要对数组进行修改

(3)文件名不需要写文件文件扩展名。小程序框架会自动寻找路径及对。js 、 .js 、.wxml和 .wxss文件进行整合数据绑定。

4逻辑层文件

页面逻辑文件的主要功能有: 设置初始数据; 定义当前页面的生命周期函数; 定义事件处理函数等。 每个页面文件都有一个相应的逻辑文件, 逻辑文件是运行在纯javaScrict引擎中。 因此, 在逻辑文件中不能使用浏览器提供的特有对象(document、window) 及通过操作DOM改变页面, 只能采用数据绑定和事件响应来实现。

5页面样式文件

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

 1. 尺寸单位

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

2样式导入

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

3.选择器

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

6页面事件

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

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

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

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

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

第三章、页面布局

1盒子模型

微信小程序的视图层由WXML和WXSS 组成。其中，WXSS(WeiXin Style sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WNML的组件如何显示。WXSS具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
  在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素.

2块级元素与行内元素

一、块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
边    (3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。    
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。

(5)块级元素可以容纳块级元素和行内元素。

<view/>组件默认为块级元素

二、行内元素

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

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

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

<text/>组件默认为块级行内元素

3行内块元素

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

二、fiex布局

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

1容器属性

1.display：

display用来指定元素是否为flex布局其中，flex-一块级flex布局，该元素变为弹性盒子;
inline -flex--行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合 flex 布局规范。
设置了 flex 布局之后，子元素的float、clear和vertical- align属性将失效。

2.flex-direction

flex-direction用来设置主轴的方向，即项目排列的方向其中，row---主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row;row -reverse-一主轴为水平方向，起点在右端; column--主轴为垂直方向，起点在顶端;column - reverse--主轴为垂直方向，起点在底端。

3.flex-wrap

flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行其中，nowrap--不换行，默认值;wrap一换行，第一行在上方;wrap-reverse---换行，第一行在下方。当设置换行时，还需要设置align-item属性来配合自动换行，但align-item的值不能为“ stretch”。

4.flex-flow

flex-fow是flex -direction和flex-wrap的简写形式，默认值为row nowrap。

5.justify-content

juntify -content用于定义项目在主轴上的对齐方式。其中，justify-content-与主轴方向有关，默认主轴水平对齐，方向从左到右;flex -start--左对齐，默认值; flex- end--右对齐; center--居中;
space- between--两端对齐，项目之间的间隔都相等; space -around-每个项目两侧的间隔相等。

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

7.align-content

align - content用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。space-between--与交叉轴两端对齐，轴线之间的间隔平均分布;space - around--每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。其余各属性值的含义与align-items属性的含义相同

2项目属性

1.order

2.flex-grow

3.flex-shrink

flex-shrink用来定义项目的缩小比例, 默认值为１, 如果空间不足, 该项目将被缩小。

4.flex-basis

flex-basis属性用来定义伸缩项目的基准值, 剩余的空间将按比例进行缩放, 它的默认值为auto (即项目的本来大小)。

5.flex

flex属性是flex-grow、flex-shrink 和flex-basis 的简写, 其默认值分别为０、１、auto。

6.align-self

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

第四章、页面组件

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

 每一个组件都由一对标签组成, 有开始标签和结束标签, 内容放置在开始标签和结束标签之间, 内容也可以是组件。

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

 组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如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属性可以实现各种复杂的布局。

2scroll-view

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

(１) 在使用竖向滚动时, 如果需要给 scroll-view组件设置一个固定高度, 可以通过WXSS设置height 来完成。

(２) 请勿在 scroll-view 组件中使用 textarge、map、canvas、video 组件。

(３) scroll-into-view属性的优先级高于 scroll-top。 

(４) 由于在使用 scroll-view 组件时会阻止页面回弹, 所以在 scroll-view  组件滚动时无法触发onPullDownRefresh。

(５) 如果要实现页面下拉刷新, 请使用页面的滚动, 而不是设置 scroll-view 组件。 这样做, 能通过单击顶部状态栏回到页面顶部。通过 scroll-view 组件可以实现下拉刷新和上拉加载更多

3 swiper

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

<swiper-item / >组件为滑块项组件，仅可以被放置在<swiper/>组件中，宽高尺寸默认按100%显示。设置swiper组件，可以实现轮播图效果，

三、媒体组件

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

1 image

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

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

scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。 也就是说，可以将图片完整地显示出来。

aspectFill  保持纵横比缩放图片，只保证图片的短边能完全显示出来。 也就是说，图片通常只在水平或垂直方向是完整的, 在另一个方向将会发生截取。widthFix 宽度不变，高度自动变化，保持原图宽高比不变。

２.裁剪模式

top 不缩放图片, 只显示图片的顶部区域。 

botton 不缩放图片, 只显示图片的底部区域。 

center 不缩放图片, 只显示图片的中间区域。 

left 不缩放图片, 只显示图片的左边区域。 

right 不缩放图片, 只显示图片的右边区域。 

top_left 不缩放图片, 只显示图片的左上边区域。 

top_right不缩放图片, 只显示图片的右上边区域。

bottom_left不缩放图片, 只显示图片的左下边区域。

bottom_right 不缩放图片。只显示图片的右下角区域。

四、其他组件

1map

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

2  canvas

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

（1）创建一个canvas绘图上下文

var contex = wx.createCanvasContext('myCanvas')

（2）使用canvas绘图上下文进行绘图描述

context.setFillStyle('green')//设置绘图上下文的填充色为绿

context.fillRect(10,10,200,100)//方法画一个矩形，填充为设置的绿色

（3）画图

context.draw()

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

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

(3)制作完成后, 将代码一键打包并下载。

(4)将代码上传至微信开发者工具。

(5)上传成功后, 等待审核通过即可。

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

五、即速应用

一、即速应用概述

1即速应用的优势

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

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

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

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

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

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

(3)制作完成后, 将代码一键打包并下载。

(4)将代码上传至微信开发者工具。

(5)上传成功后, 等待审核通过即可。

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

即速应用为广大开发者提供了非常齐全的行业解决方案。 目前, 即速应用已经上线60多个小程序行业模板, 涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。

这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道, 降低运营成本, 提高管理效率。

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

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

二、即速应用组件

1布局组件

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

2 基本组件

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

1.文本组件

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

2.图片组件

图片组件用于在页面中展示图片, 其属性面板

3.按钮组件

按钮组件用于在页面中设置按钮, 其属性面板

4.标题组件

标题组件用于在页面中设置标题, 其属性面板

5.轮播组件

轮播组件用于实现图片的轮播展示, 其属性面板

6.分类组件

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

7.图片列表组件

图文集组件用于展示图片、标题和简介, 其属性面板。

8.图文集组件

图文集组件用于展示图片、标题和简介, 其属性面板

9.视频组件

视频组件用于展示视频, 其属性面板

3 高级组件

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

4 其他组件

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

1.音频组件

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

2.动态容器组件

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

六、网络API

1   多媒体API

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

1 图片API

图片API实现对相机拍照图片或本地相册图片进行处理

2   录音API

录音API提供了语音录制的功能

3 音频播放控制API

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

4音乐播放控制API

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

2  文件API

从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力

1．保存文件

wx. saveFile（Object）用于保存文件到本地

2．获取本地文件列表

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

3. 获取本地文件的文件信息

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

3  位置API

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

1 获取位置信息

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

2 选择位置信息

wx. chooseLocation（Object）接口用于在打开的地图中选择位置，用户选择位置后可返回当前位

置的名称、地址、经纬度信息。

3显示位置信息

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

4  设备相关  API

1  获取系统信息

wx. getSystemInfo（Object）接口、wx. getSystemInfoSync（）接口分别用于异步和同步获取系统信息。

wx. getSystemInfo（）接口或wx.getSystemInfoSync（）接口调用成功后，返回系统相关信息

2  网络状态

1获取网络状态

wx. getNetworkType（Object）用于获取网络类型

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

2监听网络状态变化

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

3  拨打电话

wx. makePhoneCall（Object）接口用于实现调用手机拨打电话

4  扫描二维码

wx. scanCode（Object）接口用于调起客户端扫码界面，扫码成功后返回相应的内容