Leelaa-Blog

切换主题

扫码开始移动端阅读

前端如何开发一个app

共
1291
字
需要≈
6.455
分钟
web

如何选择移动端开发框架 —— 我在开发 NAS 部署的有声书项目中的经历 ​

在决定选择一个合适的移动端开发框架时，我经过了多次的尝试与反思。今天我就和大家分享我在开发 NAS 部署的有声书项目 过程中，如何从 UniApp 、Flutter 和 React Native (RN) 中做出选择，并结合实际情况，分享我在不同框架下遇到的挑战和决策过程。

我的开发背景 ​

在开始这个项目时，我的目标是开发一个 移动端有声书播放应用 ，需要通过 NAS 存储服务进行内容管理和访问。要求应用能够稳定运行，支持音频播放、进度保存以及书籍同步功能。我的项目目标是尽量实现跨平台，既能在 Android 和 iOS 上运行，又能具备较高的开发效率。

UniApp：快速上手，但功能受限 ​

起初，我选择了 UniApp ，因为它支持一套代码跨平台发布，并且开发效率非常高。UniApp基于Vue.js，在开发中感觉与 Vue 相似，学习成本低，非常适合快速构建原型。

遇到的问题 ​

  • 系统级 API 的限制 ：在使用 UniApp 开发时，我发现很多系统级的 API 并不支持，比如蓝牙、存储访问等，导致无法实现一些有声书管理中的高级功能。
  • iOS 调试体验差 ：特别是在调试 iOS 端时，调试环境设置较为麻烦，模拟器上也无法及时预览变化，影响了开发进度。

虽然 UniApp 可以快速完成开发，但遇到系统级的功能需求时，限制性较强，最终未能满足我的要求。

Flutter：性能优越，但环境配置困难 ​

接下来，我尝试了 Flutter 。作为 Google 推出的跨平台开发框架，Flutter 在性能和 UI 定制方面有很大优势，特别是它提供的原生性能，使得应用的流畅度和响应速度非常高。

遇到的问题 ​

  • 环境配置复杂 ：我花费了很多时间在安装和配置 Flutter 环境上，但最终始终没有成功解决一些配置问题。比如，我的开发环境中遇到了与依赖版本冲突等问题，尝试了很多解决方案，依然无法顺利启动。
  • 学习曲线较陡 ：虽然 Flutter 提供了强大的 UI 功能，但我对 Dart 语言并不熟悉，且 Flutter 的社区资源相比 React Native 略显不足，使得在开发过程中遇到的许多问题都没有现成的解决方案。

由于环境和学习曲线的阻碍，我决定放弃 Flutter。

React Native：最合适的选择 ​

最后，我选择了 React Native 。作为最为成熟的跨平台框架之一，React Native 使用 JavaScript 和 React 开发，具有很强的社区支持和广泛的使用案例。

我的选择理由 ​

  • 跨平台能力 ：通过一次开发，React Native 能够在 iOS 和 Android 上完美运行，且性能接近原生应用，足以满足我的有声书播放功能。
  • 热重载功能 ：React Native 提供的热重载功能让我可以即时看到代码变动，极大提高了开发效率。
  • 成熟的生态与社区 ：React Native 拥有强大的社区支持，几乎所有常见的需求都有现成的第三方库可用，开发过程中遇到的问题能够快速找到解决方案。

示例代码 ​

以下是我在 React Native 中实现的音频播放功能的代码片段：

javascript
import React, { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';
import Sound from 'react-native-sound';

const AudioPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  
  let sound;

  useEffect(() => {
    sound = new Sound('https://example.com/audio-file.mp3', null, (error) => {
      if (error) {
        console.log('Failed to load the sound', error);
        return;
      }
      setDuration(sound.getDuration());
    });

    return () => {
      sound.release();
    };
  }, []);

  const togglePlay = () => {
    if (isPlaying) {
      sound.pause();
    } else {
      sound.play((success) => {
        if (!success) {
          console.log('Playback failed');
        }
      });
    }
    setIsPlaying(!isPlaying);
  };

  const updateProgress = () => {
    sound.getCurrentTime((seconds) => {
      setCurrentTime(seconds);
    });
  };

  return (
    <View>
      <Text>Current Time: {currentTime}s</Text>
      <Text>Duration: {duration}s</Text>
      <Button title={isPlaying ? 'Pause' : 'Play'} onPress={togglePlay} />
      <Button title="Update Progress" onPress={updateProgress} />
    </View>
  );
};

export default AudioPlayer;

这个组件利用 react-native-sound 库来播放音频，并提供了基本的播放控制功能。通过这个组件，我能够在有声书项目中实现音频播放与进度管理。

总结 ​

经过一番尝试，我最终选择了 React Native。尽管起初也遇到了环境配置和学习曲线的问题，但在实际开发中，React Native 无疑是最合适的选择。它不仅具有跨平台能力，而且开发效率高，性能优越，生态成熟，是一个值得依赖的框架。

在选择跨平台框架时，除了考虑性能和开发效率外，框架的社区支持和学习曲线也非常重要。在我后续的开发过程中，React Native 的优势愈加显现，帮助我高效地完成了 NAS 部署的有声书项目开发。

上次更新: