news 2026/9/15 1:54:19

React Native鸿蒙开发实战：房贷计算器实现

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
React Native鸿蒙开发实战：房贷计算器实现

1. React Native鸿蒙跨平台开发入门指南

作为一名长期从事移动开发的工程师，我最近尝试了React Native在鸿蒙平台的开发体验，发现这是一个非常值得投入的技术方向。鸿蒙系统的分布式能力和React Native的跨平台特性相结合，能够显著提升开发效率。本文将从一个实际的房贷计算器项目出发，带你快速上手React Native鸿蒙开发。

React Native在鸿蒙平台的适配已经相当成熟，官方提供了完整的支持文档和工具链。通过JavaScript代码就能调用鸿蒙的原生能力，同时保持高性能的UI渲染。对于熟悉React的开发者来说，学习曲线非常平缓。

2. 开发环境搭建与项目初始化

2.1 环境准备

首先需要安装Node.js（建议16.x以上版本）和Yarn包管理器。然后安装React Native CLI工具：

npm install -g react-native-cli

鸿蒙开发需要安装DevEco Studio，这是官方的IDE工具。安装完成后，配置好SDK路径和环境变量。

2.2 创建React Native项目

使用以下命令创建新项目：

react-native init MortgageCalculator --template react-native-template-harmony

这个命令会创建一个支持鸿蒙平台的React Native项目骨架。注意要使用专门的鸿蒙模板。

2.3 鸿蒙平台配置

在项目根目录下的harmony文件夹中，可以找到鸿蒙平台的相关配置。主要需要关注：

  1. config.json- 应用的基本配置
  2. resources- 资源文件目录
  3. entry- 鸿蒙入口文件

3. 房贷计算器核心功能实现

3.1 等额本息计算算法

等额本息是最常见的房贷还款方式，其核心计算公式如下：

const calculateEqualPayment = (principal, annualRate, months) => { const monthlyRate = annualRate / 100 / 12; const monthlyPayment = (principal * monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1); const totalPayment = monthlyPayment * months; const totalInterest = totalPayment - principal; return { monthlyPayment: parseFloat(monthlyPayment.toFixed(2)), totalInterest: parseFloat(totalInterest.toFixed(2)), totalPayment: parseFloat(totalPayment.toFixed(2)) }; };

这个函数接收贷款本金、年利率和贷款月数三个参数，返回包含月供、总利息和总还款额的对象。

3.2 等额本金计算算法

等额本金是另一种常见的还款方式，其特点是每月偿还的本金相同，利息逐月递减：

const calculateEqualPrincipal = (principal, annualRate, months) => { const monthlyRate = annualRate / 100 / 12; const monthlyPrincipal = principal / months; const firstMonthPayment = monthlyPrincipal + principal * monthlyRate; const lastMonthPayment = monthlyPrincipal + monthlyPrincipal * monthlyRate; const monthlyDecrease = monthlyPrincipal * monthlyRate; const totalInterest = (months + 1) * principal * monthlyRate / 2; const totalPayment = principal + totalInterest; return { firstMonthPayment: parseFloat(firstMonthPayment.toFixed(2)), lastMonthPayment: parseFloat(lastMonthPayment.toFixed(2)), monthlyDecrease: parseFloat(monthlyDecrease.toFixed(2)), totalInterest: parseFloat(totalInterest.toFixed(2)), totalPayment: parseFloat(totalPayment.toFixed(2)) }; };

3.3 还款明细计算

为了展示更详细的还款计划，我们需要计算每月的还款明细：

const calculatePaymentDetails = (principal, annualRate, months, type) => { const monthlyRate = annualRate / 100 / 12; const details = []; let balance = principal; if(type === 'equal-payment') { const monthlyPayment = (principal * monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1); for(let i = 1; i <= months; i++) { const interest = balance * monthlyRate; const principalPart = monthlyPayment - interest; balance -= principalPart; details.push({ month: i, payment: parseFloat(monthlyPayment.toFixed(2)), principal: parseFloat(principalPart.toFixed(2)), interest: parseFloat(interest.toFixed(2)), balance: parseFloat(balance.toFixed(2)) }); } } else { const monthlyPrincipal = principal / months; for(let i = 1; i <= months; i++) { const interest = balance * monthlyRate; const payment = monthlyPrincipal + interest; balance -= monthlyPrincipal; details.push({ month: i, payment: parseFloat(payment.toFixed(2)), principal: parseFloat(monthlyPrincipal.toFixed(2)), interest: parseFloat(interest.toFixed(2)), balance: parseFloat(balance.toFixed(2)) }); } } return details; };

