web App調用Html5plus API實現原生功能之離線打包

前言

這是在一個原有web項目上進行的一成封裝，使其成爲一個apk格式的安裝包，還能夠在你的web項目中調用Html5plus Api來實現一些原生功能，官方文檔html5+規範，請慎重入坑，主要是官方文檔寫的不太好以及幾乎沒有社區，只能本身一個一個的爬。

下載H5+SDK

H5+應用離線打包的第一步，就是直接去官網下載相應版本的SDK：HTML 5+ SDK 更新日誌；最好下載最新版本的sdk，由於最新版本的sdk會修復之前出現的Bug（若是你不想本身踩太多的坑的話，我推薦下載最新版本的sdk包）。不要擔憂官方關於離線打包的文檔和你使用的版本對應不上，而後形成本身離線打包出現重重阻礙，選擇最新的sdk只會讓你開頭痛苦一下，後面你會比較順利；否則後面你可能就是不斷的打補丁，這個過程估計更痛苦，並且趕上SDK bug那麼你仍是得更新。

離線打包準備工做

若是本身的電腦上沒有Android Studio（後面AS均表明該軟件）的話記得去下載一個，我這裏使用的是Android Studio3.4.1，先講一下SDK中各文件夾的用途，以下圖：

如圖所示，我這裏使用的是如今最新的sdk1.9.9.62327，其中目錄結構以下：

1. 兩個markdown文件都是說明使用該版本的SDK進行離線打包須要注意的一些東西，好比說某某功能不能和另外一功能同時存在。
2. SDK就不用說了，就是真正的內容，其中的AndroidManifest.xml是安卓配置文件，assets是咱們離線打包時須要放置app/src/main/目錄下的，完整路徑爲app/src/main/assets；libs是一些功能依賴包文件（好比個推、分享等等）。
3. HBuilder-Hello和HBuilder-integerate-As都是離線打包demo，可是若是使用Android Studio進行離線打包的話請點擊HBuilder-integerate-As，若是是使用Eclipse的話能夠試一下另外一版本（我沒試過）。
4. 在uni-app中使用5+插件demo、UniPlugin-Hello-AS應該都是開發插件相關demo吧！因爲這次沒有用過這兩個文件夾，所以它們的用處暫時不明白。
5. Feature-Android.xls是權限清單，在AndroidManifest.xml配置文件須要使用（調用相應的功能須要相應的權限），能夠用來參考。

打開Android Studio，使用如下方式打開HBuilder-integerate-As這個demo：

有兩種方式進行離線打包，我上面說的是我推薦的，還有一種的話直接使用start a new Android Studio project新建一個原生安卓項目，看一下官方文檔後面操做幾乎和我說的這個教程區別不大，就是有些文件你須要本身刪除、添加，具體教程：使用新版本5+SDK建立最簡Android原生工程（Android studio），有不少文件都沒有，踩的坑會比較多；我推薦的這種打包方式官方文檔爲：Android平臺本地（離線）打包指南 - Android Studio；按照官方文檔的步驟的話，打開demo以後直接編譯一遍，用來判斷官方demo是否可以正常運行，若是demo不能運行下面的步驟就沒有意義了，能夠考慮換一個SDK包了。若是能正常運行，官方文檔以後的第一步是引入依賴包，若是你是按照我推薦的這個方式來離線打包的，

這一步能夠直接跳過，由於這個demo幾乎已經集成全部的功能，依賴已經引入了，若是你再重新引入，可能會致使AndroidManifest.xml配置文件合併失敗，因此信個人，別給本身找麻煩，後面功能正常以後再參考Feature-Android.xls引入相應依賴包和添加權限。
官方文檔的第二步分是配置應用權限

也能夠直接跳過，demo也集成了，這就是我推薦的緣由。
第三步配置第三方庫的數據

也能夠先跳過等到引入程序以後編譯成功再配置。

離線打包

