工程化与框架系列（24）--跨平台解决方案

news2025/3/9 12:51:48

跨平台解决方案 🌐

引言

随着移动互联网的发展，跨平台开发已成为前端开发的重要趋势。本文将深入探讨前端跨平台开发的各种解决方案，包括响应式设计、混合开发、原生开发等方案，帮助开发者选择合适的跨平台策略。

跨平台开发概述

跨平台开发主要包括以下方向：

  • 响应式Web：适配不同设备的网页应用
  • 混合应用：Web技术开发的原生应用
  • 原生跨平台：使用统一框架开发原生应用
  • 渐进式应用：Progressive Web Apps (PWA)
  • 小程序开发：各平台小程序解决方案

响应式Web开发

响应式布局实现

// 响应式布局管理器
class ResponsiveManager {
    private breakpoints: Map<string, number>;
    private mediaQueries: Map<string, MediaQueryList>;
    private handlers: Map<string, Function[]>;
    
    constructor() {
        this.breakpoints = new Map([
            ['mobile', 768],
            ['tablet', 1024],
            ['desktop', 1280]
        ]);
        
        this.mediaQueries = new Map();
        this.handlers = new Map();
        
        this.initializeMediaQueries();
    }
    
    // 初始化媒体查询
    private initializeMediaQueries(): void {
        this.breakpoints.forEach((value, key) => {
            const query = window.matchMedia(`(max-width: ${value}px)`);
            this.mediaQueries.set(key, query);
            this.handlers.set(key, []);
            
            query.addListener((e) => this.handleBreakpointChange(key, e));
        });
    }
    
    // 处理断点变化
    private handleBreakpointChange(breakpoint: string, event: MediaQueryListEvent): void {
        const handlers = this.handlers.get(breakpoint) || [];
        handlers.forEach(handler => handler(event.matches));
    }
    
    // 添加断点监听器
    addBreakpointListener(
        breakpoint: string,
        handler: (matches: boolean) => void
    ): void {
        const handlers = this.handlers.get(breakpoint);
        if (handlers) {
            handlers.push(handler);
            
            // 立即执行一次
            const query = this.mediaQueries.get(breakpoint);
            if (query) {
                handler(query.matches);
            }
        }
    }
    
    // 移除断点监听器
    removeBreakpointListener(
        breakpoint: string,
        handler: (matches: boolean) => void
    ): void {
        const handlers = this.handlers.get(breakpoint);
        if (handlers) {
            const index = handlers.indexOf(handler);
            if (index !== -1) {
                handlers.splice(index, 1);
            }
        }
    }
    
    // 获取当前设备类型
    getCurrentDevice(): string {
        for (const [device, query] of this.mediaQueries) {
            if (query.matches) {
                return device;
            }
        }
        return 'desktop';
    }
}

// 使用示例
const responsive = new ResponsiveManager();

// 监听断点变化
responsive.addBreakpointListener('mobile', (matches) => {
    if (matches) {
        // 移动端布局调整
        document.body.classList.add('mobile-layout');
    } else {
        document.body.classList.remove('mobile-layout');
    }
});

自适应图片处理

// 图片自适应管理器
class AdaptiveImageManager {
    private static imageMap: Map<string, string[]> = new Map();
    
    // 注册响应式图片
    static registerImage(
        id: string,
        sources: { src: string; width: number }[]
    ): void {
        const sortedSources = sources
            .sort((a, b) => a.width - b.width)
            .map(s => s.src);
        
        this.imageMap.set(id, sortedSources);
    }
    
    // 获取最适合的图片源
    static getBestImageSource(
        id: string,
        containerWidth: number
    ): string | null {
        const sources = this.imageMap.get(id);
        if (!sources) return null;
        
        // 根据容器宽度选择合适的图片
        const devicePixelRatio = window.devicePixelRatio || 1;
        const targetWidth = containerWidth * devicePixelRatio;
        
        for (const source of sources) {
            if (this.getImageWidth(source) >= targetWidth) {
                return source;
            }
        }
        
        return sources[sources.length - 1];
    }
    
    // 获取图片宽度
    private static getImageWidth(src: string): number {
        return new Promise<number>((resolve) => {
            const img = new Image();
            img.onload = () => resolve(img.width);
            img.src = src;
        });
    }
    
