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

第一章

认识微信小程序

简介：微信是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序。小程序、订阅号、服务号、企业微信属于微信公众平台的四大生态体系，它们面向不同的用户群体，应用于不同的方向和用途。

特征：

1.无须安装        2.触手可及        3.用完即走        4.无须卸载

特点：

1.简单的业务逻辑        2.低频度的使用场景

开发工具界面功能介绍

1.工具栏        2.模拟区        3.目录文件夹        4.编辑区       

5.调试区

Console面板        Sources面板        Security面板        Storage面板        AppData面板

Wxml面板        Sensor面板        Trace面板        扩展菜单栏

第二章

小程序的基本目录结构

主体文件

pages：目录中又2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

utils：目录用来存放一些公共的.js文件。

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

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

app.wxss：小程序住样式表文件，类似HTML的.css文件。

页面文件

index.json：页面配置文件。

index.ts/js：页面逻辑文件，用控制代码逻辑。

index.wxml：页面结构文件，用来设置布局。

index.wxss：页面样式文件，用来调整页面样式。

小程序的开发框架

视图层：(wxml（结构)、wxss（样式）)这俩文件决定了看到什么东西，看到这东西长啥样。

逻辑层：用于处理事务逻辑。对小程序而言逻辑层就是所有.js脚本文件的集合。

数据层：1.页面临时数据或缓存        2.文件存储（本地存储）        3.网络存储与调用

逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过App（）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp（）获取 

页面逻辑文件

页面逻辑文件的主要功能有：

1.设置初始数据；

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

3.定义事件处理函数；

4.使用setData更新数据

页面结构文件

数据绑定

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

1.简单绑定：

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

2.运算：

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

条件数据绑定

1.wx:if条件数据绑定

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

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

列表数据绑定

1.wx:for

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

2.bolck wx:for

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

模板

1.定义模板        2.调用模板

引用页面文件

 1.import方式：

2.include方式

页面事件

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

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

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

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

页面样式文件

1.尺寸单位        2.样式导入        3.选择器       

4.wxss常用属性：

第三章

页面布局

盒子模型

边框，内边距，外边距

width（内容的宽）heigh（内容的高）

padding-top（上内边距）padding-right（右内边距）padding-bottom（下内边距）padding-left（左内边距）

border-top（上边框）border-right（右边框）border-botto（下边框）border-left（左边框）

marriage-top（上外边距）marriage-right（右外边距）marriage-bottom（下外边距）marriage-left（左外边距）

块级元素与行内元素

块级元素

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

<view/>默认为块级元素

行内元素

不会自动换行，内容追加在后。行内元素不能设置高度和宽度，其高度和宽度由内容决定

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

浮动与定位

元素浮动与清除

通过float属性来浮动

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

           left——元素向左浮动；

           right——元素向右浮动。

clear属性用于清除浮动元素对其他元素的影响

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

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

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

           none——不清除浮动。

元素定位

通过position属性可以实现页面元素的精确定位

其中，static——默认值，该元素按照标准流进行分布；

           relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它；

           absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响；

            fixed——固定定位，相对于浏览器窗口进行定位。

flex布局

容器属性

1.display

display用来指定元素是否为flex布局其中，flex——块级布局，inline——行内布局

2.flex-direction

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

其中，（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

5.justify-content

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

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

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

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

           （c）center——居中(c)

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

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

6.align-items

align-items用于指定项目在交叉轴上的对其方式

其中，flign-items——与交叉轴的方向有关，默认交叉由上到下

           （b）flex-start——交叉轴起点对齐

           （c）flex-end——交叉轴中心对齐

           （d）center——交叉轴中线对齐

           （a）baseline——项目根据它们第一行文字的基线对齐

           （e）stretch——如果项目未设置高度或者设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值

7.align-content

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

其中，space-between——与交叉轴两端对齐，轴线之间的间隔平均分布

           space-aroundo——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框价格大一倍

项目属性

本项目支持6个属性

1.order

order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0

2.flex-grow

flex-grow定义项目的放大比例，默认值为0

3.flex-shrink

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

4.flex-basis

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

5.flex

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

6.align-self

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

第四章

页面部件

组件的定义及属性

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

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

class：组件的样式类，对应wxss中定义的样式

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

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

data-*：自定义属性，租价触发事件时，会发送给事件处理函数

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

容器视图组件

1.view