4. UI界面设计与实现

4.1 输入区域设计

使用React Native的核心组件构建输入区域：

<View style={styles.inputContainer}> <Text style={styles.label}>贷款金额（元）</Text> <TextInput style={styles.input} value={principal} onChangeText={setPrincipal} keyboardType="numeric" placeholder="请输入贷款金额" /> <Text style={styles.label}>年利率（%）</Text> <TextInput style={styles.input} value={rate} onChangeText={setRate} keyboardType="decimal-pad" placeholder="请输入年利率" /> <Text style={styles.label}>贷款期限（年）</Text> <TextInput style={styles.input} value={years} onChangeText={setYears} keyboardType="numeric" placeholder="请输入贷款期限" /> <View style={styles.radioContainer}> <Text style={styles.label}>还款方式：</Text> <TouchableOpacity style={[styles.radioButton, repaymentType === 'equal' && styles.radioButtonActive]} onPress={() => setRepaymentType('equal')} > <Text style={styles.radioText}>等额本息</Text> </TouchableOpacity> <TouchableOpacity style={[styles.radioButton, repaymentType === 'principal' && styles.radioButtonActive]} onPress={() => setRepaymentType('principal')} > <Text style={styles.radioText}>等额本金</Text> </TouchableOpacity> </View> <TouchableOpacity style={styles.calculateButton} onPress={handleCalculate}> <Text style={styles.calculateButtonText}>计算</Text> </TouchableOpacity> </View>

4.2 结果显示区域

计算结果以卡片形式展示：

{result && ( <View style={styles.resultContainer}> <Text style={styles.resultTitle}>计算结果</Text> <View style={styles.resultRow}> <Text style={styles.resultLabel}>每月还款：</Text> <Text style={styles.resultValue}> ¥{result.monthlyPayment || result.firstMonthPayment} </Text> </View> {repaymentType === 'principal' && ( <View style={styles.resultRow}> <Text style={styles.resultLabel}>每月递减：</Text> <Text style={styles.resultValue}>¥{result.monthlyDecrease}</Text> </View> )} <View style={styles.resultRow}> <Text style={styles.resultLabel}>总利息：</Text> <Text style={styles.resultValue}>¥{result.totalInterest}</Text> </View> <View style={styles.resultRow}> <Text style={styles.resultLabel}>总还款额：</Text> <Text style={[styles.resultValue, styles.totalPayment]}> ¥{result.totalPayment} </Text> </View> <TouchableOpacity style={styles.detailButton} onPress={() => setShowDetails(!showDetails)} > <Text style={styles.detailButtonText}> {showDetails ? '隐藏还款明细' : '查看还款明细'} </Text> </TouchableOpacity> </View> )}

4.3 还款明细表格

当用户点击"查看还款明细"时，展示详细的还款计划：

{showDetails && details.length > 0 && ( <View style={styles.detailContainer}> <Text style={styles.detailTitle}>还款明细</Text> <View style={styles.detailHeader}> <Text style={styles.detailHeaderText}>期数</Text> <Text style={styles.detailHeaderText}>月供</Text> <Text style={styles.detailHeaderText}>本金</Text> <Text style={styles.detailHeaderText}>利息</Text> <Text style={styles.detailHeaderText}>剩余本金</Text> </View> <ScrollView style={styles.detailScrollView}> {details.map((item, index) => ( <View key={index} style={styles.detailRow}> <Text style={styles.detailCell}>{item.month}</Text> <Text style={styles.detailCell}>{item.payment}</Text> <Text style={styles.detailCell}>{item.principal}</Text> <Text style={styles.detailCell}>{item.interest}</Text> <Text style={styles.detailCell}>{item.balance}</Text> </View> ))} </ScrollView> </View> )}

