跨端框架

Electron

Electron 是什么？
Electron 是一个基于 Chromium 和 Node.js 的框架，允许使用前端技术（HTML/CSS/JS）开发跨平台桌面应用。它将浏览器内核与 Node.js 环境结合，支持调用系统级 API（如文件读写）。
Electron 的主进程（Main Process）和渲染进程（Renderer Process）有什么区别？
- 主进程：负责创建窗口、管理应用生命周期、调用系统 API，只有一个主进程。
- 渲染进程：每个窗口对应一个渲染进程，负责展示页面和运行前端代码，多个渲染进程相互隔离。
- 通信方式：通过 ipcMain 和 ipcRenderer 模块进行进程间通信。
如何优化 Electron 应用的内存占用？
- 使用代码分割（如 Webpack）减少加载资源体积。
- 及时销毁无用的窗口和对象，避免内存泄漏。
- 禁用非必要的 Chromium 功能（如关闭 DevTools 或 GPU 加速）。
- 采用 BrowserView 替代 webview 标签。
Electron 应用如何实现自动更新？
使用 electron-updater 模块，配合私有服务器或 GitHub Releases 分发更新包。
流程：
1. 打包应用时生成 latest.yml 文件。
2. 客户端通过 autoUpdater.checkForUpdates() 检测版本差异。
3. 下载并静默安装新版本。
Electron 的安全问题有哪些？如何防范？
- 问题：XSS 攻击、Node.js 集成导致权限滥用。
- 防范：
  - 禁用渲染进程的 Node.js 集成（nodeIntegration: false）。
  - 使用 Content-Security-Policy 限制脚本加载来源。
  - 对用户输入内容做转义处理。

Tauri

Tauri 是什么？
Tauri 是一个轻量级跨平台桌面应用框架，使用 Rust 编写核心层，前端可搭配任意框架（如 React/Vue）。相比 Electron，它通过系统 WebView 渲染界面，生成的二进制文件更小（约 1MB）。
Tauri 和 Electron 的核心区别是什么？
- 体积：Tauri 的二进制文件更小（无内置 Chromium）。
- 性能：Tauri 使用系统 WebView，内存占用更低。
- 语言：Tauri 的后端逻辑用 Rust 编写，安全性更高。
- 生态：Electron 的社区和工具链更成熟。
Tauri 如何调用系统原生功能（如读写文件）？
- 在 Rust 层编写 API，暴露给前端调用。
- 前端通过 JavaScript 的 invoke 方法触发：
  javascript
```
import { invoke } from '@tauri-apps/api';
invoke('read_file', { path: 'file.txt' });
```
  1
  2
Tauri 如何实现应用打包和跨平台发布？
- 使用 tauri build 命令生成各平台安装包。
- 配置 tauri.conf.json 设置应用名称、图标、权限等。
- 支持 Windows（MSVC）、macOS（Xcode）、Linux（GTK）平台。
Tauri 的安全机制有哪些？
- 进程隔离：前端代码在独立 WebView 中运行，无法直接访问系统 API。
- 权限控制：通过 tauri.conf.json 限制可访问的 API。
- 代码签名：支持对应用进行数字签名，防止篡改。

uni-app

