《微信小程序架构解析》丨NOTES


作者什么来头

渠宏伟,腾讯前端开发高级工程师。

小程序特点

类Web,不是HTML5

即用即走,随手可得

拥有离线能力

基于微信跨平台

媲美原生操作体验

为什么那么快

Page Frame

Native预先加载一个WebView

当打开指定页面时,无需加载额外资源直接渲染

返回显示历史View

退出小程序,View状态不销毁

小程序入口

扫码进入

搜索(模糊)

发现>小程序

小程序发送到桌面(Android)

小程序架构


交互通过系统层的JSBridge进行,当用户进行操作触发了事件,通过JSBridge通知逻辑层,逻辑层执行对应逻辑并把数据通过JSBridge传递给视图层,视图层执行相应的操作。


小程序初始化时,先从微信的CDN下载小程序的完整的包,然后在微信内部进行解包初始化。

小程序视图层

WXML(WeiXin Markup Language)

支持数据绑定

支持逻辑算术、运算

支持模板、引用

支持添加事件


WXML先被编译成JS文件,引入数据后会初始完成虚拟DOM,最终把虚拟DOM构建成DOM树,在WebView中渲染。

WXSSWeiXin Style Sheets

支持大部分CSS特性

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

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

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


WXSS被编译成JS运行。常用选择器、组件,略过。

小程序的组件基于Web Component标准,使用Polymer框架实现Web Component。Polymer框架是Google提出的,但在使用过程中发现其性能较低,所以微信自研了一套。

Native组件层在WebView层之上。

小程序逻辑层

逻辑层讲数据进行处理后发送给视图层,同时接受视图层的事件反馈。

App()小程序的入口;Page()页面的入口

提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力

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

数据绑定,事件分发,生命周期管理,路由管理

运行环境:iOS-JSCore、Android-X5 JS解析器、DevTool-nwjs Chrome内核

逻辑层生命周期

用户从微信打开一个小程序的执行过程:

Native执行一个拉起的操作,告诉App Service层

App Service层执行拉起,同时通知View层进行初始化

接下来要打开页面,通过路由通知App Service层

App Service层创建一个Page,然后通知Web层初始化,同时通知View层渲染并发送初始化数据

App Service层的Page会进行onLoad、onShow事件的执行,渲染完成onReady

当用户进行操作时,就出发一次用户事件,用户事件会通知到App

Service层并在此层执行,然后通知View层进行局部渲染,这样就完成了一次交互。

New View是在Web View初始化完成之后建立的,用于等待用户执行下一个界面时使用,减少Web View创建的花销,用户不需要等待了。App Service层的New Page也是同理。

小程序可以借鉴的优点

提前新建Web View,准备新页面渲染

View层和逻辑层分离,通过数据驱动,不直接操作DOM

使用Virtual DOM,进行局部更新

全部使用https,确保传输过程中安全

前端组件化开发

加入rpx单位,隔离设备尺寸,方便开发

小程序存在的问题

小程序仍然使用WebView渲染,并非原生渲染

需要独立开发,不能再非微信环境运行

开发者不可以扩展新组件

服务端口返回的头无法执行,如Set-Cookie

以来浏览器环境的js库不能使用,因为是JSCore执行的,没有window、document对象

WXSS中无法使用本地(图片、字体等)

WXSS转化成js而不是css,为了兼容rpx

WXSS不支持级联选择器

小程序无法打开页面,无法拉起APP

脱离微信的“小程序”:PWA渐进式应用

优点:

渐进增强:支持的新特性的浏览器获得更好的体验,不支持的保持原来的体验

离线访问:通过Service Workers可以再离线或者网速差的环境下工作

类原生应用:使用app shell model做到原生应用般的体验

可安装:允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店

容易分享:通过URL可以轻松分享应用

持续更新:受益于service worker的更新进行,应用能够始终保持更新

安全:可通过https来提供服务来防止网络窥探,保证内容不被篡改

可搜索:得益于W3C manifests元数据和service worker的等级,让搜索引擎能够找到wen应用

再次访问:通过消息推送等特性让用户再次访问变得容易

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 是不是 非要泪水已渐干涸双眼 才会像孩子一样清澈 会不会 定要千疮百孔的伤痕心灵...
    麦麦麦麦芽糖阅读 221评论 3 3
  • 感恩美味的蛋糕,带着祝福和仪式感,让伊伊步入六岁,非常好吃,谢谢 感恩快递师傅大热天及时送来快递,谢谢你 感恩林晖...
    妮妮Gloria阅读 185评论 0 3
  • 异步编程一直是JavaScript 编程的重大事项。关于异步方案, ES6 先是出现了 基于状态管理的 Promi...
    Jeremy_young阅读 16,895评论 2 44