APP构建教程
21 天前

特别提示

  • 本文主要讲解在Windows系统上手动打包Android appMacOS打包IOS app暂时只提供思路。
  • MacOS打包IOS app客户端推荐使用xcode,且建议先把Android打包理解会,IOS就很简单了。
  • 如果你想打包Android app更快速方便,可使用Docker打包:传送门

安装Flutter

构建AndroidiOS的话,我们需要提前安装flutter环境,安装前可以参考官方文档,如下:

这里只说下Windows下安装教程,MacOS差不多,自行看上面文档安装。

环境要求

  • 操作系统:Windows 7 SP1或更高的版本(64位操作系统)。
  • Windows PowerShell 5.0或者更高的版本(Windows 10中已经预装了)。

安装PowerShell 5

提示:windows 10已经预装PowerShell 5,所以可以跳过该步骤。

1、安装.NET Framework 4.6.2

下载地址:https://www.microsoft.com/en-au/download/details.aspx?id=53344

2、升级PowerShell补丁包,windows 7 64位请下载Win7AndW2K8R2版本

下载地址:https://www.microsoft.com/en-us/download/details.aspx?id=54616

安装Flutter SDK

先下载Flutter SDK最新Stable channel版本压缩包-传送门

下载好了后将压缩包里的flutter文件夹解压到D盘根目录,此时flutter绝对路径为D:\flutter

安装Android SDK

提示:如果是国内网络构建的话,请挂上梯子,不然下面有些环境会安装失败。

Android SDK下载地址-传送门,点击DOWNLOAD ANDROID STUDIO下载安装即可。

然后打开Android Studio,如果看到一个Missing SDK ,No Andriod SDK found.向导,则选择Next,最后Finish安装SDK

接着进入界面后,点击右下角Configure,选择Plugins,搜索并安装DartFlutter插件即可。

安装Git

Windows Git下载地址-传送门,点击相关链接下载安装即可。

检查Flutter环境

点击电脑左下角,搜索powershell,打开该工具,然后依次使用命令:

#注意后面的为解压出来的flutter文件夹,自行修改,以下为本文默认路径
$env:Path += ";D:\flutter\bin"
#如果该命令出现y/n,直接选择y即可
flutter doctor --android-licenses
flutter doctor

如果除Connected device外,前面3个都是,则安装完成。

构建步骤

构建前可以先看看官方指定文档,如下:

以上构建文档讲的已经很详细了,这里只说下Android应用构建大致步骤,ios就参考文档即可,且ios还需要参考这2个教程修改参数,参考一参考二

修改APP名称

修改android/app/src/main/AndroidManifest文件,大致如下:

#找到中间位置,即android:label一行,此处为app名称,自行修改
 <application
     ...
 android:label="flutter学习视频"
     ...
 <activity

修改APP图标

首先我们准备一个app头像,再配合该工具一键生成所有的app图标→传送门,生成的时候,Android目录默认mipmap就可以了。

然后将下载的图标压缩文件解压出来,将Android目录里所有的文件夹覆盖到app源码的android/app/src/main/res目录即可。

修改APP其他信息

修改android/app/build.gradle文件,大致如下:

#修改applicationId,为唯一的应用ID,一旦设置,后期就不能改了
applicationId "com.moemv.flutter"

#app 的内部版本号,自行修改
flutterVersionCode = '1'

#app显示的版本号,自行修改
flutterVersionName = '2.0'

填入高级版api

注意:请使用域名绑定高级版,并添加ssl证书,开启https访问。

编辑lib/api/api_client.dart文件,大致如下:

#后面为高级版访问地址,且包含api2,注意使用该功能需要开启api
static const String baseUrl = 'https://efv.zhuanma.co/api2/';

#后面为高级版绑定的域名地址
static const String host = 'https://efv.zhuanma.me';

#后面为apiKey参数,高级版请在转码设置处设置
static const String apiKey = '5d1DEB2AF23cG9d723d';

#此处为app首页的标题内容
static String title = 'vlog公开课';

开始构建app

提示:如果是国内网络构建的话,建议挂上梯子,不然会很慢,甚至构建失败。

比如我把app源码存放到了D盘根目录,且文件夹命名为moeapp,则app具体路径为D:\moeapp

点击电脑左下角,搜索powershell,打开该工具,然后依次使用命令:

#注意第一行命令后面的为解压出来的flutter文件夹,自行修改,以下为本文默认路径
$env:Path += ";D:\flutter\bin"
#使用国内镜像,国外服务器可以跳过
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
#接下来进入到app源码目录,自行修改,以下为本文默认路径
cd D:\moeapp
flutter pub get
flutter build apk --split-per-abi

等待打包完成即可,第一次打包会有点慢,第二次就快了,如果中途有修改相关信息,重新按照此方法打包构建即可。

更高级的构建方法就需要多看官方文档了,具体参考上面留的文档地址。

最后使用前请先完善内容,比如标签做好几十个、分类56个等等。