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

认识微信小程序

小程序介绍

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

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

小程序的特征

1，无需安装
小程序内嵌于微信程序之中，用户在使用过程中无需在应用商店下载安装外部应用。

2，触手可及
用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通。

3，用完即走
用户在线下场景中，当有相关需求，可以直接进入小程序，使用服务功能后便可以对其他不理会，实现用完即走。

4，无需卸载
用户在用完小程序后可以直接关闭小程序，无需卸载。

小程序应用场景的特点

子主题

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

微信小程序开发流程

注册小程序账号

界面1

界面2

界面3

界面4

开发环境准备

子主题

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

创建第一个小程序项目

运行及发布小程序

子主题

工具栏

模拟器

目录文件区

编辑区

调试区

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

微信小程序开发基础

小程序的基本目录结构

主体文件

app.js

app.json

app.wxss

project.config.json

页面文件

子主题

小程序的开发框架

视图层

数据层的解释

逻辑层

数据层的解释

数据层

数据层的解释

创建小程序页面

创建第一个页面文件

创建其他页面文件

配置文件

全局配置文件

pages配置项

window配置项

taBar配置项

network配置项

debug配置项

页面配置文件

逻辑层文件

项目逻辑文件

页面逻辑文件

页面逻辑文件配置项

页面结构文件

数据绑定

简单绑定

运算

条件数据绑定

wx:if条件数据绑定

block wx:if条件数据绑定

列表数据绑定

wx:for

block wx:for

模版

定义模版

调用模版

引用页面文件

import方式

include方式

页面事件

定义事件函数

调用事件

冒泡事件

非冒泡时间

页面样式文件

尺寸单位

样式导入

选择器

WXSS常用属性

页面布局

盒子模型

微信小程序的视图层由ＷＸＭＬ和ＷＸＳＳ组成。其中 , ＷＸＳＳ ( ＷｅｉＸｉｎＳｔｙｌｅＳｈｅｅｔｓ ) 是基于ＣＳＳ拓展的样式语言 , 用于描述ＷＸＭＬ的组成样式 , 决定ＷＸＭＬ的组件如何显示。ＷＸＳＳ具有ＣＳＳ的大部分特性 , 因此 , 本章将重点讲解ＣＳＳ中的布局相关内容。
在页面设计中 , 只有掌握了盒子模型以及盒子模型的各个属性和应用方法 , 才能轻松控制页面中的各个元素。
盒子模型就是我们在页面设计中经常用到的一种思维模型。在ＣＳＳ中 , 一个独立的盒子模型由内容 ( ｃｏｎｔｅｎｔ ) 、内边距 ( ｐａｄｄｉｎｇ ) 、边框 ( ｂｏｒｄｅｒ ) 和外边距 ( ｍａｒｇｉｎ ) ４个部分组成

块级元素与行内元素

块级元素

