微信小程序开发和运营思维导图模板_ProcessOn思维导图、流程图

微信小程序概述

认识微信小程序

小程序简介

微信（WeChat)是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序，于2017年1月上线。

小程序的特性

1. 无需安装

2. 触手可及

3. 用完即走

4. 无需卸载

小程序应用场景的特点

简单的业务逻辑

使用频率低

微信小程序开发流程

注册小程序账号

开发环境准备

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

创建第一个小程序项目

运行及发布小程序

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

工具栏

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

模拟区

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

编辑区

目录文件区

来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件
的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相
关操作。

调试区

1：Console 面板

调试小程序的控制面板，便于开发者排查错误

2：Sources 面板

源文件调试信息页，用于显示当调试区左侧显示的是源文件的目录结构

3：Network面板

网络调试信息页，用于观察和显示网络请求reauest和 socket等网络相关
的详细信息

4：Security面板

安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问
题。

5：Storage 面板

数据存储信息页，开发者可以使用Wx.setStorage或者Wx.setStorageSync将数据
存储到本地存储，存储在本地存储中的变心可以在Storage面板中显示。

6：AppData面板

实时数据信息页，用于显示项目中被激活的所有页面的数据情况。

7：Wxml面板

布局信息页，主要用于调试Wxml 组件和相关CSS样式，显示Wxml转的界面。

8：Sensor面板

重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟杉动设备
用于调试重力感应API。

9：Trace 面板

路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android) 设备的路由信息。

扩展菜单项

扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息。

微信小程序开发基础

小程序的基本目录

主体文件

app.js

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

app.json

公共设置文件，配置小程序全局设置。

app,wxss

主样式表文件，类似HTML的.css文件

页面文件

.js文件

页面逻辑文件，编写JavaScript代码控制页面

.wxml文件

页面结构文件，设计页面布局，数据绑定

.wxss文件

页面样式表文件，定义各类样式表

.json文件

页面配置文件

小程序的开发框架

视图层

由WXML和WXSS编写，组件进行展示。

逻辑层

用于处理事务逻辑

数据层

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

创建小程序页面

创建第一个页面文件

创建另一个页面文件

配置文件

全局配置文件

1. pages配置项

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

2. window配置项

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

3. tabBar配置项

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

