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之离线打包踩坑