跨端技术练习册

一、选择题

1. 下列哪个跨端方案使用自绘引擎？

A. React Native B. Flutter C. Cordova D. Taro

查看答案与解析

答案：B

解析： Flutter 使用 Skia/Impeller 自绘引擎，不依赖平台原生组件。

2. 微信小程序采用什么线程模型？

A. 单线程 B. 双线程 C. 多线程 D. 无线程

查看答案与解析

答案：B

解析： 微信小程序采用双线程模型：逻辑层（JavaScriptCore）和渲染层（WebView）。

3. Electron 中负责渲染前端页面的进程称为？

A. 主进程 B. 渲染进程 C. GPU 进程 D. 工作进程

查看答案与解析

答案：B

解析： Electron 中渲染进程负责运行前端页面，主进程负责应用生命周期和原生能力。

4. React Native 新架构中，允许 JS 直接调用 C++ 的接口是？

A. Bridge B. JSI C. Fabric D. TurboModules

查看答案与解析

答案：B

解析： JSI（JavaScript Interface）允许 JS 直接持有 C++ 对象引用，减少 Bridge 通信开销。

5. 下列哪个框架使用 Vue 语法开发跨端应用？

A. Taro B. React Native C. Flutter D. Electron

查看答案与解析

答案：A

解析： Taro 支持 React/Vue/Nerv 语法，UniApp 也使用 Vue 语法。

二、填空题

6. 跨端方案主要分为 WebView 方案、______ 渲染方案和自绘引擎方案。

查看答案与解析

答案：原生

解析： 三类主流跨端方案是 WebView、原生渲染和自绘引擎。

7. 微信小程序的页面结构文件是 ______。

查看答案与解析

答案：WXML

解析： 微信小程序使用 WXML 作为页面结构文件，类似 HTML。

8. React Native 使用 ______ 编写业务逻辑。

查看答案与解析

答案：JavaScript / React

解析： React Native 使用 JavaScript/JSX/React 编写业务逻辑，UI 由原生组件渲染。

9. Electron 中主进程和渲染进程通过 ______ 通信。

查看答案与解析

答案：IPC

解析： Electron 中主进程与渲染进程通过 IPC（进程间通信）机制通信。

10. Tauri 使用 ______ 语言编写后端，打包体积比 Electron 小很多。

查看答案与解析

答案：Rust

解析： Tauri 使用 Web 前端 + Rust 后端，相比 Electron 大幅减小包体积。

三、代码分析题

11. 分析以下 Taro 条件编译代码：

jsx

{/* #ifdef H5 */}
<View>H5 平台</View>
{/* #endif */}
{/* #ifdef MP-WEIXIN */}
<View>微信小程序</View>
{/* #endif */}

查看答案与解析

答案与解析：

#ifdef H5 表示只在 H5 平台编译
#ifdef MP-WEIXIN 表示只在微信小程序平台编译
条件编译用于处理平台特定逻辑

12. 分析以下 UniApp 页面代码：

vue

<template>
  <view>
    <text>&#123;&#123; title &#125;&#125;</text>
  </view>
</template>

<script>
export default {
  data() {
    return { title: 'Hello UniApp' };
  }
};
</script>

查看答案与解析

答案与解析：

使用 UniApp 的 view 和 text 组件
data 返回响应式数据
编译后会对应到各平台的原生组件

dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Hello Flutter')),
      ),
    );
  }
}

查看答案与解析

答案与解析：

StatelessWidget 是无状态组件
MaterialApp 提供 Material Design 风格
Scaffold 提供基本页面结构
Center 和 Text 是常用 Widget

四、编程实践题

14. 编写一个 React Native 基础组件。

查看答案与解析

答案：

javascript

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 20
  }
});

解析：

使用 React Native 提供的 View 和 Text 组件
StyleSheet.create 创建样式
样式属性与 CSS 类似但使用驼峰命名

15. 编写一个微信小程序页面。

查看答案与解析

答案：

xml

<!-- pages/index/index.wxml -->
<view class="container">
  <text>&#123;&#123; message &#125;&#125;</text>
  <button bindtap="handleTap">Click</button>
</view>

// pages/index/index.js
Page({
  data: {
    message: 'Hello Mini Program'
  },
  handleTap() {
    this.setData({ message: 'Clicked!' });
  }
});

解析：

WXML 中绑定数据使用 {{ }}
JS 中 data 定义页面数据
setData 更新数据并触发渲染
bindtap 绑定点击事件

16. 编写一个 Electron 主进程和渲染进程通信的示例。

查看答案与解析

答案：

javascript

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

ipcMain.on('get-message', (event) => {
  event.reply('reply-message', 'Hello from Main');
});

javascript

// renderer.js
const { ipcRenderer } = require('electron');

ipcRenderer.send('get-message');
ipcRenderer.on('reply-message', (event, message) => {
  console.log(message);
});

解析：

渲染进程通过 ipcRenderer.send 发送消息
主进程通过 ipcMain.on 监听并回复
渲染进程通过 ipcRenderer.on 接收回复

