特别提示
- 本文主要讲解在
Windows
系统上手动打包Android app
,IOS 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 10
、11
、12
,点击右下角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
,搜索并安装Dart
和Flutter
插件即可。
4、安装JAVA
JAVA
下载地址-传送门,选择对应的系统版本,找到JRE
的smi
链接,下载安装即可。
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
如果Flutter
、Android toolchain
、HTTP 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设置教程。