APP手动构建教程

特别提示

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

打包总体思路

1、安装flutter和环境配置,可参考:点击查看

2、app源码配置及打包,可参考:打包Android app,打包iOS app

视频教学

提示:请点击播放器右下角全屏按钮进行观看。

建议先看完下面的教程,再跟着视频教学一起尝试打包,注意目前app已重做,配置方面可能会有差别,但打包总体不变。

安装Flutter配置环境

环境要求

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

1、安装PowerShell 5

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

先安装.NET Framework 4.6.2

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

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

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

2、安装Flutter SDK

先下载Flutter SDK,建议下载最新版本3.0+,竖屏app推荐3.1.0,横屏app推荐3.3.3,压缩包-传送门

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

3、安装Android SDK

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

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

提示:下面打开Android Studio,到最后Finish点不动,可能左侧有部分SDK你没有选择Accept,即左侧带红色*,可先点击再Accept。

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

提示:随着Android Studio更新,SDK Manager可能位置会有所变化,但总体都差不多,如有区别,自行查找。

接着进入界面后,点击中间的More Actions,选择SDK Manager,进入到Android SDK界面,选择Android 101112,点击右下角Apply安装。

再切换到SDK Tools界面(按钮大概在中间上方),勾选Android SDK Command-line Tool,点击右下角Apply安装。

然后依然在SDK Tools界面,点击右下角Show Package Details,找到Android SDK Build-Tools并展开,选择29.0.2版本,点击右下角Apply安装。

提示:随着Android Studio更新,Plugins可能位置会有所变化,但总体都差不多,如有区别,自行查找。

再到主界面,点击左侧的Plugins,选择Plugins,搜索并安装DartFlutter插件即可。

4、安装JAVA

JAVA下载地址-传送门,选择对应的系统版本,找到JREsmi链接,下载安装即可。

5、检查Flutter环境

点击电脑左下角,搜索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"
#如果该命令出现y/n,直接选择y即可
flutter doctor --android-licenses
flutter doctor

如果FlutterAndroid toolchainHTTP Host Availability主要的都是,则安装完成。

如果HTTP Host Availability检测报错,提示信号灯超时时间已到,则大概网络原因,解决办法如下:

1、编辑下载的flutter文件夹文件,路径packages\flutter_tools\lib\src\http_host_validator.dart,将https://maven.google.com/改成https://dl.google.com/dl/android/maven2/
2、删除下载的flutter文件夹里的缓存文件,路径bin\cache,整个cache文件夹删除。
3、重新运行flutter doctor命令检测环境

配置及打包app步骤

1、修改APP名称

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

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

2、修改APP图标和相关图片

准备一个app的图标,png格式,命名icon.png,覆盖到app源码目录assets文件夹即可。

还有app展示图app logo修改,可前往该文档查看修改教程:横屏app点击查看竖屏app点击查看

接下来横屏app,且只有横屏app需要配置替换一个图片,即图集界面强制广告图片,路径assets/benad.jpg,尺寸建议800x1164

3、修改APP其它信息

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

#修改applicationId,为唯一的应用ID,一旦设置,后期就不能改了,更新app的时候,依然用这个ID
applicationId "com.moemv.flutter"

4、给app配置图片cdn加速

这里使用的cdn会给你把app所有封面,截图等全部转换成体积非常小,每张图大概10kb左右的webp,可以使app图片加载极快,体验非常好。

首选,需要一个网络不错的vps服务器,配置不是很需求,主要是网络好点,然后搭建图片cdn加速,搭建教程:点击查看

编辑lib/core/utils/helper.dart文件,大致如下:

#横屏和竖屏app配置有区别,注意区分,且不要乱删东西,不然封面,截图都不会显示了

#竖屏app配置,image.efvcms.com为图片cdn域名,iqi360bytheway为图片cdn的apikey
String cdnUrl = 'https://image.efvcms.com/api?apikey=iqi360bytheway&url=' +

#横屏app配置,且有2个地方,iqi360bytheway为图片cdn的apikey
String cdnUrl =
    '$cdn/api?apikey=iqi360bytheway&url=' + url + '&force=true';
    
String cdnUrl = '$cdn$url?apikey=iqi360bytheway&force=true';

5、配置app的基础信息