块级元素默认占一行高度 , 一行内通常只有一个块级元素 ( 浮动后除外 ), 添加新的块级元素时 , 会自动换行 , 块级元素一般作为盒子出现。块级元素的特点如下 :
( １ ) 一个块级元素占一行。
( ２ ) 块级元素的默认高度由内容决定 , 除非自定义高度。
(３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度

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

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

行内元素

行内元素 , 不必从新一行开始 , 通常会与前后的其他行内元素显示在同一行中 , 它们不占有独立的区域 , 仅靠自身内容支撑结构 , 一般不可以设置大小 , 常用于控制页面中文本的样式。将一个元素的ｄｉｓｐｌａｙ属性设置为ｉｎｌｉｎｅ后 , 该元素即被设置为行内元素。行内元素的特点如下 :
( １ ) 行内元素不能被设置高度和宽度 , 其高度和宽度由内容决定。
( ２ ) 行内元素内不能放置块级元素 , 只级容纳文本或其他行内元素。
(３) 同一块内, 行内元素和其他行内元素显示在同一行

行内块元素

当元素的ｄｉｓｐｌａｙ属性被设置为ｉｎｌｉｎｅ－ｂｌｏｃｋ时 , 元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

浮动与定位

元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制 , 移到其父元素中指定位置的过程。在css 中 , 通过float属性来定义浮动 , 其基本格式如下 :
{ float : none ｜left ｜right ;}
(1)其中 , none ——— 默认值 , 表示元素不浮动 ;
(2)left ——— 元素向左浮动 ;
(3right ——— 元素向右浮动。
由于浮动元素不再占用原文档流的位置 , 因此它会对页面中其他元素的排列产生影响。

元素定位

浮动布局虽然灵活 , 但无法对元素的位置进行精确的控制。在css中 , 通过postion 属性可以实现对页面元素的精确定位。基本格式如下 :
{position :static |relative|absolute|fixed}
(1)其中 , static ——— 默认值 , 该元素按照标准流进行布局 ;
(2)relative ——— 相对定位 , 相对于它在原文档流的位置进行定位 , 它后面的盒子仍以标准流方式对待它 ;
(3)ａｂｓｏｌｕｔｅ ——— 绝对定位 , 相对于其上一个已经定位的父元素进行定位 , 绝对定位的盒子从标准流中脱离 , 它对其后的兄弟盒子的定位没有影响 ;
(4)ｆｉｘｅｄ ——— 固定定位 , 相对于浏览器窗口进行定位。

flex布局

容器属性

flex容器支持的属性

ｄｉｓｐｌａｙ
ｄｉｓｐｌａｙ用来指定元素是否为ｆｌｅｘ布局 , 语法格式为 :
其中 , ｆｌｅｘ ——— 块级ｆｌｅｘ布局 , 该元素变为弹性盒子 ;
ｉｎｌｉｎｅ－ｆｌｅｘ ——— 行内ｆｌｅｘ布局 , 行内容器符合行内元素的特征 , 同时在容器内又符合ｆｌｅｘ布局规范。
设置了ｆｌｅｘ布局之后 , 子元素的float、clear 和verticalalgin 属性将失效。

ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ
ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ用于设置主轴的方向 , 即项目排列的方向 , 语法格式为 :
.box{flex-direction:row|row-reverse|column|column-reverse}
其中 , row ——— 主轴为水平方向 , 起点在左端 , 当元素设置为flex 布局时 , 主轴默认为row ;
row-reverse ——— 主轴为水平方向 , 起点在右端 ;
column——— 主轴为垂直方向 , 起点在顶端 ;
column-reverse ——— 主轴为垂直方向 , 起点在底端。

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

flex-flow
flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为rownowrap。

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

align-items
align-items用于指定项目在交叉轴上的对齐方式，其语法格式如下：
box{align-items:flex-start|flex-end|center|baseline|stretch;}
align-items———与交叉轴方向有关, 默认交叉由上到下;
flex-start———交叉轴起点对齐;
flex-end———交叉轴终点对齐;
center———交叉轴中线对齐;
baseline———项目根据它们第一行文字的基线对齐;
ｓｔｒｅｔｃｈ———如果项目未设置高度或设置为ａｕｔｏ, 项目将在交叉轴方向拉伸填充容器, 此为默认值。

项目属性

功能表

order

flex-grow

flex-shrink

flex-basis

flex

align-self

页面组件

容器视图组件

view

view组件的属性

scroll-view

scroll-view属性

swiper

swiper属性

基础内容组件

icon

icon属性

text

text属性

progress

progress属性

表单组件

button

button属性

radio

radio属性

checkbox

checkbox属性

switch

switch属性

slider

slider属性

picker

picker属性

picker-view

input

input属性

textarea

textarea属性

label

label属性：ｌａｂｅｌ组件为标签组件 , 用于提升表单组件的可用性。ｌａｂｅｌ组件支持使用ｆｏｒ属性找到对应的ｉｄ , 或者将控件放在该标签下 , 当点击ｌａｂｅｌ组件时 , 就会触发对应的控件。ｆｏｒ属性的优先级高于内部控件 , 内部有多个控件的时候默认触发第一个控件。
目前 , ｌａｂｅｌ组件可以绑定的控件有 < ｂｕｔｔｏｎ / > 、 < ｃｈｅｃｋｂｏｘ / > 、 < ｒａｄｉｏ / > 、 < ｓｗｉｔｃｈ / > 。

form

form属性

多媒体组件

image

image属性

缩放模式

裁剪模式

audio

audio属性

video

video属性

camera

camera属性

其他组件

map

map属性

canvas

canvas属性

极速应用

优势

无需编程

行业模板多样

功能丰富，管理方便

应用组件

布局组件双栏、面板、自由面板、顶部导航、底部导航、分割线和动态分类

基本组件文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频

高级组件动态列表组件动态表单组件个人中心组件评论组件计数组件城市定位组件悬浮窗组件

其他组件音频组件和动态容器组件。

后台管理

. 数据管理

分享设置

用户管理

应用数据

轮播管理

分类管理

商品管理

经营管理

.营销工具

多商家管理

API应用

网络API

ｗｘ . ｒｅｑｕｅｓｔ ( Ｏｂｊｅｃｔ ) 实现向服务器发送请求、获取数据等各种网络交互操作

参数如图1

参数如图2

ｗｘ . ｕｐｌｏａｄＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口用于将本地资源上传到开发者服务器 , 并在客户端发起一个ＨＴＴＰＳＰＯＳＴ请求

参数如图

ｗｘ . ｄｏｗｎｌｏａｄＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口用于实现从开发者服务器下载文件资源到本地 , 在客户端直接发起一个ＨＴＴＰＧＥＴ请求 , 返回文件的本地临时路径

参数如图

多媒体API

图片ＡＰＩ

ｗｘ . ｃｈｏｏｓｅＩｍａｇｅ ( Ｏｂｊｅｃｔ ) 接口　用于从本地相册选择图片或使用相机拍照。

ｗｘ . ｐｒｅｖｉｅｗＩｍａｇｅ ( Ｏｂｊｅｃｔ ) 接口　用于预览图片。

ｗｘ . ｇｅｔＩｍａｇｅＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口　用于获取图片信息。

ｗｘ . ｓａｖｅＩｍａｇｅＴｏＰｈｏｔｏｓＡｌｂｕｍ ( Ｏｂｊｅｃｔ ) 接口　用于保存图片到系统相册。

录音ＡＰＩ

ｗｘ . ｓｔａｒｔＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口　用于实现开始录音。

ｗｘ . ｓｔｏｐＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口　用于实现主动调用停止录音

音频播放控制ＡＰＩ

ｗｘ . ｐｌａｙＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口　用于实现开始播放语音。

ｗｘ . ｐａｕｓｅＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口　用于实现暂停正在播放的语音。

ｗｘ . ｓｔｏｐＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口　用于结束播放语音。

音乐播放控制ＡＰＩ

ｗｘ . ｐｌａｙＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 接口　用于播放音乐。

ｗｘ . ｇｅｔＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙｅｒＳｔａｔｅ ( Ｏｂｊｅｃｔ ) 接口　用于获取音乐播放状态。

ｗｘ . ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 接口　用于定位音乐播放进度。

ｗｘ . ｐａｕｓｅＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 接口　用于实现暂停播放音乐。

ｗｘ . ｓｔｏｐＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 接口　用于实现停止播放音乐。

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙ ( ＣａｌｌＢａｃｋ ) 接口　用于实现监听音乐播放。

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰａｕｓｅ ( ＣａｌｌＢａｃｋ ) 接口　用于实现监听音乐暂停。

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＳｔｏｐ ( ＣａｌｌＢａｃｋ ) 接口　用于实现监听音乐停止。

文件API

ｗｘ . ｓａｖｅＦｉｌｅ ( Ｏｂｊｅｃｔ ) 用于保存文件到本地

ｗｘ . ｇｅｔＳａｖｅｄＦｉｌｅＬｉｓｔ ( Ｏｂｊｅｃｔ ) 接口用于获取本地已保存的文件列表 , 如果调用成功 , 则返回文件的本地路径、文件大小和文件保存时的时间戳 ( 从１９７０ / ０１ / ０１０８ : ００ : ００到当前时间的秒数) 文件列表

ｗｘ . ｇｅｔＳａｖｅＦｉｌｅＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口用于获取本地文件的文件信息 , 此接口只能用于获取已保存到本地的文件 , 若需要获取临时文件信息 , 则使用ｗｘ . ｇｅｔＦｉｌｅＩｎｆｏ ( Ｏｂｊｅｃｔ)接口

ｗｘ . ｒｅｍｏｖｅＳａｖｅＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口用于删除本地存储的文件

ｗｘ . ｏｐｅｎＤｏｃｕｍｅｎｔ ( Ｏｂｊｅｃｔ ) 接口用于新开页面打开文档 , 支持格式有ｄｏｃ、ｘｌｓ、ｐｐｔ、ｐｄｆ、ｄｏｃｘ、ｘｌｓｘ、ｐｐｔｘ

本地数据及缓存API

ｗｘ . ｓｅｔＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 接口将数据存储到本地缓存接口指定的ｋｅｙ中 , 接口执行后会覆盖原来ｋｅｙ对应的内容。

ｗｘ.ｇｅｔＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)
ｗｘ . ｇｅｔＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 接口是从本地缓存中异步获取指定ｋｅｙ对应的内容

ｗｘ.ｒｅｍｏｖｅＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)
ｗｘ . ｒｅｍｏｖｅＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ) 接口用于从本地缓存中异步移除指定ｋｅｙ

