小程序基础架构解析

·  阅读 786
小程序基础架构解析

前言

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

微信开发者工具

在打开的调试窗口中的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

分类:
前端
标签: