前言

对小程序无感，不乐意弄这玩意儿，但是没办法，工作有需要，正所谓，吃屎的时候，别咽就行了！言归正传～

微信开发者工具

在打开的调试窗口中的console里面输入以下页面，会打开小程序渲染层窗口

 document.getElementsByTagName('webview'[0].showDevTools(true,null)

由图可以看出，小程序页面运行时作用的是html、css、js

基本结构

逻辑层：业务处理
- 加载js => 业务、生命周期(Page、App)、事件、数据加载等处理
- 单独的线程: iframe（ios/jscore，安卓/v8）
- 只有一个逻辑层来维护一个App实例（多个Page实例维护在一个App实例中）
- 更新视图层数据：setData
视图层：页面的基本结构、样式
- wxml：视图内容 => html
- wxss: 视图样式 => css
- 单独的线程: webkit(iframe)
- 多个视图层（一个 wxml => html 就是一个视图层）

最终，打包传递到微信服务器上

基础库 SDK

工具API

基础库对外提供的API方法
- 这些API被微信开发者工具应用，比如“预览”
- 查看基础库

控制台输入 openVendor()，打开项目依赖的基础库源码（微信开发者工具应用目录下）

wcc 与 wcsc

将 wwcc 与 wcsc 快捷方式，拷贝到项目项目下，看看wxml和wxss被编译成什么东东～

wcc: Wechat WXML Compiler

编译 wxml => js: 运行命令 ./wcc -js index.wxml >> wxml.js ，进行编译 index.wxml

<view class="index">
  <view class="head">
    <view class="title">小程序组件</view>
    <view class="desc">这是展示小程序组件的DEMO。</view>
  </view>
</view>

编译后的 wxml.js 文件

// 生成 render 渲染器的方法
$gwx = function (path, global) {
 // ...
}

render(data) => VNode

wcsc: WeChat Stylesheet Compiler

编译 wxss => js；运行命令 ./wcsc -js index.wxss >> wxss.js ，进行编译 index.wxss

.index {
  font-size: 16rpx;
  background-color: yellow;
}

编译后的 wxss.js 文件

var BASE_DEVICE_WIDTH = 750;
var isIOS = navigator.userAgent.match('iPhone');
var deviceWidth = window.screen.width || 375;
var deviceDPR = window.devicePixelRatio || 2;
var checkDeviceWidth =
  window.__checkDeviceWidth__ ||
  function () {
    // ...
  };
checkDeviceWidth();
var eps = 1e-4;
var transformRPX =
  window.__transformRpx__ ||
  function (number, newDeviceWidth) {
    // ...
  };
window.__rpxRecalculatingFuncs__ = window.__rpxRecalculatingFuncs__ || [];
var __COMMON_STYLESHEETS__ = __COMMON_STYLESHEETS__ || {} % s;
var setCssToHead = function (file, _xcInvalid, info) {
  // ...
};
setCssToHead(['.', [1], 'index { font-size: ', [0, 16], '; background-color: yellow; }\n'])(
  typeof __wxAppSuffixCode__ == 'undefined' ? undefined : __wxAppSuffixCode__
);

css in js，小程序在运行时，rpx会根据手机分辨率动态适配计算成px =>

运行时流程

整体流程

逻辑层

提供注册实例/页面方法 App()、Page()
提供通信能力，js => wxml
生命周期维护能力
调用微信原生API能力
执行过程

1.加载基础库 WAService.js
2.加载app.js和所有页面js
3.构建全局配置 JSON、渲染器

视图层

事件处理
提供通信能力，wxml => js
数据渲染到页面能力
webComponent / render能力
执行过程

1. 加载默认配置、加载基础库、js（WXML、WXSS）
2. WXSS js  ==> 动态计算css
3. 改变路由
4. 合并配置 默认、app配置、页面配置
5. 构建渲染器 ==>通知基础库 渲染器ready
5. 基础库 JsBridge() ==>Native ==> 逻辑层
6. 基础库==>render (data)==>VNode===>组件系统 ==> 组件

生命周期

尾声

糊里糊涂整了一下，感觉还是不透彻，爱咋咋地吧，膈应人～

❤️ 加入我们

字节跳动 · 幸福里团队

Nice Leader：高级技术专家、掘金知名专栏作者、Flutter中文网社区创办者、Flutter中文社区开源项目发起人、Github社区知名开发者，是dio、fly、dsBridge等多个知名开源项目作者

期待您的加入，一起用技术改变生活！！！

招聘链接: job.toutiao.com/s/JHjRX8B

小程序基础架构解析

前言