注意:对接期间,必须给EFV高级版域名和分离CMS域名添加ssl证书,开启https访问,不然app获取不了数据。

编辑lib/core/values/strings.dart文件,大致如下:

#该参数为EFV高级版所绑定的域名地址,且必须使用ssl证书并开启https
const host = 'https://app.leimulamu.com';

#该参数为app检测的版本号,
const version = 230601;

#<仅竖屏app需配置>app标题
const title = "雷姆拉姆";

#该参数为EFV高级版所绑定的域名地址,不需要http://,只写域名,该选项仅横屏海报app存在
const emailRoot = 'app.leimulamu.com';

#<仅横屏app需配置>app的上传域名配置,即改成EFV高级版所绑定的域名地址
const uploadUrl = 'https://app.leimulamu.com/api2/uploads';

#<仅横屏app需配置>图片cdn域名配置,可搭建多个图片cdn加速,并设置多个,用户可在个人中心进行图片线路切换
const cdnUrls = [
  'https://cdn1.efvcms.com',
  'https://cdn2.efvcms.com',
  'https://cdn3.efvcms.com'
];
图片cdn域名按照默认的格式,一行一个,自行删减,且都需要放在英文单引号中间,末尾需要用英文逗号结尾,最后一个域名可不用英文逗号,其它都要;如果只有一个图片cdn域名,可参考以下配置:
const cdnUrls = [
  'https://cdn.efvcms.com'
];

注意这里的版本号是app更新的配置,更新具体可参考:点击查看

6、配置app的api域名

api接口会从EFV高级版读取全部信息,并缓存下来,然后会被app读取,且并发和运行效率极高,可使app读取越快,体验更好。

提示:如果你的服务器有限,api系统可以和图片cdn加速共用一个服务器。

首选,需要一个网络不错的vps服务器,配置不是很需求,主要是网络好点,然后搭建api系统,搭建教程:点击查看

再编辑竖屏lib/app/data/provider/dio_provider.dart或横屏lib/app/data/provider/api_dio.dart文件,大致如下:

#该参数为app的api接口绑定的域名,且必须使用ssl证书并开启https
const baseUrl = 'https://m3u8.zhuanma.co/api/';

#该参数为EFV高级版的apikey,可在EFV高级版的转码设置获取
const apiKey = 'domybestth';

7、给app签名

提示:首次打包需要签名,更新打包的时候,直接用该签名的文件即可。

日后为了方便给用户更新app,我们需要给app签名。

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

keytool -genkey -v -keystore C:\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

输入签名的密匙及其它相关信息,使用拼音就行了,最后问你是否正确的时候,你输入 是,再输入密匙确认即可。

最后会在我们的C盘根目录生成一个密匙文件upload-keystore.jks,保管好就行,不然会影响以后的升级操作。

然后我们解压app源码包后,然后编辑根目录android文件夹中key.properties文件,修改内容:

storePassword=efvcms
keyPassword=efvcms
keyAlias=upload
storeFile=C:/upload-keystore.jks

efvcms均为签名密匙,C:/upload-keystore.jks为密匙路径,注意路径格式请使用正斜杠/代替反斜杠\,如有变动可自行修改。

8、给app配置google统计

先前往google统计官网:点击进入,然后创建项目,名称随便填。

进去后,就可以看到添加应用提示,根据操作系统选择,比如我点击安卓图标,Android 软件包名称为上面设置的applicationId参数,如: com.moemv.flutter,其它可选,自己看着办。

然后注册后,下载google-services.json文件,丢到app源码包的android/app文件夹即可。

9、开始构建app

提示:如果是国内网络构建的话,建议挂上梯子,不然会很慢,甚至构建失败;且有时候因为插件要升级导致打包失败的,可以联系我们。

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

接下来继续在powershell依次使用命令:

#接下来进入到app源码目录,自行修改,以下为本文默认路径
cd D:\moeapp
#打包
flutter packages pub run flutter_launcher_icons:main
flutter pub get
flutter build apk --split-per-abi

这里注意,如果你powershell中途关闭过,则重新打开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"

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

最后apk文件在build\app\outputs\flutter-apk文件夹,共有3个版本,都是针对不同的移动CPU架构,一般可以直接用arm64-v8a即可,具体架构说明:点击查看

然后接下来,需要相关设置就可以用,横屏海报app设置教程竖屏海报app设置教程