是一个块级元素，类似于 div（小程序里面没有 div标签 ），里面可以放任何内容或者插值表达式，如下所示： <view>这是view标签<view> <view>{{num}}</view> 1

2.scroll-view

网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容

scroll-x： 允许横向滚动

scroll-y： 允许纵向滚动

3.swiper

用于设置轮播图效果

基础内容组件

1.icon

icon组件即图标组件，通常表示一种状态

2.text

组件 text 用来显示文本

3.progress

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

表单组件

1.button

按钮组件

2.radio

单选按钮组件

3.checkbos

复选框组件

4.switch

开关选择器

5.slider

数值滑块，有max、min最大、最小值，step步数，show-value与progress类似，表示是否在右端显示数值

6.picker

用来实现选择器功能的，允许用户在多个选项中进行选择。 它可以呈现多种形式，如单列选择、多列联动选择等。

7.picker-view

滚动选择器

8.input

用来实现文本输入

9.textarea

实现多行的文本输入

10.label

用来改进表单组件的可用性，将控件放在该标签下，当点击时，就会触发对应的控件，目前主要用于Switch、Radio、Checkbox组件

11.form

使自定义组件有类似的表单控件的行为

多媒体组件

1.image

图像组件，用于显示图片

2.audio

音频组件，用于播放音频

3.video

视频组件，用于播放网络或者本地视频

4.camera

相机组件

其他组件

1.map

地图组件

2.canvas

画布组件，用于绘制一些图形

第五章

即速应用概述

即速应用的优势

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

即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮（单店版、多店版）、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。
这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率。
3．丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算；社区体系可以实现评论留言和话题管理；多商家系统可以实现分店统一管理、多门店统一运营；营销工具可以实现会员卡、优惠券的设置等营销方式……
目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。
即速应用的应用范围主要包括以下类型：
（1）资讯类：新闻、媒体。
（2）电商类：网购（服装、电器、读书、母婴……）。
（3）外卖类：餐饮及零售。
（4）到店类：餐饮及酒吧。

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

即速应用界面介绍

1.菜单栏        2.工具栏        3.编辑区        4.属性面板

即速应用组件

布局组件

1.双栏组件        2.面板组件        3.自由面板组件        4.分割线组件        5.弹窗组件

6.滑动面板组件        7.动态分类组件        8.分类导航组件        9.侧边栏组件        10.悬浮窗组件

11.分类横滑组件

基本组件

1.文本组件        2.图片组件        3.按钮组件        4.标题组件        5.商品列表组件

6.视频组件        7.轮播组件        8.公关组件

小程序后台管理

1.总览         

2.用户管理

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

3.商品管理

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

4.系统上传

即速应用可以将小程序的代码打包，该代码包可以通过微信开发者工具来对接微信小程序

第六章

网络API

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生API接口或第三方API提供了各类接口实现前后端交互

发起网络请求

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

下载文件

下载图片

多媒体API

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

图片API

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

1.选择图片或拍照

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

2.预览图片

wx.previewImage(Object)接口主要用于预览图片

3..获取图片信息

wx.getImageInfo(Object)接口用于获取图片信息

4.保存图片到系统相册

wx.saveImageToPhotosAlbum(Object)接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum

录音API

录音API提供了语音录制的功能，主要包括以下两个API接口：
wx.startRecord（Object）接口用于实现开始录音。
wx.stopRecord（Object）接口

1.开始录音

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

2.停止录音

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

音频播放控制API

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

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

wx.stopVoice（Object）接口 用于结束播放语音

1.播放语音

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

2.暂停播放

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

3.结束播放

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

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

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

4.删除本地文件

wx. removeSaveFile（Object）接口用于删除本地存储的文件

5.打开文件

wx.openDocument(Object)接口用于新开页面打开文档，支持格式有doc、xsl、ppt、 pdf、 docs、 xlsx、 ppts

本地数据及缓存

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过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.wx.setStorage(Object)

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

2.wx.setStorageSync(key,data)

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

二.获取数据

1.wx.getStorage(Object)

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

2.wx.getStorageSync(key)

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

三.删除数据

1.wx.removeStorage（Object)

wx.removeStorage（Object)接口用于从本地缓存中异步移除指定key

2.wx.removeStorageSync(key)

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

四.清空数据

1.wx.clearStorage()

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

2.wx.clearStorageSync()

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

位置信息API

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

网络状态

1.获取网络状态

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

2.监听网络状态变化

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

3.拨打电话

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

4.扫描二维码

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