一起脱去小程序的外套和内衣 - 微信小程序架构解析

渠宏伟 
https://www.qcloud.com/community/article/760767001484042227https://www.qcloud.com/community 微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起分析小程序的架构,分享开发经验。一、小程序介绍1、小程序特点2、小程序演示视频地址:3、小程序为什么那么快 Page Frame Native预先额外加载一个WebView 当打开指定页面时,用默认数据直接渲染,请求数据回来时局部更新 返回显示历史View 退出小程序,View状态不销毁4、小程序入口扫码进入小程序 搜索小程序 小程序发送到桌面(Android) 发送给朋友二、小程序架构微信小程序的框架包含两部分View视图层、App Service逻辑层,View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用,它们在两个线程里运行。 视图层使用WebView渲染,逻辑层使用JSCore运行。 视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。 小程序启动时会从CDN下载小程序的完整包三、View (页面视图)视图层由 WXML 与 WXSS 编写,由组件来进行展示。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。1、View - WXMLWXML(WeiXin Markup Language)支持数据绑定 支持逻辑算术、运算 支持模板、引用 支持添加事件(bindtap) wxml编译器:wcc 把wxml文件 转为 js 执行方式:wcc index.wxml2、View - WXSSWXSS(WeiXin Style Sheets)支持大部分CSS特性 添加尺寸单位rpx,可根据屏幕宽度自适应 使用@import语句可以导入外联样式表 不支持多层选择器-避免被组件内结构破坏wxss编译器:wcsc 把wxss文件转化为 js 执行方式: wcsc index.wxss3、View – WXSS SelectorsWXSS目前支持如下选择器:4、View - Component小程序提供了一系列组件用于开发业务功能,按照功能与HTML5的标签进行对比如下: 小程序的组件基于Web Component标准 使用Polymer框架实现Web Component5、View - Native Component目前Native实现的组件有