17. 编写一个 Taro 页面组件。

查看答案与解析

答案：

jsx

import { View, Text, Button } from '@tarojs/components';
import { useState } from 'react';

export default function Index() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button onClick={() => setCount(count + 1)}>Add</Button>
    </View>
  );
}

解析：

使用 Taro 提供的跨端组件
使用 React Hooks 管理状态
编译后可运行在微信小程序、H5 等平台上

18. 说明小程序双线程模型中 setData 的作用和注意事项。

查看答案与解析

答案：

作用：

setData 把逻辑层的数据发送到渲染层
渲染层根据新数据更新页面

注意事项：

避免频繁调用 setData
不要一次传输大量数据
只传需要变化的数据
避免在滚动等高频事件中 setData

解析：

setData 是小程序逻辑层和渲染层通信的桥梁。不合理使用会导致性能问题。

19. 编写一个 Flutter 计数器应用。

查看答案与解析

答案：

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterPage());
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(child: Text('$_count', style: TextStyle(fontSize: 40))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: Icon(Icons.add),
      ),
    );
  }
}

解析：

StatefulWidget 管理状态
setState 更新 UI
Scaffold 提供基础页面结构

20. 如何根据业务需求选择合适的跨端方案？

查看答案与解析

答案：

选型维度：

目标平台：移动端、小程序、桌面端、Web
性能要求：是否接近原生
团队技术栈：React、Vue、Dart、原生
生态成熟度：第三方库、社区支持
维护成本：长期迭代可行性

示例：

微信小程序：Taro / UniApp / 原生
跨平台 App：Flutter / React Native
桌面应用：Electron / Tauri
快速多端覆盖：Taro / UniApp

解析：

跨端方案没有绝对最好，只有最适合。需要综合考虑业务需求、团队能力和长期维护成本。

五、深入练习题

21. 跨端公共层架构设计题

题目：

某出行公司需要同时支持微信小程序、鸿蒙 App（HarmonyOS NEXT）、iOS/Android（React Native）和 H5。请设计一个跨端公共层，统一封装网络请求、本地存储、用户定位、分享、埋点等能力，并说明：

分层结构（业务层、公共层、平台适配层、原生实现层）。
如何处理各平台 API 差异（如微信小程序 wx.request、鸿蒙 @ohos.net.http、RN fetch、H5 fetch）。
如何保证新增平台时改动成本最小。
针对鸿蒙分布式能力，如何设计"手机下单、车机续导航"的场景。

查看答案与解析

参考答案要点：

分层结构：
- 业务层：只调用 sdk.request()、sdk.storage.set() 等统一接口；
- 公共层：定义 TypeScript/Kotlin 接口和通用逻辑；
- 平台适配层：根据运行平台分发到具体实现；
- 原生实现层：各端分别实现网络、存储、定位等能力。
差异处理：
- 网络：统一 request(url, options) 接口，内部判断 isMiniProgram / isHarmony / isRN / isH5；
- 存储：统一 storage.get/set，底层分别调用 wx.getStorageSync、鸿蒙 preferences、RN AsyncStorage、H5 localStorage；
- 分享：各平台实现不同，公共层返回能力探测结果，业务层按需降级。
新增平台最小改动：
- 适配层使用依赖注入或工厂模式；
- 新平台只需实现接口并注册到适配器；
- 业务代码零改动。
鸿蒙分布式场景：
- 使用 distributedMissionManager.continueMission 将导航 Ability 从手机迁移到车机；
- 通过分布式数据服务同步订单状态；
- 车机端 UIAbility 接收迁移参数后恢复导航页面。

22. 鸿蒙 ArkTS 响应式页面实践题

题目：

使用 ArkTS 编写一个支持手机与车机双端响应式布局的页面：

手机端显示单列列表，车机端（宽屏）显示左右分栏；
点击列表项后，右侧或详情页显示选中内容；
说明 EntryAbility 生命周期中 onCreate、onWindowStageCreate、onForeground 的调用时机。

查看答案与解析

参考答案：

typescript

// pages/Index.ets
import mediaquery from '@ohos.mediaquery';

@Entry
@Component
struct Index {
  @State isWide: boolean = false;
  @State selected: string = '';
  private listener = mediaquery.matchMediaSync('(width>=600vp)');

  aboutToAppear() {
    this.listener.on('change', (matches) => {
      this.isWide = matches;
    });
  }

  build() {
    if (this.isWide) {
      Row() {
        this.ListColumn()
        this.DetailColumn()
      }
      .width('100%')
      .height('100%')
    } else {
      this.ListColumn()
    }
  }

  @Builder
  ListColumn() {
    Column() {
      ForEach(['导航', '音乐', '电话', '设置'], (item: string) => {
        Text(item)
          .fontSize(18)
          .height(48)
          .width('100%')
          .backgroundColor(this.selected === item ? '#E6F7FF' : '#FFFFFF')
          .onClick(() => this.selected = item)
      })
    }
    .width(this.isWide ? '30%' : '100%')
    .height('100%')
    .padding(16)
  }