    // 更新图片源
    static updateImageSource(
        element: HTMLImageElement,
        containerWidth: number
    ): void {
        const id = element.dataset.imageId;
        if (!id) return;
        
        const source = this.getBestImageSource(id, containerWidth);
        if (source) {
            element.src = source;
        }
    }
}

// 使用示例
// 注册响应式图片
AdaptiveImageManager.registerImage('hero-image', [
    { src: '/images/hero-small.jpg', width: 400 },
    { src: '/images/hero-medium.jpg', width: 800 },
    { src: '/images/hero-large.jpg', width: 1200 }
]);

// 更新图片源
const heroImage = document.getElementById('hero') as HTMLImageElement;
const container = heroImage.parentElement!;

AdaptiveImageManager.updateImageSource(
    heroImage,
    container.clientWidth
);

// 监听窗口大小变化
window.addEventListener('resize', () => {
    AdaptiveImageManager.updateImageSource(
        heroImage,
        container.clientWidth
    );
});

混合应用开发

Hybrid框架封装

// Hybrid通信桥接
class HybridBridge {
    private static callbacks: Map<string, Function> = new Map();
    private static callbackId: number = 0;
    
    // 初始化桥接
    static initialize(): void {
        // 注册原生回调处理器
        window.nativeCallback = (callbackId: string, result: any) => {
            const callback = this.callbacks.get(callbackId);
            if (callback) {
                callback(result);
                this.callbacks.delete(callbackId);
            }
        };
    }
    
    // 调用原生方法
    static callNative(
        action: string,
        params: any = {}
    ): Promise<any> {
        return new Promise((resolve, reject) => {
            const callbackId = `callback_${++this.callbackId}`;
            
            this.callbacks.set(callbackId, resolve);
            
            // 发送消息到原生端
            const message = {
                action,
                params,
                callbackId
            };
            
            if (window.webkit?.messageHandlers?.bridge) {
                // iOS
                window.webkit.messageHandlers.bridge.postMessage(message);
            } else if (window.bridge) {
                // Android
                window.bridge.postMessage(JSON.stringify(message));
            } else {
                reject(new Error('Native bridge not found'));
            }
        });
    }
    
    // 注册JS方法供原生调用
    static registerHandler(
        name: string,
        handler: (data: any) => any
    ): void {
        window[`hybrid_${name}`] = handler;
    }
}

// 使用示例
HybridBridge.initialize();

// 调用原生方法
async function takePhoto() {
    try {
        const result = await HybridBridge.callNative('camera.takePhoto', {
            quality: 'high'
        });
        return result.imageUrl;
    } catch (error) {
        console.error('相机调用失败:', error);
        throw error;
    }
}

// 注册JS方法
HybridBridge.registerHandler('updateLocation', (data) => {
    console.log('收到位置更新:', data);
    return { received: true };
});

原生功能封装

// 原生功能API封装
class NativeAPI {
    // 相机功能
    static async camera(): Promise<{
        takePhoto: () => Promise<string>;
        startVideo: () => Promise<void>;
        stopVideo: () => Promise<void>;
    }> {
        // 检查权限
        await this.checkPermission('camera');
        
        return {
            takePhoto: async () => {
                return HybridBridge.callNative('camera.takePhoto');
            },
            startVideo: async () => {
                return HybridBridge.callNative('camera.startVideo');
            },
            stopVideo: async () => {
                return HybridBridge.callNative('camera.stopVideo');
            }
        };
    }
    
    // 定位功能
    static async location(): Promise<{
        getCurrentPosition: () => Promise<GeolocationPosition>;
        watchPosition: (callback: (position: GeolocationPosition) => void) => number;
        clearWatch: (id: number) => void;
    }> {
        // 检查权限
        await this.checkPermission('location');
        
        return {
            getCurrentPosition: () => {
                return new Promise((resolve, reject) => {
                    navigator.geolocation.getCurrentPosition(resolve, reject);
                });
            },
            watchPosition: (callback) => {
                return navigator.geolocation.watchPosition(callback);
            },
            clearWatch: (id) => {
                navigator.geolocation.clearWatch(id);
            }
        };
    }
    
