From the micro-channel applet source developer tools to see the realization of the principle (d) - - Adaptive layout

From the front of the realization of the principle from the micro-channel applet developer tools source code to see (a) - - applet architecture may know, the applet mostly rendered by web technology, which is dom tree eventually through a browser + cssom to generate render tree; since it is ultimately to draw ui layout through css, css we know that the adaptive program provides small units rpxin a browser environment is not recognized at all, so the applet will eventually rpxunit into a browser css identified unit of length, in the end how it is transformed, this section're going to explore the transformation mechanism.

Applet-style cast

In the micro-channel applet developers source tools see realization principle (b) - - applet technology can know, the main conversion wxss style file applet performs conversion rpx unit, the view layer template injection changeover wxss code is as follows Figure:

The above content is injected into the layer pageframe view css code template, which includes:

Rpx unit to provide conversion px units
Providing a dynamic insertion style content converted to js method of dom
Each page of the introduction of a common style that css content after the conversion app.wxss

These conversion operations mentioned above are built into the applet wcscexecutable program, specifically to complete the switching operation by calling the executable program. Css eventually injected into the contents of the page as shown below:

Applet adaptive conversion unit rpx

Adaptive internal layout of the applet employed to achieve rpxto complete, but the web is not identified, the rpxunit conversion means:

Css is a small program unit for converting rpx web recognition unit px css

So how small program to convert between rpx and px do? First look at the official website of the relevant rpx description:

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

由此可以看出，小程序在实现rpx转换时，不论是什么屏幕的手机，都是将屏幕宽度固定设为750rpx，然后根据实际屏幕的设备像素比dpr(dpr = 设备像素 / css像素)来进行转换的。具体对应关系如下：

1rpx = (number/ 750) * 设备宽度 px

下面通过小程序开发者工具简单分析小程序wcsc可执行命令程序生成的有关rpx转换的js代码

首先获取小程序的设备宽度

小程序开发者工具在初始渲染一个页面时会首先获取设备宽度deviceWidth和dpr，然后会通过checkDeviceWidth方法（wcsc可执行命令注入的代码）检查修正二者的值，因为屏幕orientation方向可能变化，在上面代码有这么一段：

if (window.screen.orientation && /^landscape/.test(window.screen.orientation.type || "")) {
   newDeviceWidth = newDeviceHeight;
}

该代码利用window.screen.orientation来判断手机的横竖方向，若处于横屏的时候，webview的宽度与高度值会互换，即高度值就是屏幕的真实宽度；需要注意的是小程序开发者工具的webview这一点与移动端手机表现不太一致。

另外，需要补充两点：

利用window.screen.orientation这个判断手机方向的特性大部分浏览器支持情况比较差，具体可以看这里。但是小程序开发者工具使用基于chrome的webview，这个是支持的。
代码的window.__checkDeviceWidth__在小程序的一些基础库(如2.3.2)中是没有定义的；但是新的版本(2.7.7)是有该方法定义的，但是从什么版本开始支持的不得而知。

rpx单位转换

正如官网所描述的，小程序将屏幕固定750rpx，然后根据当前屏幕宽度以及设置的rpx值，最终推算出rpx对应的px值。
补充一点，在设置的rpx值转换为px值大于0小于1时，不论设置的rpx值是多少，最终在dpr不是1的ios情况下会始终返回0.5px，其他情况始终返回1px；例如下面代码：

.text {
  height: 1rpx;
  background: #333;
}

最终在开发者工具中转换的px值为0.5，如下图：

小程序屏幕旋转自适应转换过程

通过上面转换rpx值，一旦转换完成后转换值就固定了；但是对于支持屏幕旋转的情况，这显然不是我们希望的结果，期望根据屏幕旋转的方向来重新转换对应的rpx值。
小程序从2.4.0基础版本开始通过配置"pageOrientation": "auto"开始支持屏幕旋转，这就需要知道屏幕发生变化的时机来做对应的处理。具体分两个方面转换：wxss样式文件转换和style内联样式转换。

wxss样式文件自适应转换

首先，在视图层，wxss样式文件经rpx初始转换后并将样式注入到页面过程中，会向window.__rpxRecalculatingFuncs__数组中收集窗口变化时的回调；先看wcsc可执行程序输出的处理rpx转换相关的setCssToHead函数实现，其最终返回rewritor函数，对应代码如下图：

可以看出在转换后的样式嵌入到document.head中后，依然保存有创建的style元素的句柄，在页面窗口变更时执行对应的回调来修正rpx转换后的px值。

然后，在小程序基础库WAWebview内部初始时会使用wx.onWindowResize(fn)来注册窗口变更的事件回调，注册事件内部会执行window.__rpxRecalculatingFuncs__中的回调，具体代码如下图：

这样，视图窗口变更时就会通知样式文件进行重新rpx转换，最后将最新转换的样式内容更新到页面中。

那么，小程序如何把握屏幕切换的触发时机呢？

这个触发时机在微信环境是由native提供感知能力，开发环境则是小程序开发工具本身提供支持。拿开微信开发者工具来说明具体的整个过程：

视图层与业务逻辑层分别注册onViewDidResize事件回调
开发者工具感知到窗口变化会通过websocket方式向视图层和业务逻辑层同时发送执行onViewDidResize回调的消息
onViewDidResize会分别执行通过wx.onWindowResize(fn)注册的回调

内联样式自适应转换

内联样式转换在底层基础库是采用transformRpx方法来转换rpx值的，思路与上面介绍的一样，唯一不同点就是是否对0进行修正，具体代码如下：

var $ = function(e) { // e为要转换的rpx值，V为设备宽度
   return 0 === e && function(e) {
      var t = window.__wcc_version_info__;
      if (t) return t[e]；
    }("fixZeroRpx") ? 0 : (e = e / 750 * V, 0 === (e = Math.floor(e + 1e-4)) ? 1 !== dpr && isIPhone ? .5 : 1 : e)
 }

通过获取window.__wcc_version_info__.fixZeroRpx的值来判断rpx为0时如何转换；而window.__wcc_version_info__的定义赋值是在wcc可执行命令转换wxml文件生成的js脚本中完成的，下面是wcc生成有关赋值代码：

具体样式文件自适应转换过程如下：

视图层在生成virtual dom过程中会收集每个元素的属性，其中包括style属性
在生成dom过程中，针对元素的style属性使用transformRpx进行转换，转换后内容应用到具体dom元素
为含有rpx单位内联样式dom元素绑定窗口变化回调，窗口变化时style中的rpx进行重新转换并应用到dom元素上