  @Builder
  DetailColumn() {
    Column() {
      Text(this.selected || '请选择项目')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
    }
    .width('70%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

生命周期说明：

onCreate：Ability 首次创建时调用，用于一次性初始化（如读取启动参数）。
onWindowStageCreate：窗口阶段创建完成，此时加载主页面。
onForeground：Ability 切换到前台时调用，适合恢复状态或开始定位/计时。

23. Kotlin Multiplatform 选型分析题

题目：

你所在团队已有成熟的 iOS（SwiftUI）和 Android（Jetpack Compose）原生应用，现在希望降低双端业务逻辑重复代码。请分析 KMP 与 Flutter 在该项目中的适用性，并给出迁移路径。

查看答案与解析

参考答案要点：

现状分析：
- 已有原生 UI 体系，UI 改动频繁且对体验要求高；
- 业务逻辑（网络、数据、领域模型、计算）重复严重；
- 团队有 Kotlin 和双端原生开发能力。
KMP 适用性：
- 保留现有 SwiftUI / Jetpack Compose UI，风险最小；
- 将网络层、Repository、领域模型、校验逻辑下沉到 shared 模块；
- 使用 expect/actual 处理平台差异（如 Keychain/Keystore、日志）。
Flutter 适用性：
- 需要推翻现有双端 UI，重写成本高；
- 适合从零开始或 UI 一致性要求极高的新应用；
- 包体积和学习成本对现有团队挑战较大。
迁移路径：
- 第一步：创建 shared 模块，迁移工具类和数据模型；
- 第二步：迁移网络层与 Repository，iOS/Android 分别接入；
- 第三步：迁移核心业务逻辑（订单、支付、用户状态）；
- 第四步：建立 CI 流程，确保共享模块测试覆盖；
- 第五步：评估是否将部分 UI 也纳入共享（通常不建议）。

领域编号：E08 跨端技术
最后更新：2026-06-24

跨端技术练习册 ​

一、选择题 ​

1. 下列哪个跨端方案使用自绘引擎？ ​

2. 微信小程序采用什么线程模型？ ​

3. Electron 中负责渲染前端页面的进程称为？ ​

4. React Native 新架构中，允许 JS 直接调用 C++ 的接口是？ ​

5. 下列哪个框架使用 Vue 语法开发跨端应用？ ​

二、填空题 ​

6. 跨端方案主要分为 WebView 方案、______ 渲染方案和自绘引擎方案。 ​

7. 微信小程序的页面结构文件是 ______。 ​

8. React Native 使用 ______ 编写业务逻辑。 ​

9. Electron 中主进程和渲染进程通过 ______ 通信。 ​

10. Tauri 使用 ______ 语言编写后端，打包体积比 Electron 小很多。 ​

三、代码分析题 ​

11. 分析以下 Taro 条件编译代码： ​

12. 分析以下 UniApp 页面代码： ​

13. 分析以下 Flutter Widget： ​

四、编程实践题 ​

14. 编写一个 React Native 基础组件。 ​

15. 编写一个微信小程序页面。 ​

16. 编写一个 Electron 主进程和渲染进程通信的示例。 ​

17. 编写一个 Taro 页面组件。 ​

18. 说明小程序双线程模型中 setData 的作用和注意事项。 ​

19. 编写一个 Flutter 计数器应用。 ​

20. 如何根据业务需求选择合适的跨端方案？ ​

五、深入练习题 ​

21. 跨端公共层架构设计题 ​

22. 鸿蒙 ArkTS 响应式页面实践题 ​

23. Kotlin Multiplatform 选型分析题 ​

跨端技术练习册

一、选择题

1. 下列哪个跨端方案使用自绘引擎？

2. 微信小程序采用什么线程模型？

3. Electron 中负责渲染前端页面的进程称为？

4. React Native 新架构中，允许 JS 直接调用 C++ 的接口是？

5. 下列哪个框架使用 Vue 语法开发跨端应用？

二、填空题

6. 跨端方案主要分为 WebView 方案、______ 渲染方案和自绘引擎方案。

7. 微信小程序的页面结构文件是 ______。

8. React Native 使用 ______ 编写业务逻辑。

9. Electron 中主进程和渲染进程通过 ______ 通信。

10. Tauri 使用 ______ 语言编写后端，打包体积比 Electron 小很多。

三、代码分析题

11. 分析以下 Taro 条件编译代码：

12. 分析以下 UniApp 页面代码：

13. 分析以下 Flutter Widget：

四、编程实践题

14. 编写一个 React Native 基础组件。

15. 编写一个微信小程序页面。

16. 编写一个 Electron 主进程和渲染进程通信的示例。

17. 编写一个 Taro 页面组件。

18. 说明小程序双线程模型中 setData 的作用和注意事项。

19. 编写一个 Flutter 计数器应用。

20. 如何根据业务需求选择合适的跨端方案？

五、深入练习题

21. 跨端公共层架构设计题

22. 鸿蒙 ArkTS 响应式页面实践题

23. Kotlin Multiplatform 选型分析题