5. 样式设计与鸿蒙适配

5.1 基础样式定义

使用StyleSheet创建样式对象：

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', padding: 16, }, inputContainer: { backgroundColor: '#fff', borderRadius: 8, padding: 16, marginBottom: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, label: { fontSize: 16, color: '#333', marginBottom: 8, }, input: { height: 40, borderWidth: 1, borderColor: '#ddd', borderRadius: 4, paddingHorizontal: 12, marginBottom: 16, fontSize: 16, }, radioContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 16, }, radioButton: { paddingHorizontal: 12, paddingVertical: 8, borderWidth: 1, borderColor: '#ddd', borderRadius: 4, marginRight: 8, }, radioButtonActive: { backgroundColor: '#1890ff', borderColor: '#1890ff', }, radioText: { fontSize: 14, }, calculateButton: { backgroundColor: '#1890ff', borderRadius: 4, paddingVertical: 12, alignItems: 'center', }, calculateButtonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, resultContainer: { backgroundColor: '#fff', borderRadius: 8, padding: 16, marginBottom: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, resultTitle: { fontSize: 18, fontWeight: 'bold', color: '#333', marginBottom: 12, }, resultRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8, }, resultLabel: { fontSize: 16, color: '#666', }, resultValue: { fontSize: 16, color: '#333', fontWeight: 'bold', }, totalPayment: { color: '#f5222d', }, detailButton: { marginTop: 12, paddingVertical: 8, borderTopWidth: 1, borderTopColor: '#eee', alignItems: 'center', }, detailButtonText: { color: '#1890ff', fontSize: 14, }, detailContainer: { backgroundColor: '#fff', borderRadius: 8, padding: 16, marginBottom: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, detailTitle: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 12, }, detailHeader: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#eee', paddingBottom: 8, marginBottom: 8, }, detailHeaderText: { flex: 1, fontSize: 14, fontWeight: 'bold', color: '#666', textAlign: 'center', }, detailScrollView: { maxHeight: 300, }, detailRow: { flexDirection: 'row', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', }, detailCell: { flex: 1, fontSize: 14, color: '#333', textAlign: 'center', }, });

5.2 鸿蒙平台样式适配

鸿蒙平台对React Native样式的支持已经相当完善，但仍有几点需要注意：

  1. 阴影效果在鸿蒙平台上表现略有不同，建议使用elevation属性替代box-shadow
  2. 圆角边框在鸿蒙平台上需要明确指定overflow: 'hidden'才能正确裁剪
  3. 文字渲染在鸿蒙平台上可能有些许差异，建议测试不同字号的表现

6. 功能扩展与优化

6.1 添加快捷输入选项

为了方便用户输入，可以添加一些常见的贷款金额和期限选项：

<View style={styles.quickOptions}> <Text style={styles.quickOptionsTitle}>快捷金额（万元）</Text> <View style={styles.quickOptionsRow}> {[50, 100, 150, 200].map(amount => ( <TouchableOpacity key={amount} style={styles.quickOption} onPress={() => setPrincipal(String(amount * 10000))} > <Text style={styles.quickOptionText}>{amount}</Text> </TouchableOpacity> ))} </View> <Text style={styles.quickOptionsTitle}>快捷期限（年）</Text> <View style={styles.quickOptionsRow}> {[10, 20, 30].map(year => ( <TouchableOpacity key={year} style={styles.quickOption} onPress={() => setYears(String(year))} > <Text style={styles.quickOptionText}>{year}</Text> </TouchableOpacity> ))} </View> </View>

6.2 添加利率历史数据

可以提供一些历史利率数据供用户参考：

