跨端开发与小程序

小程序架构

双线程模型

┌─────────────────────────────────────┐
│              Native 层               │
│  ┌──────────────┐  ┌──────────────┐ │
│  │ 渲染层       │  │ 逻辑层       │ │
│  │ (WebView)    │  │ (JSCore)     │ │
│  │              │  │              │ │
│  │  WXML → DOM  │  │   JS 执行    │ │
│  │  CSS 样式    │  │   setData    │ │
│  │              │  │   事件回调   │ │
│  └──────┬───────┘  └──────┬───────┘ │
│         │                 │         │
│         └─────────────────┘         │
│           Native 桥接（JSBridge）    │
└─────────────────────────────────────┘

数据传递

逻辑层 setData(data) ──► JSON 序列化 ──► Native 桥 ──► JSON 解析 ──► 渲染层更新 DOM

setData 优化

// ❌ 差：频繁调用大对象
// 每次 setData 会序列化整个对象，Native 桥性能瓶颈
this.setData({
  list: newList  // 整个大数组重新发送
});

// ✅ 好：路径更新 + 合并
this.setData({
  ['list[0].name']: '新名字',  // 只传变化的字段
  ['list[3].status']: 1
});

// ✅ 合并多次 setData（框架自动批处理）
// Vue/React 框架内由框架合并，原生建议用 nextTick 合并

Taro / uni-app

编译时 + 运行时架构

开发代码（React/Vue 语法）
       │
       ▼
  编译时 ──► 转译为对应小程序的 WXML/WXSS/JS
       │
       ▼
  运行时 ──► 在逻辑层模拟 DOM/BOM API（document.createElement 等）
       │
       ▼
  原生小程序代码

跨平台适配

// Taro 获取环境
import Taro from '@tarojs/taro';
const env = Taro.getEnv();
// 'WEAPP' | 'WEB' | 'RN' | 'H5' | 'SWAN' | 'ALIPAY' | 'QUICKAPP'

// 条件编译
/*  #ifdef  mp-weixin  */
// 仅微信小程序运行的代码
wx.getSystemInfoSync();
/*  #endif  */

/*  #ifdef  h5  */
// 仅 H5 运行的代码
alert('h5');
/*  #endif  */

// 条件编译（uni-app）
// #ifdef H5
console.log('H5 only');
// #endif
// #ifdef MP-WEIXIN
console.log('Wechat only');
// #endif

Taro / uni-app 对比

React Native

JS Bridge 原理

      JS 线程                   Bridge（异步队列）             Native 线程
┌──────────────────┐       ┌──────────────────┐       ┌──────────────────┐
│  React 组件      │       │                  │       │                  │
│  Virtual DOM     │──────►│  MessageQueue    │──────►│  UIKit / View    │
│  Diff → Patch    │       │  JSON 序列化     │       │  布局引擎        │
│                  │◄──────│  {type:"create", │◄──────│  事件/响应返回   │
│                  │       │   props...}      │       │                  │
└──────────────────┘       └──────────────────┘       └──────────────────┘

JSI（JavaScript Interface）:

• C++ 层直接暴露 Native 方法给 JS，跳过 JSON 序列化
• 支持同步调用（如 console.log / Date.now 等同步操作）
• 启动时无需一次性扫描所有模块，TurboModules 按需加载

Hermes 引擎

新架构（Fabric + TurboModules）

Flutter

自绘引擎

Flutter 应用
     │
     ▼
  Flutter Framework（Dart）
     │
     ▼
  Engine（C++）
     │
     ├── Skia（旧） / Impeller（新）
     │       │
     │       ▼
     │   GPU 直接绘制（不依赖平台控件）
     │
     └── Platform Channels（调用原生 API）

为什么自绘: 不依赖 iOS / Android 的原生 UI 控件，同一套绘制代码在不同平台效果一致，消除平台差异。

三棵树

Widget（配置/不可变）
    │
    ▼  createElement()
Element（实例/管理生命周期）
    │
    ▼  mount()
RenderObject（布局/绘制/可变）

// 一个 StatelessWidget 的生命周期：创建 Widget → 创建 Element → 创建 RenderObject → 布局 → 绘制
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    );
  }
}

Dart 语言特性

Electron

主进程 + 渲染进程

┌────────────────────────────────────────┐
│         主进程（Main Process）           │
│  - 启动应用窗口（BrowserWindow）        │
│  - 菜单、托盘、系统对话框               │
│  - 自动更新、原生 API                  │
│  - Node.js 全功能                      │
└─────────────┬──────────────────────────┘
              │ IPC（进程间通信）
    ┌─────────┴──────────┐
    ▼                    ▼
┌──────────┐      ┌──────────┐
│  渲染进程  │      │  渲染进程  │
│ (Chromium)│      │ (Chromium)│
│  - 页面UI │      │  - 页面UI │
│  - 沙盒化 │      │  - 沙盒化 │
└──────────┘      └──────────┘

进程间通信 IPC

// 主进程 main.js
const { ipcMain, BrowserWindow } = require('electron');

ipcMain.handle('get-file', async (event, filePath) => {
  return await fs.readFile(filePath, 'utf-8');
});

// 渲染进程 renderer.js
const { ipcRenderer } = require('electron');
const content = await ipcRenderer.invoke('get-file', '/path/file.txt');

打包体积优化

安全

// 安全的 Electron 配置
const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,       // 隔离上下文
    nodeIntegration: false,       // 禁用 Node
    sandbox: true,                // 沙盒模式
  }
});

// preload.js - 通过 contextBridge 暴露安全 API
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('open-file'),
  getVersion: () => process.versions.electron,
});