從零學習Flutter（七）：boss直聘UI構建以及Flutter打包教程詳解

鳥窩發表於2018-12-11
FlutterUI
## flutter_boss_v1.0 重構--附帶打包教程

##說明
> 該專案是本人基於網上大佬9個月前公佈的仿boss直聘app進行的v1.0版本的重構

`而不是簡單的copy，舊專案中有部分bug，本人已經修復，另外對目錄結果進行從新調整，歡迎star`

> 專案會持續跟新，歡迎關注

## 效果預覽圖

![第一步](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/shothot/1.gif?raw=true)

![第二步](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/shothot/2.gif?raw=true)

> `詳情============`

![第三部](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/shothot/3.gif?raw=true)

![第四部](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/shothot/4.gif?raw=true)

![](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/shothot/5.gif?raw=true)

![](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/shothot/6.gif?raw=true)


## 說明
1. 該專案有許多地方沒有完善
- 啟動頁白屏
- 分頁指示器dot問題
- ...
- 本專案是在9月前flutter_boss 這個專案的基礎上用1.0重構
- 喜歡的朋友star
- 感興趣的朋友歡迎PR

2. 本專案短時間內不再更新
3. 該專案說明blog地址是：[blog_adress](http://www.cnblogs.com/gdsblog)

4. time:2018-12-10


# 寫一個win上 flutter 打包apk的教程


## 這篇文件介紹一下flutter打包釋出正式版apk

> 整體來看，和命令列打包rn的方法相差不大

## 打包前先做檢查工作&檢視構建配置

1. AndroidManifest.xml 清單
2. 檢查pubspec.yaml

## App簽名
1. 建立 keystore
keytool命令生成一個私有金鑰（Windows上keytool命令放在JDK的bin目錄中（比如C:\Program Files\Java\jdkx.x.x_x\bin），你可能需要在命令列中先進入那個目錄才能執行此命令。在mac上，直接進入專案根目錄輸入一下命令）

```
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

```
```
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

```

![1](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/publicshothot/2.png?raw=true)

`對比上面兩條命令key一個生成keystore，一個是生成jks，而生成keystore的已經過期，我們選用第二條`

`JKS 金鑰庫使用專用格式。建議使用 "keytool -importkeystore -srckeystore boss-release-key.jks -destkeystore boss-release-key.jks -deststoretype pkcs12" 遷移到行業標準格式 PKCS12`


> 這條命令會要求你輸入金鑰庫（keystore）[輸入金鑰庫口令:yaya123...]和對應金鑰的密碼，然後設> 置一些發行相關的資訊。最後它會生成一個叫做my-release-key.jks 的金鑰庫檔案

> 在執行上面這條語句之後，金鑰庫裡應該已經生成了一個單獨的金鑰，有效期為10000天。--alias引數 > 後面的別名是你將來為應用簽名時所需要用到的，所以記得記錄這個別名

2. 引用程式引入keystore

> 1.這裡主要幹兩件事，設定全域性key.properties或者區域性key.properties 2.配置grandle
> 這裡我們採用區域性key.properties的方法

建立一個名為<app dir>/android/key.properties的檔案，其中包含對金鑰庫的引用：

![2](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/publicshothot/3.png?raw=true)

```
storePassword=<password from previous step>
keyPassword=<password from previous step>
keyAlias=key
storeFile=<location of the key store file, e.g. /Users/<user name>/key.jks>

```
`注意: 保持檔案私密; 不要將它加入公共原始碼控制中 這裡我將其放在我D:\chuangye\fluter\cert\boss-release-key.jks 中`

在gradle中配置簽名,通過編輯<app dir>/android/app/build.gradle檔案為您的應用配置簽名

![](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/publicshothot/6.png?raw=true)

## 構建一個釋出版（release）APK

1. cd <app dir> (<app dir> 為您的工程目錄)

2. 執行flutter build apk (flutter build 預設會包含 --release選項)

![](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/publicshothot/4.png?raw=true)

3. 打包好的釋出APK位於<app dir>/build/app/outputs/apk/app-release.apk

![](https://github.com/TopGuo/flutter_boss_v1.0/blob/master/bossapp/doc/publicshothot/7.png?raw=true)

## 在裝置上安裝發行版APK

1. 用USB您的Android裝置連線到您的電腦
2. cd <app dir> .
3. 執行 flutter install .

## 到這裡該教程完結

blog地址 [blog地址](http://www.cnblogs.com/gdsblog)

## 打包補充=====

4-：生成發行APK包
cd android && ./gradlew assembleRelease

譯註：cd android表示進入android目錄（如果你已經在android目錄中了那就不用輸入了）。
./gradlew assembleRelease在macOS、Linux或是windows的PowerShell環境中表示執行當前目錄下的名為gradlew的指令碼檔案，且其執行引數為assembleRelease，注意這個./不可省略；而在windows的傳統CMD命令列下則需要去掉./。

# android.enableAapt2=false

Gradle的assembleRelease引數會把所有用到的JavaScript程式碼都打包到一起，然後內建到APK包中。如果你想調整下這個行為（比如js程式碼以及靜態資源打包的預設檔名或是目錄結構等），可以看看android/app/build.gradle檔案。

生成的APK檔案位於android/app/build/outputs/apk/app-release.apk，它已經可以用來發布了

**注意
注意：請確保 gradle.properties 中沒有包含_org.gradle.configureondemand=true_，否則會跳過 js 打包的步驟，導致最終生成的 apk 是一個無法執行的空殼

在把發行版本提交到 Play Store 之前，你應該做一次最終測試。輸入以下命令可以在裝置上安裝發行版本：

$ react-native run-android --variant=release
注意--variant=release引數只能在你完成了上面的簽名配置之後才可以使用。 你現在可以關掉執行中的 packager 了，因為你所有的程式碼和框架依賴已經都被打包到 apk 包中，可以離線執行了



5-：測試應用的發行版本
cd android && ./gradlew installRelease

注意installRelease引數只能在你完成了上面的簽名配置之後才可以使用。 你現在可以關掉執行中的packager了，因為你所有的程式碼和框架依賴已經都被打包到apk包中，可以離線執行了

在debug和release版本間來回切換安裝時可能會報錯簽名不匹配，此時需要先解除安裝前一個版本再嘗試安裝

gradlew assembleRelease 打包生成APK檔案

gradlew installRelease 安裝APK到手機

gradlew clean 清理上次的打包檔案

6-：啟用Proguard程式碼混淆來縮小APK檔案的大小

Proguard是一個Java位元組碼混淆壓縮工具，它可以移除掉React Native Java（和它的依賴庫中）中沒有被使用到的部分，最終有效的減少APK的大小。

重要：啟用Proguard之後，你必須再次全面地測試你的應用。Proguard有時候需要為你引入的每個原生庫做一些額外的配置。參見app/proguard-rules.pro檔案

要啟用Proguard，設定minifyEnabled選項為true：

/**
* 在release發行版中啟用Proguard來減小 to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = true

個人建議：若是你的專案因為新增此屬性無法執行，則刪除此配置。因為，這個真的會導致各種奇怪的問題


相關文章