从React Native,Flutter到小程序(一) 安装

allprojects{
    repositories {
        def ALIYUN_REPOSITORY_URL = 'https://maven.aliyun.com/repository/public'
        def ALIYUN_JCENTER_URL = 'https://maven.aliyun.com/repository/public'
        def ALIYUN_GOOGLE_URL = 'https://maven.aliyun.com/repository/google'
        def ALIYUN_GRADLE_PLUGIN_URL = 'https://maven.aliyun.com/repository/gradle-plugin'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."
                    remove repo
                }
                if (url.startsWith('https://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."
                    remove repo
                }
                if (url.startsWith('https://dl.google.com/dl/android/maven2/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_GOOGLE_URL."
                    remove repo
                }
                if (url.startsWith('https://plugins.gradle.org/m2/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_GRADLE_PLUGIN_URL."
                    remove repo
                }
            }
        }
        maven { url ALIYUN_REPOSITORY_URL }
        maven { url ALIYUN_JCENTER_URL }
        maven { url ALIYUN_GOOGLE_URL }
        maven { url ALIYUN_GRADLE_PLUGIN_URL }
    }
}

必须安装的依赖有:Node、JDK 和 Android Studio。

Node 版本18。
警告!切勿使用 cnpm!
JDK 11 以上版本。 可从Oracle 或 Temurin 官网下载。
老于 0.67 版本需要 JDK 1.8。

使用 npx nrm use taobao 切换淘宝源。
使用 npx nrm use npm 切换官方源。

安装 Yarn,作为 npm 的替代品,可以加速下载。
npm install -g yarn
yarn切换淘宝源
yarn config set registry https://registry.npm.taobao.org
yarn切换官方源
yarn config set registry https://registry.yarnpkg.com

Android 开发环境
因繁琐,必须仔细阅读配置步骤。 国内用户必须使用稳定代理软件。

安装 Android Studio,选择 Custom 安装选项,确保选中 SDK、SDK Platform、Android Virtual Device。
在 SDK Manager 中选择 Android 13 (Tiramisu) SDK、Build-Tools 33.0.0 以及 Intel x86 Atom_64 System Image。
应用后下载安装。

配置 ANDROID_HOME,指向 SDK 所在目录。可能不同于文档,请自查。
重新打开命令行生效。

添加其他工具目录到 Path:
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

创建新项目
npm uninstall -g react-native-cli @react-native-community/cli 卸载旧版本
使用npx react-native@latest init AwesomeProject 创建项目。
npx react-native@X.XX.X init AwesomeProject --version X.XX.X 使用旧版本

准备 Android 设备
使用 AVD(官方模拟器)、Genymotion 等第三方模拟器。 真机调试减少电脑资源消耗。

使用 AVD 管理器创建 AVD 虚拟设备。

编译并运行
cd AwesomeProject
开两个窗口分别运行
npx react-native start
npx react-native run-android
编译并运行。

修改项目
使用编辑器打开 App.js 修改,双击 R 键或菜单 Reload 刷新

从 https://flutter.cn/docs/development/tools/sdk-download 选择科技通道的 Flutter SDK,并按照文档进行安装。

更新 PATH 环境变量

在 Windows 的系统环境变量中添加 flutter\bin 的目录即可。

运行 flutter doctor 检查设置是否正确

根据检查报告中的提示来纠正所有的错误和依赖项。

安装 Android Studio

安装 Android Studio 作为 Flutter 的运行环境之一。

配置 Android 设备

需要安装 Google USB Driver
连接 Android 设备至电脑,通过 USB 进行通信。然后确保 Flutter 已经能够识别出你的设备。

配置 Android 模拟器

在 Android Studio 中配置虚拟模拟 Android 设备。并设置硬件加速选项以加快开发速度。

同意 Android SDK 协议
打开一个已经提升管理员权限的终端窗口
运行 flutter doctor --android-licenses 确认同意 Android SDK 的使用条款。
再次运行 flutter doctor 以确认是否已经可以正常使用 Flutter。
现在你已经准备就绪了,可以开始使用 Flutter 构建 Android 应用了。 flutter create 以创建新项目,并 flutter run 运行当前项目。
问题：Windows Version (Unable to confirm if installed Windows version is 10 or greater)
解决方法：依次运行flutter channel—>flutter channel master—>flutter upgrade—>flutter channel—>flutter doctor
最后执行flutter doctor检查

配置编辑器
Android Studio 安装 Flutter 和 Dart 插件
需要安装两个插件:

Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).
要安装这些:

启动Android Studio.
打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
选择 Browse repositories…, 选择 Flutter 插件并点击 install.
重启Android Studio后插件生效.

VS Code安装 Flutter 和 Dart 插件
安装Flutter插件
启动 VS Code
调用 View>Command Palette…
输入 ‘install’, 然后选择 Extensions: Install Extension action
在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
选择 ‘OK’ 重新启动 VS Code

通过Flutter Doctor验证您的设置
调用 View>Command Palette…
输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
查看“OUTPUT”窗口中的输出是否有问题

创建应用
打开 View > Command Palette。

输入「flutter」，选择 Flutter: New Project。

选择 Application。

新建或选择新项目将存放的上层目录。

输入项目名称，例如 my_app，并点击 Enter。

等待项目创建完成，并且 main.dart 文件展现在编辑器中。

该命令会创建一个名为 myapp，里面包含一个简单的示例程序，里面用到了 Material 组件。

国内环境需要的修改
（1）找到项目中android/gradle/wrapper/gradle-wrapper.properties文件中distributionUrl 信息
从http://services.gradle.org/distributions/找到对应的版本下载， 如gradle-7.5-all.zip，下载到本地电脑，记住位置
将gradle-wrapper.properties文件里面将原来的 distributionUrl=https://services.gradle.org/distributions/gradle-7.5-all.zip 换乘本地的
例如：distributionUrl=file:///d:/gradle-7.5-all.zip
（2）
修改Android模块下的bulid.gradle 中 repositories， 将默认库替换成阿里云镜像库
阿里云镜像库地址如下：
maven{ url ‘https://maven.aliyun.com/repository/google’ }
maven{ url ‘https://maven.aliyun.com/repository/jcenter’ }
maven{url ‘http://maven.aliyun.com/nexus/content/groups/public’ }

运行应用
检查一下 Android 设备是否已经正常运行。
flutter devices
使用下面指令运行应用：
flutter run
当应用编译完成后，就可以在设备上运行这个起步应用了。