    // 存储功能
    static async storage(): Promise<{
        setItem: (key: string, value: any) => Promise<void>;
        getItem: (key: string) => Promise<any>;
        removeItem: (key: string) => Promise<void>;
        clear: () => Promise<void>;
    }> {
        return {
            setItem: async (key, value) => {
                return HybridBridge.callNative('storage.setItem', {
                    key,
                    value: JSON.stringify(value)
                });
            },
            getItem: async (key) => {
                const result = await HybridBridge.callNative('storage.getItem', { key });
                return JSON.parse(result.value);
            },
            removeItem: async (key) => {
                return HybridBridge.callNative('storage.removeItem', { key });
            },
            clear: async () => {
                return HybridBridge.callNative('storage.clear');
            }
        };
    }
    
    // 检查权限
    private static async checkPermission(
        permission: string
    ): Promise<boolean> {
        const result = await HybridBridge.callNative('permission.check', {
            permission
        });
        
        if (!result.granted) {
            const requestResult = await HybridBridge.callNative('permission.request', {
                permission
            });
            
            if (!requestResult.granted) {
                throw new Error(`${permission} permission denied`);
            }
        }
        
        return true;
    }
}

// 使用示例
async function initializeApp() {
    try {
        // 初始化相机
        const camera = await NativeAPI.camera();
        
        // 初始化定位
        const location = await NativeAPI.location();
        
        // 初始化存储
        const storage = await NativeAPI.storage();
        
        // 使用原生功能
        const photoUrl = await camera.takePhoto();
        const position = await location.getCurrentPosition();
        await storage.setItem('lastPhoto', photoUrl);
        await storage.setItem('lastPosition', position);
    } catch (error) {
        console.error('初始化失败:', error);
    }
}

原生跨平台开发

React Native组件封装

// React Native组件封装示例
import React, { useEffect, useState } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    Platform,
    NativeModules
} from 'react-native';

// 自定义按钮组件
interface CustomButtonProps {
    title: string;
    onPress: () => void;
    style?: any;
}

const CustomButton: React.FC<CustomButtonProps> = ({
    title,
    onPress,
    style
}) => {
    const buttonStyles = Platform.select({
        ios: styles.iosButton,
        android: styles.androidButton,
        default: styles.defaultButton
    });
    
    return (
        <TouchableOpacity
            style={[buttonStyles, style]}
            onPress={onPress}
        >
            <Text style={styles.buttonText}>{title}</Text>
        </TouchableOpacity>
    );
};

// 原生模块封装
interface NativeModule {
    showToast: (message: string) => void;
    getDeviceInfo: () => Promise<{
        brand: string;
        model: string;
        systemVersion: string;
    }>;
}

const { NativeUtils } = NativeModules;

class NativeHelper {
    static showToast(message: string): void {
        if (Platform.OS === 'android') {
            NativeUtils.showToast(message, NativeUtils.SHORT);
        } else {
            // iOS实现
            NativeUtils.showToast(message);
        }
    }
    
    static async getDeviceInfo(): Promise<{
        brand: string;
        model: string;
        systemVersion: string;
    }> {
        return await NativeUtils.getDeviceInfo();
    }
}

// 样式定义
const styles = StyleSheet.create({
    iosButton: {
        backgroundColor: '#007AFF',
        borderRadius: 10,
        padding: 15
    },
    androidButton: {
        backgroundColor: '#2196F3',
        borderRadius: 4,
        elevation: 2,
        padding: 12
    },
    defaultButton: {
        backgroundColor: '#333333',
        borderRadius: 6,
        padding: 10
    },
    buttonText: {
        color: '#FFFFFF',
        fontSize: 16,
        textAlign: 'center'
    }
});

// 使用示例
const DeviceInfoScreen: React.FC = () => {
    const [deviceInfo, setDeviceInfo] = useState<any>(null);
    
    useEffect(() => {
        loadDeviceInfo();
    }, []);
    
    const loadDeviceInfo = async () => {
        try {
            const info = await NativeHelper.getDeviceInfo();
            setDeviceInfo(info);
        } catch (error) {
            NativeHelper.showToast('获取设备信息失败');
        }
    };
    
    return (
        <View style={{ padding: 20 }}>
            <CustomButton
                title="刷新设备信息"
                onPress={loadDeviceInfo}
            />
            {deviceInfo && (
                <View style={{ marginTop: 20 }}>
                    <Text>品牌: {deviceInfo.brand}</Text>
                    <Text>型号: {deviceInfo.model}</Text>
                    <Text>系统版本: {deviceInfo.systemVersion}</Text>
                </View>
            )}
        </View>
    );
};

export default DeviceInfoScreen;

小程序开发

小程序框架封装

// 小程序框架封装
class MiniAppFramework {
    private static instance: MiniAppFramework;
    private platform: 'wechat' | 'alipay' | 'toutiao';
    
    private constructor(platform: 'wechat' | 'alipay' | 'toutiao') {
        this.platform = platform;
    }
    
    static getInstance(platform: 'wechat' | 'alipay' | 'toutiao'): MiniAppFramework {
        if (!MiniAppFramework.instance) {
            MiniAppFramework.instance = new MiniAppFramework(platform);
        }
        return MiniAppFramework.instance;
    }
    
    // 统一API调用
    async callApi(
        name: string,
        params: any = {}
    ): Promise<any> {
        const api = this.getApiByPlatform(name);
        if (!api) {
            throw new Error(`API ${name} not supported on ${this.platform}`);
        }
        
        try {
            return await api(params);
        } catch (error) {
            console.error(`API ${name} failed:`, error);
            throw error;
        }
    }
    
    // 获取平台特定API
    private getApiByPlatform(name: string): Function | null {
        const apiMap: { [key: string]: { [key: string]: Function } } = {
            'navigateTo': {
                'wechat': wx.navigateTo,
                'alipay': my.navigateTo,
                'toutiao': tt.navigateTo
            },
            'request': {
                'wechat': wx.request,
                'alipay': my.request,
                'toutiao': tt.request
            },
            'showToast': {
                'wechat': wx.showToast,
                'alipay': my.showToast,
                'toutiao': tt.showToast
            }
        };
        
        return apiMap[name]?.[this.platform] || null;
    }
    
    // 路由管理
    async navigateTo(url: string, params: object = {}): Promise<void> {
        const queryString = Object.entries(params)
            .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
            .join('&');
        
        const fullUrl = queryString ? `${url}?${queryString}` : url;
        
        await this.callApi('navigateTo', { url: fullUrl });
    }
    
    // 网络请求
    async request(options: {
        url: string;
        method?: string;
        data?: any;
        headers?: object;
    }): Promise<any> {
        return this.callApi('request', {
            ...options,
            method: options.method || 'GET'
        });
    }
    
    // 界面交互
    async showToast(options: {
        title: string;
        icon?: string;
        duration?: number;
    }): Promise<void> {
        await this.callApi('showToast', options);
    }
}

// 使用示例
const app = MiniAppFramework.getInstance('wechat');

// 页面配置
const pageConfig = {
    data: {
        items: []
    },
    
    async onLoad() {
        try {
            const result = await app.request({
                url: 'https://api.example.com/items',
                method: 'GET'
            });
            
            this.setData({
                items: result.data
            });
        } catch (error) {
            app.showToast({
                title: '加载失败',
                icon: 'none'
            });
        }
    },
    
    async handleItemClick(event: any) {
        const { id } = event.currentTarget.dataset;
        
        await app.navigateTo('/pages/detail/detail', { id });
    }
};

Page(pageConfig);

最佳实践与建议

  1. 技术选型

    • 根据项目需求选择合适的方案
    • 考虑团队技术栈和学习成本
    • 评估性能和用户体验需求
    • 权衡开发效率和维护成本

  2. 代码复用

    • 抽象公共业务逻辑
    • 封装平台差异
    • 使用统一的数据流管理
    • 实现组件跨平台复用

  3. 性能优化

    • 合理使用原生能力
    • 优化首屏加载时间
    • 实现资源按需加载
    • 注意内存管理

  4. 体验优化

    • 保持平台一致性
    • 实现平滑的动画效果
    • 优化页面切换体验
    • 处理网络异常情况

总结

跨平台开发是一个复杂的工程，需要在以下方面做出权衡：

  1. 技术方案选择
  2. 代码复用策略
  3. 性能优化方案
  4. 用户体验保证
  5. 维护成本控制

通过合理的技术选型和架构设计，可以实现高效的跨平台开发，为用户提供一致的优质体验。

学习资源

  1. 响应式设计指南
  2. Hybrid App开发教程
  3. React Native官方文档
  4. 小程序开发指南
  5. PWA开发实践

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2312141.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【GPT入门】第9课 思维树概念与原理

【GPT入门】第9课 思维树概念与原理

【GPT入门】第9课 思维树概念与原理 1.思维树概念与原理2. 算24游戏的方法 1.思维树概念与原理 思维树&#xff08;Tree of Thought&#xff0c;ToT &#xff09;是一种大模型推理框架&#xff0c;旨在解决更加复杂的多步骤推理任务&#xff0c;让大模型能够探索多种可能的解决…
阅读更多...
栈概念和结构

栈概念和结构

文章目录 1. 栈的概念2. 栈的分类3. 栈的实现&#xff08;数组栈&#xff09;3.1 接口设计&#xff08;Stack.h&#xff09;3.2 接口实现&#xff08;Stack.c&#xff09;1&#xff09;初始化销毁2&#xff09;栈顶插入删除3&#xff09;栈顶元素、空栈、大小 3.3 完整代码Stac…
阅读更多...
Spring （八）AOP-切面编程的使用

Spring （八）AOP-切面编程的使用

目录 实现步骤&#xff1a; 1 导入AOP依赖 2 编写切面Aspect 3 编写通知方法 4 指定切入点表达式 5 测试AOP动态织入 图示&#xff1a; 实现步骤&#xff1a; 1 导入AOP依赖 <!-- Spring Boot AOP依赖 --><dependency><groupId>org.springframework.b…
阅读更多...
VS Code连接服务器教程

VS Code连接服务器教程

VS Code是什么 VS Code&#xff08;全称 Visual Studio Code&#xff09;是一款由微软推出的免费、开源、跨平台的代码编辑神器。VS Code 支持 所有主流操作系统&#xff0c;拥有强大的功能和灵活的扩展性。 官网&#xff1a;https://code.visualstudio.com/插件市场&#xff1…
阅读更多...
Windsuf 连接失败问题：[unavailable] unavailable: dial tcp...

Windsuf 连接失败问题：[unavailable] unavailable: dial tcp...

问题描述 3月6日&#xff0c;在使用Windsuf 时&#xff0c;遇到以下网络连接错误&#xff1a; [unavailable] unavailable: dial tcp 35.223.238.178:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of…
阅读更多...
docker中kibana启动后，通过浏览器访问，出现server is not ready yet

docker中kibana启动后，通过浏览器访问，出现server is not ready yet

问题&#xff1a;当我在浏览器访问kibana时&#xff0c;浏览器给我报了server is not ready yet. 在网上试了很多方法&#xff0c;都未能解决&#xff0c;下面是我的方法&#xff1a; 查看kibana日志&#xff1a; docker logs -f kibana从控制台打印的日志可以发现&#xff…
阅读更多...
更多文章请查看

更多文章请查看

更多文章知识请移步至下面链接&#xff0c;期待你的关注 如需查看新文章&#xff0c;请前往&#xff1a; 博主知识库https://www.yuque.com/xinzaigeek
阅读更多...
(十 九)趣学设计模式 之 中介者模式！

(十 九)趣学设计模式 之 中介者模式！

目录 一、 啥是中介者模式&#xff1f;二、 为什么要用中介者模式&#xff1f;三、 中介者模式的实现方式四、 中介者模式的优缺点五、 中介者模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;…
阅读更多...
博弈论算法

博弈论算法

一、减法游戏 初始有一个数 n。 两个玩家轮流操作&#xff0c;每次可以减去 1 到 9 之间的任意整数。 将数减到 0 的玩家获胜。 可以发现规律&#xff1a; 减法游戏只需要判断当前数取模是否为0&#xff0c;即可快速判断胜负。 例题&#xff1a; Leetcode 292. Nim 游戏 …
阅读更多...
【网络】HTTP协议、HTTPS协议

【网络】HTTP协议、HTTPS协议

HTTP与HTTPS HTTP协议概述 HTTP&#xff08;超文本传输协议&#xff09;&#xff1a;工作在OSI顶层应用层&#xff0c;用于客户端&#xff08;浏览器&#xff09;与服务器之间的通信,B/S模式 无状态&#xff1a;每次请求独立&#xff0c;服务器不保存客户端状态&#xff08;通…
阅读更多...
GitCode 助力 vue3-element-admin：开启中后台管理前端开发新征程

GitCode 助力 vue3-element-admin：开启中后台管理前端开发新征程

