uni-app&H5&Android混合開發一 || 最全面的uni-app離線打包Android平台教程

前言:

  為什麼會寫這麼一個教程,因為很久之前做過一個對接銀行POS我們的系統是使用的H5開發的app應用。但是假如對結果銀行相關業務的小夥伴應該都清楚,銀行的業務相對於其他的對接方而言安全性比較高,而且一般都不會提供訂製開發,所以只能我們自己來實現與他們的對接。因此我們把支付這一塊做成了Android原生的對接,因為我們需要對接銀行提供的Activity組件來來實現POS機掃碼、刷卡等相關的支付功能。

什麼是原生開發?什麼是混合開發?兩者有什麼區別?

詳情概述://zhuanlan.zhihu.com/p/32146560

開發環境準備:

Android Studio 下載地址:Android Studio官網 OR Android Studio中文社區

(Android Studio 下載安裝詳細教程://blog.csdn.net/wangmx1993328/article/details/81905195)

uni-app開發環境安裝:HBuilderX

App離線SDK下載:最新android平台SDK下載

下載uni-app Android打包所需要的 SDK:

//nativesupport.dcloud.net.cn/AppDocs/download/android

 

下載成功,如下圖所示:

使用Android Studio 打開Hbuilder-Hello (H5+項目模板),並編譯:

注意:

下文中的Hbuilder-Hello等於HBuilder-HelloUniApp因為之前版本是叫做HBuilder-Hello,所以大家只要知道這兩個SDK其實是一樣的只是版本不一樣而已。

注意不要把項目放在帶有中文的文件夾目錄下面,否則無法編譯通過提示一下錯誤:

編譯的時候會提示:項目路徑包含非ASCII字元。這很可能會導致Windows上的生成失敗。請將項目移到其他目錄或者更改為英文文件名。

 打開Hbuilder-Hello Android項目:

 注意:導入成功以後進行項目編譯,注意第一次項目編譯可能會出現ERROR: Read timed out的情況,不過不要慌繼續點擊編譯即可解決。

解決項目編譯通過後無法直接在虛擬設備中運行提示Error:moudle not specified:

問題查找:

1、點擊Edit Configurations:

 2、 在彈出層左側選擇,Android App>app 查看General模組下的Module中是否存在其他模組:

 Android Studio中運行項目時提示Error:moudle not specified,解決方案:

 點擊搜索按鈕,輸入【Sync Project With Gradle Files】,直接點擊下面搜索到的內容,然後就會自動安裝缺少的Gradle Files文件,安裝完成之後項目即可運行!

 使用Android Studio中的虛擬設備運行項目,查看運行效果:

如何使用Android Studio中的虛擬設備運行項目,如下圖所示:

 

 虛擬設備運行成功後的項目介面:

HBuilderX生成本地打包App資源:

生成本地打包App資源:

使用HBuilderX寫好的項目,點擊發行 > 原生app-本地打包 > 生成本地打包資源,打包完成後,HBuilderX控制台會輸出打包資訊和打包路徑:

 

 

生成的資源文件如下圖所示:

Android知識點補充,assets資源目錄和res目錄介紹:

assets目錄下存放的原生資源文件(不會被編譯):
Android的體系架構設計中,assets目錄下的數據內容(圖片、文件等等)將不會被Android系統壓縮、二次處理等,assets目錄下的文件將保持原汁原味打包進Android的apk文件中,因此,利用Android assets這一點特性,根據項目開發的需要,在某種情況下,可以在assets目錄下存放一些不希望被Android系統二次處理的原始文件,就像在PC開發時候直接針對硬碟上存放的文件內容進行讀寫一樣讀出原始數據。

res目錄下存放的可編譯的資源文件:

 這種資源文件系統會在R.java裡面自動生成該資源文件的ID,所以訪問這種資源文件比較簡單,通過R.XXX.ID即可。

HBuilder-Hello > app > src > main 文件圖解:

打開android studio 切換項目到project目錄,依次打開 HBuilder-Hello > app > src > main > assets,能看到apps.HelloH5.www 和 data 兩個文件夾:

 

 

將HBuilderX生成本地打包App資源複製到項目App>src>main>assets>apps目錄下:

將本地App資源文件Copy到App>src>main>assets>apps目錄中,並把之前的apps.HelloH5.www 刪除(也可以不刪除)。

apps目錄下存在多個app項目如何指定對應項目運行:

當我們沒有刪除apps目錄文件夾下的apps.HelloH5.www項目時,在存在兩個app項目的情況下如何指定對應的項目運行,下圖所示:

替換dcloud_control.xml中的appid:

複製apps.HelloH5.www>maindest.json 中的id(__UNI__18BEDD3 我項目中的id),替換data>dcloud_control.xml 中的 appid:

替換項目appid後重新編譯項目,查看HBuilderX生成的本地App資源效果:

替換appid後先點擊Build先點擊Clean Project(清理項目),然後在Make Project(重新編譯項目):

 

 

 虛擬設備運行成功後的項目介面: