微信小程序开发与运营总结

第一章——微信小程序概述

认识微信小程序

小程序简介

微信小程序是由腾讯公司在2011年1月21日推出的，最终在2017年1月正式上线

小程序的特征

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

小程序应用场景的特点

1.简单的业务逻辑

2.低频度的使用场景

微信小程序开发流程

1.注册小程序账号

2.开发环境准备

3.微信开发工具的下载及安装

4.创建第一个小程序项目

5.运行及发布小程序

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

五大区域：工具栏、模拟区、目录文件区、编辑区和调试区

工具栏：实现多功能

模拟区：选择模拟手机的类型、显示比例、网络类型

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

编辑区：实现对代码的编辑操作

调试区：进行代码调试及排查有问题的区域。9个调试功能模块：Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单栏“：”是定制与控制开发工具按钮

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

小程序的基本目录结构

基本目录结构中，项目主目录下有2个子目录（pages和utils）和四个文件（app.js、app.json、app.wxss和project.config.json）

project.config.json：项目配置文件，包含项目名称、AppID等相关信息。

pages:有两个子目录（index和log）一个页面包含4个不同的扩展名（.wxml（页面结构文件）、.wxss（页面样式文件）、.js（页面逻辑文件）、.json（页面配置文件）

Utils:工具包，用来存放一些公共的.js文件

1.主体文件

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

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

app.wxss:小程序主样式表文件，类似HTML的.css文件(就近原则）

2.页面文件

.js:逻辑文件

.json:配置文件

.wxml:结构文件

.wxss:样式文件

小程序的开发框架

1.视图层

视图层是所有.wxml文件与.wxss文件的集合；.wxml文件用来描述页面的结构；.wxss文件用来描述页面的样式。

2.逻辑层

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

3.数据层

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

1.页面临时数据或缓存
在Page（）中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

setData（）函数的参数接受一个对象，以（key,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:原窗口打开页面

配置文件

1.全局配置文件

1) pages配置项

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

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

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

2)Window配置项

 3）tabBar配置项

tabBar中的list选项 

4）networkTimeout配置项 

5)debug配置项 

2.页面配置文件

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容

逻辑层文件

1.项目逻辑文件（app.js）

2.页面逻辑文件

Page（）方法用来注册一个页面，并且每个页面有且仅有一个

1）设置初始数据

数据必须是可以转成JSON的格式（字符串、数字、布尔值、对象、数组）。

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

页面的生命周期函数主要有：onLoad、onShow、onReady、onHide、onUnload

onLoad：页面加载函数

onShow：页面显示函数

onReady：页面数据绑定函数

onHide：页面隐藏函数

onUnload：页面卸载函数

3）定义事件处理函数

4）使用setData更新数据 

页面结构文件

1.数据绑定

数据绑定使用Mustache语法（{{}}）将变量或运算规则包起来

1）简单绑定（{{ }}）（内容、组件属性、控制属性）

2）运算{{ }}（算术运算、逻辑运算、三元运算、字符运算）

2.条件数据绑定

1）wx:if——判断是否数据绑定当前组件

2）block wx:if——多个组件进行条件数据绑定

3.列表数据绑定

1）wx:for——绑定数组，将数据中的各项数据循环进行数据绑定

2）block wx:for——多个组件进行列表数据绑定

4.模板

1）定义模板

语法：<template name="模板名">

2）调用模板

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

5.引用页面文件

1）import方式：定义模板代码

2）include方式：除模板之外的其他代码

6.页面事件

1）定义事件函数 在.js文件实现

2）调用事件 注册事件

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

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

页面样式文件（WXSS）

第三章——页面布局

盒子模型

盒子模型结构

盒子模型元素

块级元素与行内元素

块级元素与行内元素：display属性控制

1.块级元素：

特点：一个块级元素占一行如添加新的块级元素自动换行

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

2.行内元素

display属性设置为inline

特点：不能设置高度和宽度

           同一块内，行内元素与其他行内元素同占一行

3.行内块元素

display属性设置为inline—block

特点：可以设置高度、宽度、内外边距

           元素可以显示在同一行

浮动与定位

1.元素浮动与清除

浮动：float属性定义浮动

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

         left——元素向左浮动

         right——元素向右浮动

