欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-02-07 10:58浏览: 来源:网络 作者:cola


渠宏伟,腾讯高级工程师,从事Web前端开发5年,先后负责企鹅电竞、腾讯视频VIP、腾讯OA开发框架、腾讯微信HR助手等项目。对Web前端架构、.NET架构有丰富的经验。

 

 

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

 

一、小程序介绍

1、小程序特点

 

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

2、小程序演示


视频地址:https://v.qq.com/x/page/w0353d7co6y.html  

3、小程序为什么那么快

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

 

Page Frame

Native预先额外加载一个WebView
当打开指定页面时,用默认数据直接渲染,请求数据回来时局部更新
返回显示历史View
退出小程序,View状态不销毁

 

4、小程序入口

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

  

扫码进入小程序

搜索小程序

小程序发送到桌面(Android)

发送给朋友

 

 

二、小程序架构

 

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

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

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

 

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

 

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

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

 

三、View (页面视图)

 

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

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

 

1、View - WXML





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。