ｗｘ . ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ ( ｋｅｙ ) 接口用于从本地缓存中同步删除指定ｋｅｙ对应的内容。其参数只有ｋｅｙ。

位置信息API

ｗｘ . ｃｈｏｏｓｅＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口　用于选择位置信息。

ｗｘ . ｏｐｅｎＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口　用于通过地图显示位置

ｗｘ . ｇｅｔＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口用于获取当前用户的地理位置、速度 , 需要用户开启定位功能 , 当用户离开小程序后 , 无法获取当前的地理位置及速度 , 当用户点击“显示在聊天顶部” 时 , 可以获取到定位信息

设备相关API

ｗｘ . ｇｅｔＳｙｓｔｅｍＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口异步获取系统信息

ｗｘ . ｇｅｔＳｙｓｔｅｍＩｎｆｏＳｙｎｃ()同步获取系统信息

ｗｘ . ｇｅｔＮｅｔｗｏｒｋＴｙｐｅ ( Ｏｂｊｅｃｔ ) 用于获取网络类型

ｗｘ.ｏｎＮｅｔｗｏｒｋＳｔａｔｕｓＣｈａｎｇｅ(ＣａｌｌＢａｃｋ)接口用于监听网络状态变化, 当网络状态变化时,返回当前网络状态类型及是否有网络连接

ｗｘ . ｍａｋｅＰｈｏｎｅＣａｌｌ ( Ｏｂｊｅｃｔ ) 接口用于实现调用手机拨打电话

ｘ . ｓｃａｎＣｏｄｅ (Ｏｂｊｅｃｔ)接口用于调起客户端扫码界面, 扫码成功

案例分析————秦岭山水

准备工作

创建数据文件

创建项目目录结构

首页

index.js

index.wxml

index.wxss

index.json

内容页

detail.js

detail.json

detail.wxml

detail.wxss

详情页

detail-all.js

detail-all.json

detail-all.wxml

detail-all.wxss

预约页

booking.js

booking.json

booking.wxml

booking.wxss

小程序后端开发

比目后端云简介

注册Bmob账号

创建应用

配置小程序密钥

获取服务器域名及在小程序配置

数据的增，删，查，改

创建表及字段

添加一条记录

获取一条记录

修改一条记录

删除一条记录

查询所有数据

条件查询

分页查询

上传图片

上传一张图片并显示

上传多张图片并显示

子主题

需求分析

视图设计

数据库设计

代码实现