微信小程序开发与运营复习博客

 第一章

微信小程序是小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。

小程序特点：
与web相比，首先入口不同。
主要都是基于传统的前端技术，以JavaScript语言为主。
与APP相比，学习门槛和开发成本都比较低，可以快速上手。
不需要下载和安装，不想用了也不需要卸载。
相比h5，小程序受限微信运营规范，不像h5页面那么灵活。 但他也可以做一些h5做不了的事情，

第二章

页面文件

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

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

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

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

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

视图层

MINA 框架的视图层由 WXML 与WXSS 编写， 由组件来进行展示。对于微信小程序而言， 视图层就是所有. wxml文件与. wxss文件的集合： . wxml文件用于描述页面的结构；. wxss文件用于描述页面的样式。
 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来， 同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。

1.全局配置项:

2.windos配置项:

3.tabBar配置项:

 3.1.tabBar中list选项

 4.networkTimeout配置项:

页面结构文件
数据绑定

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

1.简单绑定：

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

2.运算：

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

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

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

列表数据绑定
1.wx:for

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

引用页面文件
1．import 方式
如果在要引用的文件中定义了模板代码，则需要用import方式引用。
例如，在a.wxml文件中定义一个item模板。

如果要在b.wxml文件中使用item模板，首先需要使用import方式引用a.wxml文件，然
后通过template使用item模板。

include 方式
include方式可以将源文件中除模板之外的其他代码全部引入，相当于将源文件中的代码复制到include所在位置。
bb.wxml文件通过include把aa.wxml文件代码加载，

页面事件

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

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

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

4.非冒泡事件      
 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。在wxml中，冒泡事件有6个：

页面样式文件

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

wxss常用属性：

盒子模型
图3-1 盒子模型结构

盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成，如图3-1所示。
此外，对padding、border和margin可以进一步细化为上、下、左、右4个部分，在CSS中可以分别进行设置，如图3-2所示。

图中各元素的含义如下：

width和height 内容的宽度和高度。
padding-top、padding-right、padding-bottom 和 padding-left 上内边距、右内边距、底内边距和左内边距。
border-top、border-right、border-bottom和border-left 上边框、右边框、底边框和左边框。
margin-top、margin-right、margin-bottom 和margin-left 上外边距、右外边距、底外边距和左外边距。
因此，一个盒子实际所占有的宽度（高度）应该由“内容”＋“内边距”＋“边框”＋“外边距”组成。此盒子所占宽度如。

第三章

块级元素与行内元素

块级元素

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

行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为inline后，该元素即被设置为行内元素。行内元素的特点如下：
（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定。
（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素。
（3）同一块内，行内元素和其他行内元素显示在同一行。
＜text／＞组件默认为行内元素，使用＜view／＞及＜text／＞组件演示盒子模型及行内元素＜view／＞及＜text／＞

行内块元素

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

浮动与定位

元素浮动与清除

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

{float:none|left|right;}

其中，none-默认值，表示元素不浮动；
left-元素向左浮动；
right-元素向右浮动。
 

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

{clear:left |right|both|none}

flex布局
 flex布局模型

容器属性

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

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

其中，flex——块级布局

           inline——行内布局

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

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

其中，（a）row——主轴为水平方向，起点，在左端

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

           （b）column——主轴为垂直方向，起点在顶端

           （d）column-reverse——主轴为垂直方向，期待你在底端

3.flex-wrap
定义项目如何换行

其中，（a）nowrap——不换行，默认值

           （b）wrap——换行，第一行在上方

           （c）wrap-reverse——换行，第一行在下方

4.flex-flow
flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap

语法格式：

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

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

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

           （a）flex-start——左对齐，默认值

           （b）flex-end——右对齐(b)

           （c）center——居中(c)

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

           （e）space-around——每个项目两侧的间隔相等

项目属性
本项目支持6个属性

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

5.flex
flex属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto

语法格式：