const rateHistory = [ { date: '2023年', rate: '4.3%' }, { date: '2022年', rate: '4.6%' }, { date: '2021年', rate: '4.9%' }, { date: '2020年', rate: '4.75%' } ]; <View style={styles.rateHistory}> <Text style={styles.rateHistoryTitle}>历史基准利率</Text> <View style={styles.rateHistoryList}> {rateHistory.map(item => ( <TouchableOpacity key={item.date} style={styles.rateHistoryItem} onPress={() => setRate(item.rate.replace('%', ''))} > <Text style={styles.rateHistoryDate}>{item.date}</Text> <Text style={styles.rateHistoryRate}>{item.rate}</Text> </TouchableOpacity> ))} </View> </View>

6.3 添加还款方式对比

让用户可以直观比较两种还款方式的差异：

const compareRepayment = () => { const equalResult = calculateEqualPayment( parseFloat(principal), parseFloat(rate), parseFloat(years) * 12 ); const principalResult = calculateEqualPrincipal( parseFloat(principal), parseFloat(rate), parseFloat(years) * 12 ); return { equalPayment: equalResult.monthlyPayment, equalPrincipal: principalResult.firstMonthPayment, interestDiff: equalResult.totalInterest - principalResult.totalInterest }; }; {showComparison && ( <View style={styles.comparisonContainer}> <Text style={styles.comparisonTitle}>还款方式对比</Text> <View style={styles.comparisonRow}> <Text style={styles.comparisonLabel}>等额本息月供：</Text> <Text style={styles.comparisonValue}> ¥{compareResult.equalPayment.toFixed(2)} </Text> </View> <View style={styles.comparisonRow}> <Text style={styles.comparisonLabel}>等额本金首月：</Text> <Text style={styles.comparisonValue}> ¥{compareResult.equalPrincipal.toFixed(2)} </Text> </View> <View style={styles.comparisonRow}> <Text style={styles.comparisonLabel}>利息差额：</Text> <Text style={styles.comparisonValue}> ¥{compareResult.interestDiff.toFixed(2)} </Text> </View> </View> )}

7. 鸿蒙平台特性集成

7.1 使用鸿蒙分布式能力

React Native在鸿蒙平台上可以调用部分原生能力。例如，我们可以使用分布式数据服务在不同设备间同步计算结果：

import { DistributedData } from 'react-native-harmony'; // 初始化分布式数据服务 DistributedData.init() .then(() => { console.log('分布式数据服务初始化成功'); }) .catch(err => { console.error('分布式数据服务初始化失败', err); }); // 同步计算结果到其他设备 const syncResult = async () => { try { await DistributedData.put( 'mortgageResult', JSON.stringify(result) ); console.log('计算结果同步成功'); } catch (err) { console.error('计算结果同步失败', err); } };

7.2 鸿蒙卡片功能

可以将计算结果以服务卡片的形式展示在桌面上：

import { FormExtension } from 'react-native-harmony'; // 创建服务卡片 const createForm = async () => { try { const formId = await FormExtension.createForm({ name: '房贷计算结果', data: { monthlyPayment: result.monthlyPayment || result.firstMonthPayment, totalInterest: result.totalInterest, totalPayment: result.totalPayment }, template: 'default' }); console.log('服务卡片创建成功，ID:', formId); } catch (err) { console.error('服务卡片创建失败', err); } };

7.3 鸿蒙UI组件适配

React Native在鸿蒙平台上对部分UI组件有特殊优化，例如：

  1. TextInput在鸿蒙平台上支持更丰富的键盘类型
  2. ScrollView在鸿蒙平台上有更流畅的滚动体验
  3. TouchableOpacity在鸿蒙平台上有更好的触摸反馈

可以针对鸿蒙平台做一些特殊的UI优化：

// 检测运行平台 import { Platform } from 'react-native'; const isHarmony = Platform.OS === 'harmony'; // 根据平台使用不同的样式 const inputStyle = isHarmony ? styles.inputHarmony : styles.inputDefault;

8. 项目构建与发布

8.1 调试与热更新

React Native在鸿蒙平台上的调试体验与Android/iOS基本一致：

# 启动Metro打包服务 react-native start # 在鸿蒙设备或模拟器上运行应用 react-native run-harmony

鸿蒙平台也支持热更新功能，可以快速预览代码修改效果。

8.2 构建发布包

