最近在工作当中,接触到一些关于微信小程序的开发,写出这篇文章和大家分享

 

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 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

 

至于微信 App 是如何与小程序的逻辑层 javascript 交互的呢?可以简单地归纳如下:

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

 

总结

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