清除：clear属性定义清除

          left——清除左边浮动的影响

         right——清除右边浮动的影响

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

         none——不清除浮动

2.元素定位

position属性来实现页面元素的精准定位

    static:默认值

    relative:相对定位

    absolute:绝对定位

    fixed：固定定位

flex布局

flex布局模型

1.容器属性

1）display 

flex——块级flex布局，该元素变为弹性盒子

inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex布局规范

2）flex-direction

row——主轴为水平方向，起点在左端

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

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

column-reverse——主轴为垂直方向，起点在底端

3）flex-wrap

nowrap——不换行，默认值

wrap——换行，第一行在上方

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

4）flex-flow

row nowrap——默认值  

是flex-direction和flex-wrap的组合形式

格式： .box{flex-flow:<flex-direction>||<flex-wrap>;

5）justify-content

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

flex-start——左对齐，默认值

flex-end——右对齐

center——居中

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

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

6）align-items

align-items——与交叉轴方向有关，默认交叉由上到下

flex-start——交叉轴起点对齐

flex-end——交叉轴终点对齐

center——交叉轴中线对齐

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

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

7）align-content

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

space-around——每根轴线两侧的间隔都相等，轴线之间的间隔比轴线轴线于边框之间大一倍

2.项目属性

1）order(顺序) 数值越小，排名越靠前，默认值为0

2）flex-grow(放大）默认值为0，即不放大

3）flex-shrink(缩小） 默认值为1，如果空间不足，该项目将被缩小

4）flex-basis(进行缩放)  定义伸缩项目的基准值，剩余的空间将按比例进行缩放，默认值：auto

5）flex  是对flex-grow、flex-shrink、flex-basis的简写，默认值为0、1、auto。

6）align-self  该属性会重写默认的对齐方式，除了auto以外，其余属性与容器align-items属性一致

第四章——页面组件

组件的定义及属性

组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。

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

属性：

id  组件的唯一的标识，保持整个页面唯一，不常用。

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

style  组建的内联样式，可以动态设置内联样式。

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

容器视图组件

view

块级租件，主要用于布局展示。

scroll-view

可以实现滚动视图的功能

注意：

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

2）请勿在scroll-view组件中使用textarea、map、canva、video组件。

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

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

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

swiper

可以实现轮播图、图片预览、滑动页面等效果。

基础内容组件

icon（图标组件）

text（文本组件）

progress（进度条组件）

表单组件

button

用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。

3种状态：默认点击（default）、建议点击（primary）、谨慎点击（warn）

radio（单选框）

checkbox（复选框)

switch（开关选择器）

slider（滑动选择器）

picker（滚动选择器）

1.普通选择器（select）

2.多列表选择器（multiSelector）

3.时间选择器（time）

4.日期选择器（data）

 

5.省市选择器（region)

 

picker-view（嵌入页面的滚动选择器）

input（输入框）

textarea（多行输入框）

label（标签组件）

form（表单组件）

多媒体组件

image（图像组件）

缩放模式：

scaleToFill  不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
aspectFit     保持纵横比缩放图片，使图片的边长能完全显示出来。
aspectFill     保持持纵横比缩放图片，只保证图片的短边能完全显示出来。（一个方向会发生截取）
widthFix       宽度不变，高度自动变化，保持原图宽高比不变。

剪裁模式：

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

audio(音频组件）

video（视频组件）

实现视频播放和暂停，默认宽度为300px，高度为225px

camera（系统相机组件）

其他组件

map（地图或路径）

map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引。

map组件属性

map组件markers属性的相关属性

map组件polyline属性的相关属性

canvas（图形）

canvas组件用来绘制图形的图布。

第五章——即速应用

即速应用概述

即速应用的优势

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

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

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

即速应用界面介绍

1.菜单栏

2.工具栏

包括页面管理和组件库

3.编辑区

用来制作小程序页面的主要区域

4.属性面板

设置选定组件的属性及样式

“组件”选项卡用来设置组件内容及点击事件

“组件样式”选项卡用来设置组件的样式

即速应用组件

即速应用组件

布局组件

1.双栏组件

2.分割线组件

3.弹窗组件

4.面板组件

5.自由面板组件

6.滑动面板组件

7.动态分类组件

8.分类导航组件

9.侧边栏组件

10悬浮窗组件

11.分类横滑组件

基本组件

1.文本组件

2.图片组件

3.按钮组件

4.标题组件

5.商品列表组件

6.视频组件

8.轮播组件

9.公告组件

高级组件

1.动态列表组件

2.个人中心组件

3.动态表单组件

4.评论组件

5.计数组件

6.地图组件

7.悬浮框组件

其他组件

1.音频组件

2.动态容器组件

即速应用后台管理

1.数据统计

2.用户管理

3.商品管理

4.订单管理

5.营销推广

6.账单总结

7.店铺管理

8.功能模块

9.系统设置

打包上传

二次开发小程序是通过下载代码进行导入运行具体如下：

系统设置 / 微信小程序设置 / 版本设置

第六章——API应用

网络API

发起网络请求(wx.request(Object))

实现向服务器发送请求、获取数据等各种网络交互操作。

上传文件(wx.uploadFile(Object))

用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST 请求。

下载文件(wx.downloadFile(Object))

用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET 请求，返回文件的本地临时路径。

多媒体API

图片API

1.选择图片或拍照(wx.chooseImage(Object))

2.预览图片(wx.previewImage(Object))

3.获取图片信息(wx.getImageInfo(Object))

4.保存图片到系统相册(wx.saveImageToPhotosAlbum(Object))

录音API

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

 

2.停止录音(wx.stopRecord(Object))——用于实现主动调用停止录音

音频播放控制API

1.播放语音(wx.playVoice(Object))

用于开始播放语音，同时只允许一个语言文件播放。

2.暂停播放(wx.pauseVoice(Object))——用于暂停正在播放的语音。如果想从头播放需要调用wx.stopVoice()

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

音乐播放控制API

1.播放音乐(wx.playBackgroundAudio(Object))

2.获取音乐播放状态(wx.getBackgroundAudioPlayerState(Object))

相关参数

成功返回相关参数

3.控制音乐播放进度(wx.seekBackgroundAudio(Object)）

4.暂停播放音乐(wx.pauseBackgroundAudio())

5.停止播放音乐(wx.stopBackgroundAudio())

6.监听音乐播放(wx.onBackgroundAudioPlay(CallBack))

7.监听音乐暂停(wx.onBackgroundAudioPause(CallBack))

8.监听音乐停止(wx.onBackgroundAudioStop(CallBack))

文件API

1.保存文件(wx.saveFile(Object))——用于保存文件到本地

2.获取本地文件列表(wx.getSavedFileList(Object))——用于获取本地已保存的文件列表

3.获取本地文件的文件信息(wx.getSaveFileInfo(Object))——用于获取本地文件的文件信息

4.删除本地文件(wx.removeSaveFile(Object))——用于删除本地存储的文件

5.打开文档(wx.openDocument(Object))——用于新开页面打开文档

本地数据及缓存API

保存数据

1.wx.getStorage(Object))——将数据存储到本地缓存接口指定的key中

2.wx.getStorageSync(key，data)——是同步接口，参数只有key和data 

获取数据

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

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

删除数据

1.wx.removeStorage(Object)——用于从本地缓存中异步移除指定key

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

清空数据

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

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

位置信息API

获取位置信息(wx.getLocation(Object))

用于获取当前用户的地理位置、速度，需要用户开启定位功能

相关参数

成功返回相关信息

选择位置信息(wx.chooseLocation(Object))

用于在打开的地图中选择位置

相关参数

成功返回相关信息

显示位置信息(wx.openLocation(Object))

用于在微信内置地图中显示位置信息

设备相关API

获取系统信息(wx.getSystemInfo(Object))、wx.getSystemInfoSync())

相关参数

成功返回相关信息

网络状态

1）获取网络状态(wx.getNetworkType(Object))

成功调用后，返回网络类型包有：wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）

2）监听网络状态变化(wx.onNetworkStatusChange(CallBack))

用于监听网络状态变化，当网络状态发生变化时，返回当前网络状态类型及是否有网络连接。

拨打电话(wx.makePhoneCall(Object))

用于实现调用手机拨打电话

扫描二维码(wx.scanCode(Object))

用于调起客户端扫码页面

相关参数

成功返回相关信息