当前位置:文档之家› 微信小程序框架解析

微信小程序框架解析

微信小程序框架解析

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、App()是小程序的入口,Page()是页面的入口

2、微信提供了丰富的API,如微信定位,微信扫一扫,微信支付等功能

3、每个页面有独立的作用域,并提供模块化能力

在逻辑的代码里面,可以进行数据绑定,事件分发,生命周期管理,跌幅管理等功能

上图是微信小程序的生命周期图,微信小程序的页面中,常用的生命周期回调函数有onLoad,onShow,onReady,onHide,具体的执行顺序可看上图。

上图为微信小程序部分API列表。

微信小程序里面,不同的页面之间进行跳转,微信制定了一些相关的规范,主要有以下几种:

1、navigatoTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用navigateBack可以返回到原页面,页面路径只能有五层

2、redirectTo(OBJECT)

关闭当前页面,跳转到页在内的某个页面

3、navigateBack(OBJECT)

关闭当前页面,返回上一级页面或多级页面,可通过getCurrentPages()来获取当前的页面栈,决定返回那一层

4、switchTab(OBJECT)

使用该方法,可以切换到tabBar里面的某一个页面,在这里要注意,该方法切换的页面必须是在app.json文件里面的tabBar里面注册过的页面

五、小程序开发经验

在开发小程序的过程当中,有一些开发经验,现在给各位介绍一下。

小程序可以借鉴的优点:

1、提前新建WebView,准备新页面渲染

2、View层与逻辑分享,通过数据驱动,而不直接操作页面元素

3、使用组件,进行局步更新

4、视图层做到组件化开发

5、加入rpx元素布局,做到自适应

小程序存在的问题:

1、小程序仍然使用的是WebView渲染

2、需要特定的开发环境,依赖微信开发工具

3、服务端返回头不能够执行,如set-cookie

4、没有浏览器环境,依赖浏览器的JS无法执行

5、WXSS背景图不能使用本地图片,只能使用网络图片或base64图片

如果男人和女人之间不再信任和关心彼此灵魂,肉体徒然亲近,灵魂终是陌生,他们就真正成了大地上无家可归孤魂了。如果亚当和夏娃互相不再有真情甚至不再指望真情,他们才是真正被逐出了伊甸园

相关主题
文本预览
相关文档 最新文档