小程序制作开发运营 第1篇
组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。
<标签名 属性名=“属性值”>内容标签名>
属性：
id 组件的唯一的标识，保持整个页面唯一，不常用。
class 组件的样式类，对应WXSS中定义的样式。
style 组建的内联样式，可以动态设置内联样式。
hidden 组件是否显示，所有组件默认显示。
块级租件，主要用于布局展示。
可以实现滚动视图的功能
注意：
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组件。这样做，能通过单击顶部状态栏回到页面顶部。
可以实现轮播图、图片预览、滑动页面等效果。
用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。
小程序制作开发运营 第2篇
基本目录结构中，项目主目录下有2个子目录（pages和utils）和四个文件（、、和）
：项目配置文件，包含项目名称、AppID等相关信息。
pages:有两个子目录（index和log）一个页面包含4个不同的扩展名（.wxml（页面结构文件）、.wxss（页面样式文件）、.js（页面逻辑文件）、.json（页面配置文件）
Utils:工具包，用来存放一些公共的.js文件
:小程序逻辑文件，主要用来注册小程序全局实例
:小程序公共设置文件，配置小程序全局设置
:小程序主样式表文件，类似HTML的.css文件(就近原则）
.js:逻辑文件
.json:配置文件
.wxml:结构文件
.wxss:样式文件
视图层是所有.wxml文件与.wxss文件的集合；.wxml文件用来描述页面的结构；.wxss文件用来描述页面的样式。
逻辑层用于处理事务逻辑；对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。
在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用。
1.页面临时数据或缓存 在Page（）中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的的值。
setData（）函数的参数接受一个对象，以（key,value）的形式表示将key在中对应的值改变成value。
2.文件存储（本地存储） 使用数据API接口，如下：
3.网络存储与调用 上传或下载文件API接口，如下：
调用URL的API接口，如下：
1) pages配置项
1>数组的第一项用于设定小程序的初始页面。
2>在小程序中新增或减少页面时，都需要对数组进行修改。
3>文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxss、.wxml文件进行整合数据的绑定
2)Window配置项
3）tabBar配置项
tabBar中的list选项
4）networkTimeout配置项
5)debug配置项
页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容
Page（）方法用来注册一个页面，并且每个页面有且仅有一个
1）设置初始数据
数据必须是可以转成JSON的格式（字符串、数字、布尔值、对象、数组）。
2）定义当前页面的生命周期函数
页面的生命周期函数主要有：onLoad、onShow、onReady、onHide、onUnload
onLoad：页面加载函数
onShow：页面显示函数
onReady：页面数据绑定函数
onHide：页面隐藏函数
onUnload：页面卸载函数
3）定义事件处理函数
4）使用setData更新数据
数据绑定使用Mustache语法（{{}}）将变量或运算规则包起来
1）简单绑定（{{ }}）（内容、组件属性、控制属性）
2）运算{{ }}（算术运算、逻辑运算、三元运算、字符运算）
1）wx:if——判断是否数据绑定当前组件
2）block wx:if——多个组件进行条件数据绑定
1）wx:for——绑定数组，将数据中的各项数据循环进行数据绑定
2）block wx:for——多个组件进行列表数据绑定
1）定义模板
语法：
2）调用模板
语法：
1）import方式：定义模板代码
2）include方式：除模板之外的其他代码
1）定义事件函数 在.js文件实现
2）调用事件 注册事件
冒泡事件：是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素
非冒泡事件：是指摸个组件上的事件被触发后，该事件不会向父节点传递
小程序制作开发运营 第3篇
1.开发流程简单，零门槛制作
2.行业模板多样，种类齐全
3.丰富的功能组件和强大的管理后台
1.菜单栏
2.工具栏
包括页面管理和组件库
用来制作小程序页面的主要区域
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.系统设置
二次开发小程序是通过下载代码进行导入运行具体如下：
系统设置 / 微信小程序设置 / 版本设置
小程序制作开发运营 第4篇
微信小程序是由腾讯公司在2011年1月21日推出的，最终在2017年1月正式上线
1.无须安装；2.触手可及；3.用完即走；4.无须卸载
1.简单的业务逻辑
2.低频度的使用场景
1.注册小程序账号
2.开发环境准备
3.微信开发工具的下载及安装
4.创建第一个小程序项目
5.运行及发布小程序
工具栏：实现多功能
模拟区：选择模拟手机的类型、显示比例、网络类型
目录文件区：显示当前项目的目录结构
小程序制作开发运营 第5篇
盒子模型结构
盒子模型元素
块级元素与行内元素：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布局模型
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:
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属性一致
小程序制作开发运营 第6篇
实现向服务器发送请求、获取数据等各种网络交互操作。
用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST 请求。
用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET 请求，返回文件的本地临时路径。
1.选择图片或拍照((Object))
2.预览图片((Object))
3.获取图片信息((Object))
4.保存图片到系统相册((Object))
1.开始录音((Object))——用于实现开始录音。主动调用接口或录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。要持久保存。需要调用()
2.停止录音((Object))——用于实现主动调用停止录音
1.播放语音((Object))
用于开始播放语音，同时只允许一个语言文件播放。
2.暂停播放((Object))——用于暂停正在播放的语音。如果想从头播放需要调用()
3.结束播放((Object))——用于结束播放语音
1.播放音乐((Object))
2.获取音乐播放状态((Object))
相关参数
成功返回相关参数
3.控制音乐播放进度((Object)）
4.暂停播放音乐(())
5.停止播放音乐(())
6.监听音乐播放((CallBack))
7.监听音乐暂停((CallBack))
8.监听音乐停止((CallBack))
1.保存文件((Object))——用于保存文件到本地
2.获取本地文件列表((Object))——用于获取本地已保存的文件列表
3.获取本地文件的文件信息((Object))——用于获取本地文件的文件信息
4.删除本地文件((Object))——用于删除本地存储的文件
5.打开文档((Object))——用于新开页面打开文档
(Object))——将数据存储到本地缓存接口指定的key中
(key，data)——是同步接口，参数只有key和data
(Object)——从本地缓存中异步获取指定key对应的内容
(key)——从本地缓存中同步获取指定key对应的内容，参数只有key
(Object)——用于从本地缓存中异步移除指定key
(key))——用于从本地缓存中同步删除指定key对应的内容。参数只有key。
()——用于异步清理本地数据缓存，没有参数。
()——用于同步清理本地数据缓存。
用于获取当前用户的地理位置、速度，需要用户开启定位功能
相关参数
成功返回相关信息
用于在打开的地图中选择位置
相关参数
成功返回相关信息
用于在微信内置地图中显示位置信息
相关参数
成功返回相关信息
1）获取网络状态((Object))
成功调用后，返回网络类型包有：wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）
2）监听网络状态变化((CallBack))
用于监听网络状态变化，当网络状态发生变化时，返回当_络状态类型及是否有网络连接。
用于实现调用手机拨打电话
用于调起客户端扫码页面
相关参数
成功返回相关信息