list(列表）接受数组值，数组中的每一项也都是一个对象。

4. networkTimeout配置项

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

5. debug配置项

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

页面配置文件

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json）中的配置值。

逻辑层文件

项目逻辑文件

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

页面逻辑文件

1.设置初始数据

是对页面的第一次数据绑定，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。

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

定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。

3.定义事件处理函数

开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加人事件定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数。

4.使用setData跟新数据

在Page对象中封装了一个名为setData()的函数，用来更新data中的数据。函数参数为Object，以“key:value”对的形式表示将this.data 中的key对应的值修改为value。

页面结构文件

数据绑定

1. 简单绑定

使用双大括号({{}})将变量包起来，在页面中直接作为字符串输出使用。

2.运算

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

条件数据绑定

1. wx:if条件数据绑定

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

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

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

列表数据绑定

1. wx:for

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

2. block wx:for

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

模板

1.定义模板

定义模板的格式为:
<template name="模板名">

2.调用模板

调用模板的格式为:
<template is="模板名称"data=="{{传入的数据}}"/>

引用页面文件

1. import方式

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

2. include方式

include方式可以将源文件中除模板之外的其他代码全部引入

页面事件

小程序中的事件是用户的一种行为或通信方式，需要定义事件函数和调用事件。

冒泡事件

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

非冒泡事件

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

页面样式文件

1尺寸单位

WXSS在此基础上增加了尺寸单位rpx (respnesive pixel)。WXSS规定屏幕宽度为750 rpx,在系统数据绑定过程中rpx会按比例转化为px。

2样式导入

如果需要在某个文件中引用另一个样式文件，使用@ import语句导人即可。

3选择器

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

4WXSS常用属性

页面布局

盒子模型

块级元素和行内元素

块级元素

(１) 一个块级元素占一行。

(２) 块级元素的默认高度由内容决定, 除非自定义高度。

(３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度。

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

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

行内元素

(１) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。

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

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

行内块元素

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

浮动和定位

元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制, 移到其父元素中指定位置的过程。

元素定位

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

flex布局

容器属性

1.display

display 用来指定元素是否为flex 布局,

2.flex——direction

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

3.flex-wrap

flex －wrap 用来指定当项目在一根轴线的排列位置不够时, 项目是否换行

4.flex-flow

flex－flow 是flex －direction 和flex-wrap 的简写形式, 默认值为row nowrap

5.justify-content

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

6.align-items

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

7.align-content

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

项目属性

1.order

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

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属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。

页面组件

组件的定义和属性

组件是页面视图层(wxml) 的基本组成单元, 组件组合可以构建功能强大的页面结构

容器视图组件

1.view

view组件是块级组件, 没有特殊功能, 主要用于布局展示

2.scroll-view

相关属性可以实现滚动视图的功能

3.swiper

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

基础内容组件

1）icon

icon组件即图标组件, 通常用于表示一种状态, 如success、info、warn、waiting、cancel等

2）text

text组件用于展示内容, 类似HTML中的<span>,text组件中的内容支持长按选中, 支持转义字符“/”属于行内元素

3）progress

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

表单组件

1）button

button组件用来实现用户和应用之间的交互, 同时按钮的颜色起引导作用

2）radio

单选框用来从一组选项中选取一个选项

3）checkbox

复选框用于从一组选项中选取多个选项, 小程序中复选框由< checkbox－group/ > (多项选择器) 和<checkbox/ > (多选项目) 两个组件组合而成

4）switch

switch组件的作用类似开关选择器

5）slider

slider组件为滑动选择器, 可以通过滑动来设置相应的值

6）picker

picker组件为滚动选择器, 当用户点击picker组件时, 系统从底部弹出选择器供用户选择

１.普通选择器

2.多列选择器

多列选择器(mode＝multiSelector) 允许用户从不同列中选择不同的选择项, 其选项是二维数组或数组对象

3.时间选择器，日期选择器

4.省市选择器

7）picker-view

picker－view组件为嵌入页面的滚动选择器

8）input

input组件为输入框,用户可以输入相应的信息

9）textarea

textarea组件为多行输入框组件, 可以实现多行内容的输入

10）label

lable组件为标签组件, 用于提升表单组件的可用性

11）from

form组件为表单组件,用来实现将组件内的用户输入信息进行提交

多媒体组件

image

image组件为图像组件

1.缩放模式

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

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

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

widthFix宽度不变, 高度自动变化, 保持原图宽高比不变。

２.裁剪模式

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

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

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

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

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

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

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

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

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

audio

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

video

video组件用来实现视频的播放、暂停等

camera

camera组件为系统相机组件,可以实现拍照或录像功能

其他组件

map

map组件用于在页面中显示地图或路径

canvas

canvas组件用来绘制图形, 相当于一块无色透明的普通图布

即速应用

即速应用概述

即速应用的优势

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

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

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

即速应用界面介绍

1.菜单栏

2.工具栏

3.编辑区

4.属性面板

即速应用组件

布局组件

１.双栏组件

添加基本的组件,从而达到整体的布局效果

２.面板组件

基本(甚至高级) 的组件，放进面板组件里一起管理

３.自由面板组件

指放置在该面板内的组件可以自由拖动,调节组件大小

４.顶部导航组件

固定于页面顶部,用于编辑顶部的导航

５.底部导航组件

固定于页面底部,用于编辑底部的导航

６.分割线组件

被放置于任意组件之间,用于实现分割

７.动态分类组件

适用于电商、到店类小程序

基本组件

１.文本组件

用于展示文字、设置点击事件

２.图片组件

展示图片

３.按钮组件

设置按钮

４.标题组件

设置标题

５.轮播组件

用于实现图片的轮播展示

６.分类组件

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

７.图片列表组件

将图片以列表的形式展示, 还可以设置图片的名称、标题和点击事件

８.图文集组件

用于展示图片、标题和简介

９.视频组件

用于展示视频

高级组件

１.动态列表组件

是容纳基础组件来展示后台数据的容器

２.个人中心组件

显示个人相关信息的组件

３.动态表单组件

是一个容器组件

４.评论组件

提供信息发布或回复信息的组件

５.计数组件

可以用于点赞、统计浏览量等类似的计数功能

６.地图组件

７.城市定位组件

与列表类组件搭配使用

８.悬浮窗组件

悬浮窗组件通常出现在个人中心或商品列表页面

其他组件

１.音频组件

用于播放音乐

２.动态容器组件

用于动态页面, 即所在页面绑定了数据对象

１.数据管理

包括数据总览、访客分析和传播数据功能。

２.分享设置

主要提供可以分享应用的方式

３.用户管理

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

４.应用数据

应用数据是后台管理的主要内容

５. 轮播管理

是前端软播组件的后台数据管理器

６. 分类管理

通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果

７. 商品管理

是后台管理的主要内容, 前端商品列表组件的数据来源于后台商品管理

８.经营管理

主要包括子账号管理、手机端客户关系管理和短信接收管理, 便于管理者管理小程序的运营

９.营销工具

是小程序营销推广的有力工具

10.多商家管理

管理功能

即速应用后台管理

打包上传

打包

进入即速应用后台管理, 选择左边选项“分享设置” 按钮, 单击“微信小程序” 选项, 进入如图所示的页面。选择“代码包下载” 选项, 单击“确定” 按钮, 进入如图所示的页面。通过“微信公众平台→小程序→设置→开发设置” 获取ＡｐｐＩＤ和ＡｐｐＳｅｃｒｅｔ, 在“服务器配置” 中填写相关信息, 选择相应分类, 单击“打包” 按钮, 即可成功打包

上传

打开微信Web开发者工具, 新建项目, 并填写相关内容。其中, 项目目录为下载包解压后的目录，单击“确定” 按钮, 打开小程序代码, 编译无误后, 填写该项目的版本号, 单击“上传” 按钮即可实现该小程序代码上传，上传成功后, 打开微信公众平台的“开发管理” 界面, 就可以看到该小程序的版本信息

API应用

网络API

发起网络请求

wx.request(Object) 实现向服务器发送请求、获取数据等各种网络交互操作

上传文件

wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器

下载文件

wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地

多媒体API

图片API

1.选择图片或拍照

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

２.预览图片

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

３.获取图片信息

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

４.保存图片到系统相册

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

录音API

１.开始录音

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

２.停止录音

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

音频播放控制API

１.播放语音

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

２.暂停播放

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

３.结束播放

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

音乐播放控制API

１.播放音乐

wx.playBackgroundAudio(Object)用于播放音乐

2.获取音乐播放状态

wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态

３.控制音乐播放进度

wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度

4.暂停播放音乐

wx.pauseBackgroundAudio()接口用于暂停播放音乐

5.停止播放音乐

wx.stopBackgroundAudio()接口用于停止播放音乐

6.监听音乐播放

wx.onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放，通常被wx.playBackgroundAudio(Object)方法触发,在CallBack中可改变播放图标

7.监听音乐暂停

wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停,通常被wx.pauseBackgroundAudio()方法触发

8.监听音乐停止

wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止,通常被音乐自然播放停止或wx.seekBackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发

9.案例展示

文件API

１.保存文件

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

２.获取本地文件列表

wx.getSaveFileList(Object) 接口用于获取本地已保存的文件列表

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

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

４.删除本地文件

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

５.打开文档

wx.openDocument(Object)接口用于新开页面打开文档

本地数据及缓存API

保存数据

１.wx.setStorage(Object)

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

２.wx.setStorageSync(key,data)

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

获取数据

１.wx.getStorage(Object)

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

２.wx.getStorageSync(key)

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

删除数据

１.wx.removeStorage(Object)

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

２.wx.removeStorageSync(key)

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

清空数据

１.wx.clearStorage()

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

２.wx.clearStorageSync()

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

位置信息API

获取位置信息

wx.getLocation(Object)接口用于获取当前用户的地理位置、速度

选择位置信息

wx.chooseLocation(Object)接口用于在打开的地图中选择位置

显示位置信息

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

设备相关API

获取系统信息

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

网络状态

１.获取网络状态

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

２.监听网络状态变化

wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化

拨打电话

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

扫描二维码

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

案例分析——秦岭山水

准备工作

创建数据文件

data.js文件数据

创建项目目录结构

image目录存放项目的所有图像，pages目录中的项目页分别为index（首页）、detail（内容页）、detail-all（详情页）和booking（预约页），utils目录中包括项目中所有数据的data.js文件以及小程序的项目配置文件。

app.json文件结构

首页

轮播项

导航项

列表项

内容页

详情页

预约页

小程序后端开发

比目后端云简介

注册Bmob账号

创建应用

配置小程序密钥

下载及安装Bomb SDK

数据的增、删、改、查

创建表及字段

在“test” 表中添加id、title、content、image列,Bmob提供Number、String、Boolean、Date、File、Geopoint、Array、Object、Pointer、Relation共10种字段类型,创建列

添加一条记录

添加一条记录用来实现把从前端获取的数据添加到服务端数据表中，主要用Bmob提供的SDK对象实现

获取一条记录

获取一条记录是指从数据表中查询一条记录，主要根据objectId值来直接获取单条数据对象

修改一条数据

修改一条记录，则首先需要获取更新后的Bmob. Object对象，将值修改后保存数据就可以了

删除一条数据

删除一条记录可以使用Bmob.Object的destroy方法

查询所有数据

为了获取某个数据表中的所有数据，我们可以通过Bmob提供的Query对象来实现

条件查询

Bmob中提供的查询方法主要有：等于（equalTo）、不等于（notEqualTo）、小于(lessThan）、小于等于（lessThanOrEqualTo）、大于（greaterThan）、大于等于（greaterThanOrEqualTo）等

分页查询

limit方法限制查询结果的数据条数来进行分页

skip方法可以做到跳过查询的前多少条数据来实现分页查询的功能

上传图片

上传一张图片并显示

Bmob提供了文件后端保存功能。利用这一功能，我们可以把本地文件上传到Bmob后台，并按上传日期为文件命名

上传多张图片并显示

Bmob支持一次传多张图片，并将图片保存到素材库中

小程序运营

线上运营推广方式

附近的小程序入口

通过关键词推广

通过公众号关联方式推广

1）相互转化

2）更多营销

3）更多的·流量

通过好友分享、社群和朋友圈推广

线下推广方式

1.通过特定场景做线下推广

2.通过已有门店做线下推广

通过地面推广的方式做线下推广

第三方推广

1小程序商店、公众号

2.新媒体软文

3.运营公司推广

小程序营销优势

转化率高

数据准确

门槛更低

合理裂变

小程序运营案例

快速购物

社交能力

快速导航

历史信息