微信小程序背后运行原理分析
北京阳光环球广告有限公司 http://www.sunad.net.cn 2018-05-10 浏览量:1000
Tags:
微信小程序使用了前端技术栈 JavaScript/WXML/WXSS。但和常规的前端开发又有一些区别:
JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中,不能操作 Browser context 下的 DOM,也不能通过 Node.js 相关接口访问操作系统 API。所以,严格意义来讲,微信小程序并不是 Html5,虽然开发过程和用到的技术栈和 Html5 是相通的。
WXML: 作为微信小程序的展示层,并不是使用 Html,而是自己发明的基于 XML 语法的描述。
WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。” “我们的 WXSS 具有 CSS 大部分特性...我们对 CSS 进行了扩充以及修改。”基于 CSS2 还是 CSS3?大部分是哪些部分?是否支持 CSS3 里的动画?不得而知。
在微信小程序官方文档上,有下面这段话:
微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具
在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
在 Android 上,小程序的 javascript 代码是通过 X5 内核来解析
在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中
我们先从开发工具谈起。
开发工具
小程序的 javascript 代码运行在 nwjs 中。nwjs 是什么鬼呢?官方介绍是这样写的:
NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.
nwjs 合并 Browser 和 Node.js 的运行时,可以使用前端开发技术来开发跨平台的应用程序。借助 Node.js 访问操作系统原生 API 的能力,可以开发中跨平台的应用程序。微信小程序开发工具就是使用 nwjs 开发的。如果你是 Mac 用户,进入目录 /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app 可以看到开发工具的实现代码,当然代码是经过混淆的。网上流行的破解版本开发工具原理上就是修改这里面的代码。
与此类似的,一个更火的项目是 Electron,由 GitHub 推出的,它也是把 Browser 和 Node.js 结合,用来开发跨平台的应用程序。程序员们应该听说过 Atom 这个编辑器界的后起之秀。包括微软拥抱开源社区的编辑器 vscode 也是使用 Electron 开发的。
Electron vs nwjs
这两个平台有什么区别?为什么微信选择 nwjs 呢?我们不妨猜一猜。
从技术角度来讲:
应用程序入口不同:Electron 入口是一个 javascript 脚本,脚本里要自己负责创建浏览器窗口,加载 html 页面。而 nwjs 的入口就是一个 html 页面,框架自己会创建浏览器窗口来显示这个 html 页面。
Node.js 集成方式不同:Electron 直接使用 Node.js 的共享库,不需要修改 Chromium 代码。而 nwjs 为了集成 Node.js ,需要修改 Chromium 代码,以便在浏览器里能通过 Node.js 访问系统原生 API。
Multi-Context: nwjs 有多个上下文,一个是浏览器的上下文,用来访问 Browser 相关 API,比如操作 DOM ,另外一个是 Node 上下文,用来访问操作系统 API。Electron 没有使用多个上下文,对开发者更友好。
从应用角度来讲:
打包后的文件大小:Electron 打包后文件会比 nwjs 小不少。一个 18M 的程序,使用 Electron 打包后是 117M,而使用 nwjs 打包后的程序是 220M。微信小程序开发工具打包后是 219M (v0.10.102800)。没有亲测,评价来源参考文档。
代码保护:Electron 只支持代码混淆来保护,而 nwjs 把核心代码放在 V8 引擎里,不但可以保护代码,还可以提高执行效率。
开源社区活跃度:Electron 应该是完胜的。看看使用 Electron 构建的应用程序就知道了。而据说 nwjs 的开发文档有些都没有及时更新。
应用程序启动时间:Electron 会稍微快一点。没有亲测,评价来源参考文档。
从这个分析猜测,微信选择 nwjs 的原因可能是出于代码保护。毕竟开发工具可以上传小程序,有些接口和数据需要比较严密的保护。哪位大牛可以挖挖看哪些代码被保护起来了。
真机运行环境
下面内容完全是猜测的,如有言中,实属运气。
微信小程序的运行环境应该更类似 ReactNative 之类,而不是纯 Html5。两者最大的不同在于,ReactNative 的界面是由原生控件渲染出来的,而 Html5 的界面是由浏览器内核渲染出来的。两者在性能上有较大的差异,感兴趣的可以参阅我的另外一篇文章《跨平台 App 开发技术方案汇总》。
原理上,小程序是如何在微信 App 里运行的呢?
微信 App 里包含 javascript 运行引擎。
微信 App 里包含了 WXML/WXSS 处理引擎,最终会把界面翻译成系统原生的控件,并展示出来。这样做的目的是为了提供和原生 App 性能相当的用户体验。
我们来意淫一下小程序加载运行的过程:
用户点击打开一个小程序
微信 App 从微信服务器下载这个小程序
分析 app.json 得到应用程序的配置信息(导航栏,窗口样式,包含的页面列表等)
加载并运行 app.js
加载并显示在 app.json 里配置的第一个页面
这个只是从开发者眼中看到的一个简化版的过程,实际过程应该比这要复杂得多,涉及到浏览器线程(就是运行我们的逻辑层代码 app.js 等的线程)和 AppService 线程之间的交互。
本文地址:http://www.sunad.net.cn/content-104-829-1.html
上一篇:AngularJS迁移小程序
- SEO知识
- SEO热点问题
- SEO工具
- seo外链怎么优化?07-16
- 如何对网站进行seo07-15
- 有用的金融seo推广方案07-15
- seo文章关键词怎么布局才有效果07-12
- 那些与SEO相关的技术07-11
- 网站优化标题重要吗?该怎样写标题呢?07-11
- seo运营是什么意思?07-10
- 那些与SEO相关的技术07-05
- 标题在网站SEO优化中的作用是什么?07-05
- div+css为什么对网站优化有很大的帮助07-26
- SEO网站优化常犯的几种过度优化07-26
- 网站优化怎么快速找有用的分类目录07-23
- 如何找搜索引擎的高质量原创文章07-23
- 企业站如何做好seo优化工作07-10
- 北京优化公司/北京网站优化/百度权重优化到底起到多大作用07-04
- 怎样优化百度下拉框与相关搜索07-02
- 整站优化SEO/更新保护网站最好要合适的几个处理办法06-26
- seo整站优化/整站优化SEO/刚着手建时站内优化操作06-21
- SEO新手优化网站要注意的问题05-28
- 百度seo整站优化/百度SEO网站优化/网站快速排名的几种操作05-23
- SEO网站优化更新如何做软文营销07-26
- 怎么利用差别化来做网站SEO排名07-23
- 利于网站SEO迅速排名的六种实用性办法07-23
- 北京SE0网站优化/丰台SEO优化/快速排名点击小心网站被K07-04
- 关键词优化公司/百度SEO优化/操作新站SEO常见的几种不正确06-21
- SEO网站优化点击率对网站排名有多大帮助05-28
- 百度seo整站优化/百度SEO网站优化/div+css布局网站对搜索引擎的好处05-23
- 企业手机网站建设/SEO优化TDK怎么写才符合搜索引擎呢05-22
- 企业手机网站建设/企业手机站设计制作/企业手机网站建设如何提前做seo工作05-22
- SEO网站优化大神讲解网址怎样做网站优化05-21
- 建站知识
- 网站设计
- 网站开发
- 如何用最少的钱搭建一个自己的网站07-16
- 网站建设基本流程07-15
- 网站设计之首页图文混排技巧:07-12
- 网站建设小技巧提升网站质量07-11
- 影响网站建设费用的主要原因有哪几点07-10
- php秒杀系统架构设计实例07-26
- 网站建设浅谈php中使用websocket07-23
- 小白学习:网站建设登录功能讲解07-04
- 网站建设设计/网站设计/html锚点定位四种方法05-23
- 网站建设托管/网站维护托管/html select事件方法汇总05-22
- 网站建设:php 后期静态绑定07-26
- Python使用Srapy框架爬虫模拟登陆并抓取知乎内容07-23
- 网站设计功能怎样做一个简单实用的上传功能07-04
- 百度seo整站优化/百度SEO网站优化/怎样找高品质的文章进行伪原创05-23
- 网站建设托管/网站维护托管/CSS 尺寸(Dimension)05-22
- 北京企业网站建设费用报价/CSS分组和嵌套选择器05-21
- 北京手机网站制作:CSS分组和嵌套选择器05-18
- 企业网站建设/企业站定制建站/CSS padding(填充)05-17
- 北京手机网站制作/企业站定制设计/CSS margin(外边距)05-16
- 网站建设报价/网站建设费用/网站制作报价/CSS padding(填充)05-15
- 网站设计:PHPExcel导入excel文件07-26
- 最受欢迎的Python开源框架07-23
- 北京网页设计/验证邮件和URL的方法07-04
- 网站建设托管/网站维护托管/PHP 表单验证05-22
- 北京企业网站建设费用报价/PHP表单处理05-21
- 网站定制:PHP 表单处理05-18
- 企业网站建设/企业站定制建站/PHP 全局变量 - 超全局变量05-17
- 北京手机网站制作/企业站定制设计/PHP 数组排序05-16
- 网站定制设计/网站定制/网站设计/什么是数组?05-14
- 网站定制设计/网站设计定制/PHP 用户定义函数05-14
- 行业资讯
- 应用解决方案
- 你羡慕那些利用小程序赚钱的人吗?其实你也可以。07-26
- 移动端网站开发如何做代码适配?05-22
- 手机企业站定制建站设计/APP启动页面也是APP引导页面吗05-21
- APP小程序中UI界面设计需要注意的问题05-18
- 手机APP小程序开发/手机app制作公司/APP开发的几点启蒙05-17
- APP小程序开发中经常碰到的误区05-16
- APP怎样设计用户体验05-14
- APP小程序怎么不让客户卸载05-14
- 分析用户不同生命周期阶段的最基本的指标05-11
- 利于手机app开发人员了解应用程序的性能05-11
- 抖音海外版遭封禁,小程序服务暂停,近期抖音可谓是多灾多难07-26
- 如何在博客 论坛做外部链接?05-22
- 手机企业站定制建站设计/物业APP开发需要功能有哪些05-21
- APP小程序开发中手指触发尺寸怎么设置05-18
- APP小程序怎样写运营方案05-14
- APP小程序怎样推广05-14
- APP程序怎样更好的运营05-11
- APP开发中的搜索功能的设计05-11
- 小程序使用第三方模块Underscore.js,Immutable.js,UUID05-09
- 如何处理用户的误操作引起的多次请求05-09