构建鸿蒙平台的发布包需要使用DevEco Studio：

  1. 在DevEco Studio中打开项目下的harmony目录
  2. 配置应用签名
  3. 选择Build > Build HAP(s)
  4. 生成的HAP包可以在鸿蒙应用市场发布

8.3 多平台适配

由于我们使用React Native开发，可以轻松适配其他平台：

# 运行iOS版本 react-native run-ios # 运行Android版本 react-native run-android

只需要少量平台特定代码，就可以实现一套代码多端运行。

9. 性能优化建议

9.1 计算性能优化

房贷计算涉及大量数学运算，可以考虑以下优化：

  1. 使用Memoization缓存计算结果
  2. 将复杂计算放入Web Worker
  3. 限制高频计算（如输入时实时计算）的频率
// 使用useMemo缓存计算结果 const result = useMemo(() => { if(!principal || !rate || !years) return null; return repaymentType === 'equal' ? calculateEqualPayment(principal, rate, years * 12) : calculateEqualPrincipal(principal, rate, years * 12); }, [principal, rate, years, repaymentType]);

9.2 渲染性能优化

还款明细列表可能很长，需要优化渲染性能：

  1. 使用FlatList替代ScrollView+map
  2. 实现虚拟滚动
  3. 使用React.memo避免不必要的重新渲染
const DetailItem = React.memo(({ item }) => ( <View style={styles.detailRow}> <Text style={styles.detailCell}>{item.month}</Text> <Text style={styles.detailCell}>{item.payment}</Text> <Text style={styles.detailCell}>{item.principal}</Text> <Text style={styles.detailCell}>{item.interest}</Text> <Text style={styles.detailCell}>{item.balance}</Text> </View> )); <FlatList data={details} renderItem={({ item }) => <DetailItem item={item} />} keyExtractor={item => item.month.toString()} initialNumToRender={20} maxToRenderPerBatch={10} windowSize={10} style={styles.detailScrollView} />

9.3 内存优化

处理大量数据时需要注意内存使用：

  1. 分页加载还款明细
  2. 及时清理不再需要的数据
  3. 避免在全局状态中保存过多数据
// 分页加载还款明细 const loadDetails = useCallback((start, end) => { return details.slice(start, end); }, [details]); // 使用分页数据 const [visibleDetails, setVisibleDetails] = useState([]); const loadMore = () => { const newDetails = loadDetails(visibleDetails.length, visibleDetails.length + 20); setVisibleDetails([...visibleDetails, ...newDetails]); };

10. 常见问题与解决方案

10.1 输入验证问题

确保用户输入的是有效数字：

