小程序框架解析
Softeem·标一、小程序介绍和演示
小程序是国腾讯公司推出的一款类APP 应用平台，用户和开发者可以在依据腾讯发布的API 文档与Web开发者工具进行开发，其程序主要有以下几个特点：
1、类Web的应用程序，但不是HTML5
2、即用即走，随手可得
3、拥有离线能力
4、基于跨平台
二、小程序框架
上边两个图片可以说明小程序的框架结构，小程序里面View视图层与AppServer逻辑层分开的，与现在主流的前后端分离开发小异，数据通信采用API进行异步请求
视图层的界面布局采用wxml，视图层的样式控制采用wxss进行，在这里要说明一下，小程序里面的wxml与前端里面的HTML似，都是用标签进行布局。而wxss与前端里面的CSS一样，支持CSS3，动画，变幻等新特性，而界面的逻辑控制就是JS（后期出了一个wxs，是一个类JS的语言，语法与JS差不多）
三、小程序视图层
刚刚在上个章节提到了小程序的框架结构，在这个章节，我们主要来看一下视图层的相关介绍。
在视图层中，的WXML作为标签的布局，它支持数据绑定，输运运算，同时还支持模板引用（template），这些与HTML里面的差不多，唯一有一点区别的就是在事件绑定这一块。
在的视图层事件绑定时面，不事件采用的是bind的策略，与HTML里面的on是不一样的，但同时也支持事件冒泡。自己封装了一系列的视图层事件，如bindtap 点击，bindlongtap长按，这些事件针对移动端做了进一步的优化，例其能够符合移动端APP的操作习惯
而作为界面样式控制的WXSS，它支持大部分的CSS，同时，它新增了一个尺寸单位rpx，这个单位可以根据屏幕的宽度进行自适用，这点是一个很大的进步，它可以使小程序在不同的手机屏幕下面进行自适用（这一点在以前的HTML+CSS上面，需要通过vw、rem、em\或者媒体查询来进行），同时，可以使用import来导入外部的样式文件，但在这里有一点要说明的就是，WXSS里在，不支持多层选择器，这样就避免了组件的部样式被污染。
在CSS里面，我们常用的选择器有9种，而在小程序里面，进行精简了很多，具体我做了个列表，如下：
在上图当中，我们可以看出，小程序的WXSS支持类选择器，ID选择器，标签选择器，分组选择器以及伪元素选择器，但是去除了CSS时面的兄弟~与相邻兄弟~选择器，去除了常用的属性选择器。
在小程序的布局里面，主要用到的标签为view标签，这个标签相当于HTML里面
的DIV标签，是一个块级标签，同时，文字标签改为了text这个标签，相当于HTML里面的label或者span等行标签，下图是微个小程序的标签与普通的HTML标签对比
四、小程序逻辑层
前面讲完了小程序的界面神图层，现在来讲讲逻辑层。
1
1、A pp()是小程序的入口，Page()是页面的入口
2、提供了丰富的API，如定位，扫一扫，支付等功能
3、每个页面有独立的作用域，并提供模块化能力
在逻辑的代码里面，可以进行数据绑定，事件分发，生命周期管理，跌幅管理等功能
上图是小程序的生命周期图，小程序的页面中，常用的生命周期回调函数有onLoad,onShow,onReady,onHide，具体的执行顺序可看上图。
上图为小程序部分API列表。
小程序里面，不同的页面之间进行跳转，制定了一些相关的规，主要有以下几种：
1、n avigatoTo(OBJECT)
保留当前页面，跳转到应用的某个页面，使用navigateBack可以返回到原页面，页面路径只能有五层
2、r edirectTo(OBJECT)
关闭当前页面，跳转到页在的某个页面
制作查询类小程序3、n avigateBack(OBJECT)
关闭当前页面，返回上一级页面或多级页面，可通过getCurrentPages()来获取当前的页面栈，决定返回那一层

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。