微信小程序开发与运营

微信（WeChat）小程序是腾讯公司于2011年1月21日退出的一款智能终端提供即时通信（Instant Messaging,IM）服务的应用程序，小程序是一种不需要下载安装级可使用的应用。

1、无需安装和卸载，用户可以直接使用，使用完直接关闭，不会占用桌面空间；

2、制作成本低；

3、内存小、运行快，操作便利快捷；

4、容易部署，具有丰富的延展性。

1.简单的业务逻辑

2.低频度的使用场景

实现多种功能，例如账号切换，小程序编译、清理存缓、预览等

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

用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json文件的操作

用来显示当前的目录结构

调试区的功能是帮助开发者进行代码调试及排查有问题的区域，小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Nekwork、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项：是控制开发工具按钮。

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

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

app.wxss:小程序主样式表文件，类似的HTML的.CSS文件。

.js文件：页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。

.wxml:页面结构文件，用于设计页面的布局、数据绑定等。

.wxss：页面样式表文件，用于定义本页面中用到的各类样式表。

.json：页面配置文件，该文件在页面中不可缺少。

MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示，.wxml文件用于描述页面的结构； .wxss文件用于描述页面的样式。

逻辑层用于处理事务逻辑。

微信小程序开发框架的逻辑层是采用javaScrict编写的。 在javaScrict的基础上, 微信团队做了适当修改, 以便提高开发小程序的效率。 主要修改包括:

(１) 增加app()和Page()方法, 进行程序和页面的注册。

(２) 提供丰富的API, 如扫一扫、支付等微信特有的能力。

(３) 每个页面有独立的作用域, 并提供模块化能力。

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

小程序的全局配置保存在全局配置文件(app.json) 中, 使用全局配置文件来配置页面文件(pages) 的路径、设置窗口(window) 表现、设定网络请求ＡＰＩ 的超时时间值(netwoekTimeout) 以及配置多个切换页(tabBar) 等。

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

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

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

简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

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

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

概念：在小程序中, 如果要经常使用几个组件的组合(如“登录” 选项), 通常把这几个组件结合定义为一个模板, 以后在需要的文件中直接使用这个模板。

在WXML文件中, 不仅可以引用模板文件, 还可以引用普通的页面文件。 WXML 提供了两种方式来引用其他页面文件。

简单来说, 小程序中的事件是用户的一种行为或通信方式。 在页面文件中, 通过定义事件来完成页面与用户之间的交互, 同时通过事件来实现视图层与逻辑层的通信。 我们可以将事件绑定到组件上, 当达到触发条件时, 事件就会执行逻辑层中对应的事件处理函数。

由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现,WXSS在此基础上增加了尺寸单位rps (respnesivepixel)。 WXSS规定屏幕宽度为750rps, 在系统数据绑定过程中rpx会按比例转化为px。

为了便于管理WXSS文件, 我们可以将样式存放于不同的文件中。 如果需要在某个文件中引用另一个样式文件, 使用＠import语句导入即可

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

margin,padding

border

width,height内容的宽度和高度

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

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

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

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

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

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

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

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

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

float：none|left|right

clear:left|right|both|none

static

relative

absolute

flxed

display

flex-direction

flex-wrap

fiex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

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

城市定位、悬浮窗