源码仓库&#xff1a; https://gitcode.com/youlai/vue3-element-admin 后端仓库&#xff1a; https://gitcode.com/youlai/youlai-boot 开源助力&#xff0c;开启中后台快速开发之旅 vue3-element-admin 是一款精心打造的免费开源中后台管理前端模板&#xff0c;它紧密贴合…
阅读更多...
Qt常用控件之表格QTableWidget

Qt常用控件之表格QTableWidget

表格QTableWidget QTableWidget 是一个表格控件&#xff0c;行和列交汇形成的每个单元格&#xff0c;是一个 QTableWidgetItem 对象。 1. QTableWidget属性 QTableWidget 的属性只有两个&#xff1a; 属性说明rowCount当前行的个数。columnCount当前列的个数。 2. QTableW…
阅读更多...
FFmpeg入门：最简单的音视频播放器

FFmpeg入门：最简单的音视频播放器

FFmpeg入门&#xff1a;最简单的音视频播放器 前两章&#xff0c;我们已经了解了分别如何构建一个简单和音频播放器和视频播放器。 FFmpeg入门&#xff1a;最简单的音频播放器 FFmpeg入门&#xff1a;最简单的视频播放器 本章我们将结合上述两章的知识&#xff0c;看看如何融…
阅读更多...
【Python爬虫】爬取公共交通路网数据

【Python爬虫】爬取公共交通路网数据

程序来自于Github&#xff0c;以下这篇博客作为完整的学习记录&#xff0c;也callback上一篇爬取公共交通站点的博文。 Bardbo/get_bus_lines_and_stations_data_from_gaode: 这个项目是基于高德开放平台和公交网获取公交线路及站点数据&#xff0c;并生成shp文件&#xff0c;…
阅读更多...
009---基于Verilog HDL的单比特信号边沿检测

009---基于Verilog HDL的单比特信号边沿检测

文章目录 摘要一、边沿检测二、时序逻辑实现2.1 rtl2.2 tb 三、组合逻辑实现3.1 rtl3.2 tb 摘要 文章为学习记录。采用时序逻辑和组合逻辑实现边沿检测的核心逻辑。组合逻辑实现的上升沿和下降沿的脉冲比时序逻辑实现的上升沿和下降沿的脉冲提前一拍。 一、边沿检测 边沿检测…
阅读更多...
Trae IDE新建C#工程

Trae IDE新建C#工程

目录 1 结论 2 项目结构 3 项目代码 1 结论 新建C#工程来说&#xff0c;Trae的Chat比DeepSeek的Coder好用。 2 项目结构 MyWinFormsApp/ │ ├── Program.cs ├── Form1.cs ├── Form1.Designer.cs ├── MyResources/ │ └── MyResources.resx └── MyWin…
阅读更多...
三、0-1搭建springboot+vue3前后端分离-idea新建springboot项目

三、0-1搭建springboot+vue3前后端分离-idea新建springboot项目

一、ideal新建项目1 ideal新建项目2 至此父项目就创建好了&#xff0c;下面创建多模块&#xff1a; 填好之后点击create 不删了&#xff0c;直接改包名&#xff0c;看自己喜欢 修改包名和启动类名&#xff1a; 打开ServiceApplication启动类&#xff0c;修改如下&#xff1a; …
阅读更多...
Unity光照之Halo组件

Unity光照之Halo组件

简介 Halo 组件 是一种用于在游戏中创建光晕效果的工具&#xff0c;主要用于模拟光源周围的发光区域&#xff08;如太阳、灯泡等&#xff09;或物体表面的光线反射扩散效果。 核心功能 1.光晕生成 Halo 组件会在光源或物体的周围生成一个圆形光晕&#xff0c;模拟光线在空气…
阅读更多...
递归专题刷题

递归专题刷题

文章目录 递归合并两个有序链表题解代码 反转链表题解代码 两两交换链表中的节点题解代码 Pow(x, n)&#xff08;快速幂&#xff09;题解代码汉诺塔题解代码 总结 递归 1. 重复的子问题宏观看待递归问题 合并两个有序链表 题目链接 题解 1. 重复的子问题 -> 函数头的设…
阅读更多...
Android Studio 一直 Loading devices

Android Studio 一直 Loading devices

https://stackoverflow.com/questions/71013971/android-studio-stuck-on-loading-devices
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023