微信小程序开发与运营

简介：小程序嵌入微信中，不需要下载安装外部应用，用户通过扫描二维码和搜索相关功能的关键词即可 使用，具备无须安装，触手可及，用完即走，无需卸载的特性。

1.无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2.触手可及
用户通过扫描二维码等形式直接进人小程序，实现线下场景与线上应用的即时联通
3.用完即走
用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。
4.无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

简单的业务逻辑：简单是指应用本身的业务逻辑并不复杂。

低频度的使用场景：低频度是小程序使用场景的另一个特点。

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

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

编辑区用来实现对代码的编辑操作，编辑区中支持对wxml、.wxss、.s 及ison 文件的操作，使用组合键能提高代码的编辑效率。

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

调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9 个调试功能模块，分别是 Console、Sources、Network、Security、Storage、AppData.Wxml、Sensor 和Trace。

小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js 文件会和其他页面的逻辑文件打包成一个 JavaSeript 文件。该文件在项目中不可缺少

小程序公共设置文件配置小程序全局设置。该文件在项目中不可缺少

小程序主样式表文件，类似HTML的Scss文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

WXML

WXSS

app.js

.js

页面临时数据或缓存

文件存储

网络存储与调试

pages

window

tabBar

networkTimeout

debug

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

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

页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript 引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM 改变页面，只能采用数据绑定和事件响应来实现。

小程序在进行页面数据绑定时、框架会将WXML文件与逻辑文件中的 data 进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或 运算规则包起来。

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

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

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

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

1.wx.for

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

2.block wx:for

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

定义模板
模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板的格式为:

调用模板
将模板定义后，就可以对其进行调用了。调用模板的格式为:

< template is＝ "模板名称" data == "{{传入的数据}}" />
其中，<template>为模板标签;is属性用于指定要调用的模板名称;data属性定义要传人的数据，如果模板中不需要传人数据，data属性可以省略。

import方式
include方式

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个，如表所示。

内容的宽度和高度。

块级元素的特点如下:(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置:
(5)块级元素可以容纳块级元素和行内元素。
<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的示例代码如下:

行内元素的特点如下:

(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定。
(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素
(3)同一块内，行内元素和其他行内元素显示在同一行。
<text/>组件默认为行内元素，使用<view/>及<text>组件演示盒子模型及行内元素的示例代码如下:

行内块元素
可以被设置高度、宽度、内边距和外边距。示例代码如下:

float:none|left|right

clear:left|right|both|none

static

relative

absolute

fixed

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

view组件是块级组件，没有特殊功能，    主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面(UserInterface,I JI)组件，通过设置view 的CSS属性可以实现各种复杂的布局。

通过设置scroll-view组件的相关属性可以实现滚动视图的功能，

概念：swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/ >和<swiper-item/ >两个标签组成，它们不能单独使用。<swiper/ >中只能放置一个或多个<swiper-item/ >，若放置其他组件则会被删除；<swiper-item/ >内部可以放置任何组件，默认宽高自动设置为100%。

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

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

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

button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说在一个程序中一个按钮至少有3种状态:默认点击(default)、建议点击(primary)、谨慎点击(wam)。在构建项目时，应在合适的场景使用合适的按钮，当<buton>被<form/>包裹时，可以通过设置form-type属性来触发表单对应的事件

概念：单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/ >（单项选择器）和<radio/ >（单选项目）两个组件组合而成，一个包含多个 <radio/ >的<radio-group/ >表示一组单选项，在同一组单选项中<radio/ >是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。

概念：复选框用于从一组选项中选取多个选项，小程序中复选框由 <checkbox -group/ >（多项选择器）和<checkbox/ >（多选项目）两个组件组合而成。一个<checkbox-group/ >表示一组选项，可以在一组选项中选中多个选项

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

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

概念：picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。

概念：picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过<picker-view-column/ >自定义设置。

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

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

概念：label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下，当点击label组件时，就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前，label组件可以绑定的控件有<button/ >、<checkbox/ >、<radio/>、<switch/ >。

概念：form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/ >表单中formType为submit的<button/ >组件时，会将表单组件中的value值进行提交。

image组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、高度为2250 px, image组件的属性如表4-21所示。

audio组件用来实现音乐播放.暂停等，其属性如表4-22所示。

video组件用来实现视频的播放、暂停等。视频的默认宽度为300 px，高度为225 px, video组件的属性如表4-23所示。

camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。

概念：map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用。

canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为300 px，高度为225 px，同一页面中的canvas-id不能重复，否则会出错。canvas组件的属性如表4-28所示。

动态列表，个人中心，动态表单，评论，计数

城市定位，悬浮窗