const validateInput = (value, type) => { if(!value) return false; const num = parseFloat(value); if(isNaN(num)) return false; if(type === 'principal') { return num > 0 && num <= 10000000; // 不超过1000万 } if(type === 'rate') { return num > 0 && num <= 20; // 利率在0-20%之间 } if(type === 'years') { return num > 0 && num <= 30; // 期限在1-30年 } return true; };

10.2 精度问题处理

金融计算对精度要求很高，需要注意：

// 使用定点数运算避免浮点数精度问题 const preciseMultiply = (a, b) => { const aDecimals = (a.toString().split('.')[1] || '').length; const bDecimals = (b.toString().split('.')[1] || '').length; const factor = Math.pow(10, aDecimals + bDecimals); return (a * factor) * (b * factor) / (factor * factor); }; // 在计算中使用 const interest = preciseMultiply(balance, monthlyRate);

10.3 鸿蒙平台特定问题

  1. 样式不生效：检查样式属性是否被鸿蒙支持
  2. 原生模块找不到：确保已正确链接原生依赖
  3. 性能问题：使用HarmonyOS Profiler分析性能瓶颈
// 示例：处理鸿蒙平台特定问题 if(isHarmony) { // 鸿蒙平台特定修复 if(Platform.constants.reactNativeVersion.minor < 64) { console.warn('建议升级React Native版本以获得更好的鸿蒙支持'); } }

11. 项目结构优化建议

11.1 组件化拆分

将房贷计算器拆分为多个组件：

src/ components/ InputPanel/ index.js styles.js ResultCard/ index.js styles.js DetailTable/ index.js styles.js utils/ calculator.js formatter.js constants/ rates.js options.js App.js

11.2 状态管理

对于复杂状态，可以考虑使用Redux或MobX：

// 使用Context API管理状态 const MortgageContext = createContext(); const MortgageProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <MortgageContext.Provider value={{ state, dispatch }}> {children} </MortgageContext.Provider> ); }; // 在组件中使用 const { state, dispatch } = useContext(MortgageContext);

11.3 测试策略

  1. 单元测试：测试计算逻辑
  2. 组件测试：测试UI组件
  3. E2E测试：测试完整用户流程
// 示例单元测试 describe('calculateEqualPayment', () => { it('should calculate correct monthly payment', () => { const result = calculateEqualPayment(1000000, 4.9, 360); expect(result.monthlyPayment).toBeCloseTo(5307.27, 2); expect(result.totalInterest).toBeCloseTo(910617.2, 1); }); });

12. 进一步学习资源

  1. React Native官方文档
  2. 鸿蒙开发者文档
  3. React Native鸿蒙适配指南
  4. TypeScript手册
  5. 金融数学基础

这个房贷计算器项目涵盖了React Native鸿蒙开发的各个方面，从基础组件使用到复杂计算逻辑，再到平台特定功能集成。通过这个实践项目，你可以快速掌握React Native在鸿蒙平台的开发技巧，为更复杂的应用开发打下坚实基础。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/9/15 1:53:53

C++装饰器模式：动态扩展对象功能的实践指南

1. C装饰器模式的核心价值装饰器模式在C中是一种极其灵活的结构型设计模式&#xff0c;它允许我们在运行时动态地为对象添加新功能&#xff0c;而无需修改原有类的结构。这种能力在大型C项目中尤为重要&#xff0c;因为直接修改核心类往往会引发连锁反应&#xff0c;导致测试负…

作者头像 李华
网站建设 2026/9/15 1:53:36

从零打造高可用HTML登录页模板：视觉、动效与部署全解析

简介&#xff1a;高端漂亮的登录页面HTML模板源码&#xff0c;面向Web前端初学者、网页设计师以及需要快速交付登录模块的开发者&#xff0c;旨在解决登录页设计感不足、从零搭建效率低的问题。压缩包仅有50KB&#xff0c;体积轻量&#xff0c;共包含6个文件&#xff1a;1个主页…

作者头像 李华
网站建设 2026/9/15 1:51:25

细胞力学仿真排雷笔记：几何、材料、接触与收敛问题全解析

在CellMech_系列里捣鼓了大半年细胞力学仿真&#xff0c;我最大的感受是&#xff1a;真正让人头疼的从来不是模型跑不起来&#xff0c;而是它“跑起来了但结果对不对”以及“为什么换个参数就发散”这两种问题。细胞力学这道题放在通用有限元框架里非常特殊——微米级尺寸、千帕…

作者头像 李华
网站建设 2026/9/15 1:50:09

dirsearch目录扫描实战：从字典爆破到敏感目录泄露挖掘

在一个授权渗透测试项目里&#xff0c;我花了整整一个下午盯着终端滚屏&#xff0c;结果只扫出来几个 403 和一堆 200 的静态资源。当时的第一反应是目标很干净&#xff0c;直到客户无意间提到他们有一个内部系统曾经暴露过测试接口&#xff0c;我才意识到问题不是目标干净&…

作者头像 李华
网站建设 2026/9/15 1:50:03

AI写代码=技术债？从Code Review到自动化测试的工程化护栏

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/15 1:50:00

Unity小游戏热更新实战：HybridCLR+YooAsset改造复盘

先声明一下&#xff1a;这不是一篇教程&#xff0c;是一篇复盘。内容来自我最近半年把一个Unity手游改造成小游戏版本的真实过程&#xff0c;涉及热更框架选型、工程改造、资源管线、HybridCLR接入、YooAsset落地&#xff0c;以及在微信小游戏和WebGL上踩过的一堆坑。如果你正打…

作者头像 李华