uni-app 是什么？
uni-app 是基于 Vue.js 的跨端开发框架，一套代码可编译到小程序、H5、App（iOS/Android）等多个平台。核心原理是通过条件编译将代码转换为各平台原生代码。
uni-app 如何实现“一次开发，多端发布”？
- 编译器转换：通过 Vue 模板语法生成不同平台的代码（如微信小程序 WXML、H5 的 HTML）。
- 条件编译：使用 // #ifdef H5 等注释，针对不同平台编写差异化代码。
- 统一 API：通过 uni.xxx 方法（如 uni.request）抹平平台接口差异。
uni-app 的页面路由和原生小程序有何不同？
- uni-app 使用 Vue Router 风格的路由（如 uni.navigateTo）。
- 原生小程序通过 app.json 配置页面路径，跳转用 wx.navigateTo。
- 优势：uni-app 的路由更接近前端开发习惯，支持嵌套路由。
如何优化 uni-app 的 App 端性能？
- 减少 v-for 中嵌套层级，使用 虚拟列表 渲染长列表。
- 避免频繁调用 uni.getSystemInfo 等同步 API。
- 使用 renderjs 处理复杂计算，减少逻辑层与视图层通信。
uni-app 如何集成原生插件？
1. 在 nativeplugins 目录中添加插件（如 Android 的 .aar 文件）。
2. 在 manifest.json 中声明插件依赖。
3. 通过 uni.requireNativePlugin('PluginName') 调用插件方法。

React Native

React Native 是什么？
React Native（RN）是 Facebook 推出的跨平台移动应用框架，使用 JavaScript 和 React 语法，通过原生组件（非 WebView）渲染界面，接近原生应用的性能和体验。
React Native 和 Hybrid 应用（如 Cordova）的核心区别？
- 渲染方式：RN 通过 JS 线程与原生 UI 组件通信，Hybrid 应用使用 WebView 渲染。
- 性能：RN 的列表滚动、动画等体验更接近原生。
- 开发体验：RN 支持热重载（Hot Reload），Hybrid 应用需手动刷新 WebView。
React Native 如何实现与原生模块的通信？
- Native Modules：用 Java/Kotlin（Android）或 Objective-C/Swift（iOS）编写原生代码，通过 NativeModules 暴露给 JS 调用。
- 事件机制：通过 DeviceEventEmitter 发送原生事件到 JS 层。
RN 应用常见的性能优化手段有哪些？
- 使用 FlatList 替代 ScrollView 渲染长列表。
- 减少 render 次数（如 React.memo 或 shouldComponentUpdate）。
- 将耗时操作（如数据处理）放到 Web Worker 或原生层。
如何实现 React Native 的热更新（OTA）？
使用微软的 CodePush 或自建 OTA 服务：
1. 将 JS Bundle 文件上传到服务器。
2. 客户端启动时检查版本并下载更新。
3. 通过 react-native-code-push 静默替换本地代码。

小程序

介绍一下微信小程序的运行原理
微信小程序采用双线程模型：
- 逻辑层：单独线程执行 JavaScript（如数据处理）。
- 渲染层：WebView 线程渲染页面（WXML/WXSS）。
- 通信方式：通过 Native 层中转数据传输，如 setData 调用。
小程序有哪些性能优化手段？
- 减少 setData 的频率和数据量（避免传递大对象）。
- 使用分包加载（subpackages）减少首包体积。
- 提前请求数据（如 onLoad 阶段发起网络请求）。
- 使用自定义组件和 纯数据字段。
小程序的 WXS 是什么？有什么作用？
WXS（WeiXin Script）是小程序的一套脚本语言，特点：
- 运行在渲染层（非逻辑层），减少通信损耗。
- 用于处理数据格式化（如日期转换）、简单运算等场景。
- 语法类似 JavaScript，但不支持 ES6+ 特性。
如何实现小程序的跨端开发？
- 使用 Taro、uni-app 等框架，通过条件编译生成各平台代码。
- 遵循各平台规范（如支付宝小程序的 axml 和微信的 wxml）。
- 用 process.env.TARO_ENV 判断当前环境，编写差异化逻辑。
小程序的登录流程是怎样的？
1. 前端调用 wx.login() 获取临时 code。
2. 将 code 发送到开发者服务器。
3. 服务器用 code 和 AppSecret 向微信服务器换取 openid 和 session_key。
4. 返回自定义登录态（如 Token）给前端，后续请求携带 Token 验证身份。

跨端框架 ​

Electron ​

Tauri ​

uni-app ​

React Native ​

小程序 ​

跨端框架

Electron

Tauri

uni-app

React Native

小程序