微信小程序构架分析及实例

伊谢尔伦
Lepaskan: 2017-01-24 11:24:44
asal
3982 orang telah melayarinya

微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起分析小程序的架构,分享开发经验。

小程序特点:

20170116105856_546.jpg

小程序架构

微信小程序的框架包含两部分View视图层、App Service逻辑层,View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用,它们在两个线程里运行。

视图层使用WebView渲染,逻辑层使用JSCore运行。

视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

20170116105856_795.jpg

小程序启动时会从CDN下载小程序的完整包 

20170116105856_837.jpg

View (页面视图)

视图层由 WXML 与 WXSS 编写,由组件来进行展示。

将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。

1、View - WXML

WXML(WeiXin Markup Language)

支持数据绑定

支持逻辑算术、运算

支持模板、引用

支持添加事件(bindtap)

wxml编译器:wcc  把wxml文件 转为 js   执行方式:wcc index.wxml  

2、View - WXSS

WXSS(WeiXin Style Sheets)

支持大部分CSS特性

添加尺寸单位rpx,可根据屏幕宽度自适应

使用@import语句可以导入外联样式表

不支持多层选择器-避免被组件内结构破坏

20170116105857_236.png

wxss编译器:wcsc 把wxss文件转化为 js 执行方式: wcsc index.wxss

3、View – WXSS Selectors

WXSS目前支持如下选择器:

20170116105857_732.jpg

4、View - Component

小程序提供了一系列组件用于开发业务功能,按照功能与HTML5的标签进行对比如下:

20170116105857_367.jpg

小程序的组件基于Web Component标准

使用Polymer框架实现Web Component

20170116105857_505.png

5、View - Native Component

目前Native实现的组件有