若是你是直接離線打包並無使用過雲打包的話，那麼你須要將你代碼build後的文件使用hbuilder（x）進行離線打包（使用過雲打包的應該看到過）如圖：

離線打包在頂部的發行功能菜單中，若是你還只有一個dist文件夾（build的包）那麼你須要使用hubuilderx先建一個空的5+app項目，這樣你就會有一個manifest文件，而後你能夠將你的dist文件夾下面的內容拷貝至該項目根目錄下，而後點擊上面的manifest.json文件能夠可視化配置一些信息（啓動圖標、sdk配置等）。配置完成以後點擊發行>原生app-本地打包>生成本地打包app資源，放置的位置爲

咱們的demo項目下的/app/src/main/assets/apps/XXXX/www/目錄底下（其中XXXX爲你的appId，注意：在AS左邊的文件結構顯示AcmApp.www表明AcmApp/www這是兩個文件夾，不要把文件命名爲AcmApp.www，否則上面就變成/app/src/main/assets/apps/XXXX.www了，這裏是一個固定的格式appid/www，必定要按照這個格式，不然會致使編譯失敗），appId在hbuilderx能夠查看manifest.json可視化界面或者直接查看manifest.json代碼文件，通常你在使用hbuilderx離線打包時這一段XXXX/www/會自動生成，你只須要選擇好放置的路徑就行（你打開demo的/app/src/main/assets/apps路徑下）。

到這裏幾乎完成一半了，如今要開始改改配置。

修改相應配置

在你（AS中）打開的demo項目中找到AndroidManifest.xml，修改步驟能夠產看官方文檔：

因爲這裏官方文檔已經說的很詳細了，因此我就很少說了，圖標配置也說的很詳細了，補充一點

1. icon.png表明桌面顯示圖標。
2. push.png表明推送顯示圖標（沒試驗過，由於咱們應用icon和push使用的爲一張圖片）。
3. splash.png（應用啓動頁面）。

注意：這裏的名字必定要按這個格式命名。

修改/app/src/main/assets/data/dcloud_control.xml文件，appid和manifest.json文件的id同樣，appver和manifest.json文件的version.name同樣，以下圖：

最後修改/app/build.gradle文件，以下圖：

其中applicationId配置爲你的包名。

若是你是用另外一種方法進行離線打包，那你須要按照這種方式一步步從demo裏面拷貝文件並進行修改，同時我說的SDK/assets/data文件放置在你離線項目下這個位置就行：

可是沒有apps文件？沒辦法你只能在從demo項目中拷貝過來，而後將H57991E95這個文件夾替換成你的離線包（Hbuilderx經過發行>原生app-本地打包>生成本地打包app資源生成的包）記住必定是這種格式appid/www/真正的資源文件，這也是我不推薦使用這種方式從零開始，若是你有必定的Android功底能夠這樣。

AndroidManifest.xml重要配置項配置

不出意外上面的步驟已經讓你成功離線打包了，並且應該是能夠成功編譯成功的，可是編譯成功不表明你的應用全部功能都正常，這裏有幾個關於AndroidManifest.xml重要的配置項。

1. 個推的配置項

   首先得添加權限，檢查一下你的項目是否添加：

   <!-- 配置在manifest節點中 -->
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.READ_PHONE_STATE" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.VIBRATE" />
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
   <uses-permission android:name="android.permission.CALL_PHONE" />
   <uses-permission android:name="getui.permission.GetuiService.你的app包名" />
   <permission android:name="getui.permission.GetuiService.你的app包名" android:protectionLevel="normal" />
   複製代碼

   後面這兩項server在同一設備上只能同時存在一個，所以配置了個推的就不要配置米推了。推送還須要作以下配置（還須要配置meta-data第三方庫數據，能夠參考官方文檔，這裏很簡單）：

   !-- 配置在application節點中 -->
   <receiver android:name="io.dcloud.feature.apsGt.GTNotificationReceiver">
           <intent-filter>
               <action android:name="android.intent.action.BOOT_COMPLETED"/>
               <action android:name="你的包名.__CREATE_NOTIFICATION" />
               <action android:name="你的包名.__REMOVE_NOTIFICATION" />
               <action android:name="你的包名.__CLEAR_NOTIFICATION" />
               <action android:name="你的包名.__CLILK_NOTIFICATION" />
           </intent-filter>
       </receiver>
   複製代碼

   上面標註包名的地方必定注意替換成你的包名（反向域名格式）。