.item{flex:<flex-grow>|<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|flex-start|flex-end|center|baseline|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组件。

 text

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

 progress

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

表单组件

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

button

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

radio

复选框用于从一组选项中选取多个选项，小程序中复选框由＜checkbox-group／＞（多项选择器）和＜checkbox／＞（多选项目）两个组件。

checkbox

复选框用于从一组选项中选取多个选项，小程序中复选框由＜checkbox-group／＞（多项选择器）和＜checkbox／＞（多选项目）两个组件

switch

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

slider

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

picker-view

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

input

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

 

 textarea

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

 

from

label组件运行效果示意
为submit的＜button／＞组件时，会将表单组件中的value值进行提交。form组件的属性如
form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当＜form／＞表单中formType表所示。

多媒体组件

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

 image

image组件为图像组件，与HTML中的＜img／＞类似，系统默认image组件的宽度为300px、高度为2250px，image组件的属性如表4-21所示。

 缩放模式 

裁剪模式 

audio

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

vido

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

camera

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

 

其他组件

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

map

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

 

 

 

canvas

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

 即速应用概述

        即速应用是一款同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发。

1.开发流程简单:

1）进人制作界面，从众多行业模板中选择一个合适的模板

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

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

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

（5）上传成功

即速应用组件 

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

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

3.自由面板组件
 自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向自由面板内拖入部分组件(包括文本组件、图片组件和按钮组件)，也可以拖入任意相关容器组件，用于不规则布局。自由面板组件的属性面板如图所示
7.动态分类组件
动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板8.分类导航
 

基本组件

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

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

网络API 

10个网络API接口。
wx.request(Object）接口用于发起HTTPS请求。心
wx.uploadFile(Objeet）接口用于将本地资源上传到后台服务器。wx.downloadFile(Object）接口 用于下载文件资源到本地。wx.connectSocket(Object）接口 用于创建一个WebSocket连接。
wx. sendSocketMessage(Object)接口用于实现通过 WebSocket 连接发送数据。
wx.closeSocket(Object）接口 用于关闭WebSocket连接。
wx.onSocketOpen(CallBack）接口用于监听 WehSocket 连接打开事件。
wx.onSocketError(CallBack）接口用于监听 WcbSockct错误。
wx.onSocketMessage(CallBack）接口用于实现监听 WebSocket 接收到服务器的消息
事件。
wx.onSocketClose(CallBack）接口用于实现监听WebSocket关闭。

发起网络请求

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

上传文件

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

下载文件

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

多媒体API

4个API接口：wx.chooselmage(Object）接口用于从本地相册选择图片或使用相机拍照。
wx.previewlmage(Object）接口用于预览图片。
wx. getlmagelnfo(Object）接口用于获取图片信息。
wx. savelmageToPhotosAlbum(Object）接口用于保存图片到系统相册。

1、播放语音

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

 2、暂停播放

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

3、结束播放

wx.stipVoice(Object)用于结束播放语音 示例代码 

 音乐播放控制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中可改变播放图标

文件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/01 08: 00: 00到当前时间的秒数）文件列表

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

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

4.删除本地文件地存储的文件，

wx. removeSaveFile（Object）接口用于删除本

1、保存数据
1.wx.setStorage(Object)

wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后覆盖原来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()接口用于异步清理本地数据缓存，没有参数

示例代码

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

2.wx.clearStorageSync()

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

位置信息API

wx.getLocation（Object）接口用于获取位置信息。

wx.chooseLocation（Object）接口 用于选择位置信息。

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

获取位置信息

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

调用成功后，返回参数

选择位置信息

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

调用成功后，返回的参数

显示位置信息

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

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

wx.getSystemInfo（Object）接口 wx.getSystemInfoSync（）接口 用于获取系统信息

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

wx.onNetworkStatusChange（CallBack）接口 用于监测网络状态改变。

wx.makePhoneCall（Object）接口 用于拨打电话。

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

获取系统信息

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

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

.拨打电话

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

 

  

扫描二维码

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

 扫码成功后，返回数据