微信小程序的原理及技术理解

最近在工做当中，接触到一些关于微信小程序的开发，写出这篇文章和你们分享

 

小程序开发框架的目标是经过尽量简单、高效的方式让开发者能够在微信中开发具备原生 APP 体验的服务。

框架提供了本身的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可让开发者能够方便的聚焦于数据与逻辑上。

那么咱们从小程序的描述中不难看出，小程序所使用的前端技术JavaScript/WXML/WXSS

这些技术与常规的前端开发也存在着一些区别：

• JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中，不能操做 Browser context 下的 DOM，也不能经过 Node.js 相关接口访问操做系统 API。虽然开发过程和用到的技术栈和 Html5 是相通的，但严格意义来说，微信小程序并非 Html5。
• WXML: 做为微信小程序的展现层，并非使用 Html，而是本身发明的基于 XML 语法的描述，布局大部分利用view等块容器。
• WXSS: 用来修饰展现层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。咱们的 WXSS 具备 CSS 大部分特性...咱们对 CSS 进行了扩充以及修改。”至于基于CSS的哪一个版本，大部分特性具体指哪些，扩充和修改内容就只能在实践中体会了。

小程序在IOS，Android 以及调试工具上的运行是不一样的：

• 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中
• 在 Android 上，小程序的 javascript 代码是经过 X5 内核来解析
• 在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中

咱们能够大胆的猜测小程序的真机运行环境‘

微信小程序的运行环境应该更相似 ReactNative 之类，而不是纯 Html5。二者最大的不一样在于，ReactNative 的界面是由原生控件渲染出来的，而 Html5 的界面是由浏览器内核渲染出来的。

 

原理上，小程序是如何在微信 App 里运行的呢？

• 微信 App 里包含 javascript 运行引擎。
• 微信 App 里包含了 WXML/WXSS 处理引擎，最终会把界面翻译成系统原生的控件，并展现出来。这样作的目的是为了提供和原生 App 性能至关的用户体验。

’从原理上咱们能够继续揣测一下小程序的加载过程

• 用户点击打开一个小程序
• 微信 App 从微信服务器下载这个小程序
• 分析 app.json 获得应用程序的配置信息（导航栏，窗口样式，包含的页面列表等）
• 加载并运行 app.js
• 加载并显示在 app.json 里配置的第一个页面

这个只是从开发者眼中看到的一个简化版的过程，实际过程应该比这要复杂得多，涉及到浏览器线程（就是运行咱们的逻辑层代码 app.js 等的线程）和 AppService 线程之间的交互。

 

至于微信 App 是如何与小程序的逻辑层 javascript 交互的呢？能够简单地概括以下：

JavaScript 是脚本语言，能够在运行时解释并执行。微信 App 里包含了一个 JavaScript 引擎，由它来负责执行逻辑层的 JavaScript 代码。那么 JavaScript 调用的小程序相关 API 怎么实现的呢？答案是最终会被翻译成实如今微信 App 里的原生接口。好比开发者调用 wx.getLocation(OBJECT) 获取当前地理位置，微信 App 里的 JavaScript 引擎在执行这个代码时，会去调用微信 App 里实现的原生接口来获取地理位置坐标。

 

总结

微信小程序最大的好处是不须要作设备适配，只要微信能运行，小程序就能运行。小程序虽然是一个封闭形态下的前端开发技术，但借助微信的巨大影响力，几乎全部人都在往里面冲。这个正在发现的事物也存在很多弊端，但它才刚刚起步，借助这个巨大的平台，相信之后会有巨大的发展

 

文章做者介绍：

来自于小豹科技的彭文杰-公司专一于软件基础研发平台，目前公司正在研发一款基于Netty的插件式的API网关-小豹API网关。 但愿与对OpenAPI、微服务、API网关、Service Mesh等感兴趣的朋友多交流。 有兴趣的朋友请加QQ群244054462