2. 因爲Android7.0+爲了提升安全性對文件的權限控制更加嚴格，所以runtime的許多方法都會失效，我遇到的就有install（更新app）、打開文件（openFile），涉及到文件的應該都會有問題，並且還不會報錯，這樣根本讓我沒法定位，最後看到一篇博文才讓我擺脫了這個問題，否則差一點就放棄了，在配置文件application節點中添加以下代碼：

   <provider android:name="android.support.v4.content.FileProvider" android:authorities="你的包名.fileprovider" android:exported="false" android:grantUriPermissions="true">
           <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_provider" />
       </provider>
   複製代碼

   本來那篇博文還須要在src/main/res目路下添加xml/file_proviser.xml，可是我沒添加同樣能夠，若是你按照上面配置runtime功能仍是不正常能夠嘗試配置一下，博文連接：解決 Android N 7.0 上 報錯：android.os.FileUriExposedException；

3. 還有一個值得注意的地方就是：有不少須要把它demo的包名替換成你本身的包名，可是有一些地方你是不能替換成你本身的包名的，一旦替換輕則某些功能異常，重則直接編譯不經過，可是怎麼區分呢？通常改動的時候你先把它原來的值刪了，而後在按着它的值再敲一遍，不要複製，若是提示中有它之前那個值表明這是一個引用其餘地方的文件，你不能刪除；還有一種方法，配置引用的大部分依賴來自於/src/main/java文件夾，你在糾結是否把包名替換成你的包名的時候，去該路徑找相應文件如com.HBuilder.integrate.SDK_WebView（我上面提過在AS文件結構.表明什麼意思），則查看java文件夾下是否有com/Hbuilder/intergrate文件夾，而且還有SDK_WebView文件，若是有那麼你就不能替換成你的包名。簡單一點的方法就是，凡是配置文件裏面的activity節點裏的包名就要慎重替換，幾個基本不能替換的：ActivityEntry、SDK_WebView、SDK_WebApp替換以後會致使直接不能經過編譯，配置以下：

   <!-- 其中com.HBuilder.integrate你的參考你java文件夾下的目錄結構，也許後面更新的結構有所改變 -->
   <activity android:name="com.HBuilder.integrate.ActivityEntry" android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" android:launchMode="singleTask" android:screenOrientation="user" android:windowSoftInputMode="adjustResize">
       </activity>
       <activity android:name="com.HBuilder.integrate.SDK_WebApp" android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale" android:screenOrientation="user" android:theme="@style/DCloudTheme"> <!-- 離線配置沉浸式 SDK_WebApp 做爲apk入口時 必須設置 SDK_WebApp 的主題爲android:theme="@style/DCloudTheme" -->
       </activity>
       <activity android:name="com.HBuilder.integrate.SDK_WebView" android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale" android:screenOrientation="sensor" android:theme="@style/DCloudTheme"></activity>
   複製代碼

   h5+應用離線打包的坑暫時還只踩到這裏，之後遇到再過來補充。

最後添加幾個有參考價值的官方文檔，官方文檔確實坑，可是這幾個文檔你仍是能夠看成字典同樣作參考：

1. 5+ API使用的Android權限列表
2. Android動態權限申請
3. 離線打包關於Android7+文件操做異常問答：Android7解決plus.runtime.openFile方法打開文件無響應問題（需本地打包並修改SDK）

原文章來自：調用Html5plus API實現具備原生功能的web App之離線打包踩坑