Android 平台 HTML5+ SDK的集成（HBuilder离线打包）

如今随着HTML5和移动端的发展，Hybrid和Web App成为了发展趋势。本人也发现纯源生Android App已经无法满足日常所需，所以也开始学习了HTML5、CSS和JavaScript等网页开发的技术。

本人使用的是HBuilder开发工具，它在生成Web App的时候有两种方式，一种是云端打包方式，比较简单，只要注册账号后，设置一些id、icon等属性就可以自动生成一个apk文件。难点是离线打包方式，也就是使用Android Studio等开发工具进行线下离线打包。本人查了很多资料以及亲身测试之后，终于成功的完成了离线打包。下面我介绍下主要流程，供其他开发者参考：

1.首先去官网下载SDK
官网地址http://ask.dcloud.net.cn/article/103
里面有一个完整的demo： HBuilder-Integrate-AS

使用Android Studio 导入后，基本上就可以独立运行，运行后是一个官方的demo，里面的功能很全

2.然后打开HBuilder，导出我们的Web App的相关资源文件
点击 发行→本地打包→生成本地打包App资源
3.在Android Studio 中新建一个Project，不要选择任何Activity

4.复制HBuilder-Integrate-AS中 AndroidManifest中的关键代码覆盖到我们新建的Project中

<supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true"/>

    <application
        android:name="io.dcloud.application.DCloudApplication"
        android:allowBackup="true"
        android:allowClearUserData="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:largeHeap="true"
        android:supportsRtl="true">


        

        <activity
            android:name="io.dcloud.PandoraEntry"
            android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale"
            android:hardwareAccelerated="true"
            android:screenOrientation="user"
            android:theme="@style/TranslucentTheme"
            android:windowSoftInputMode="adjustResize">

            <intent-filter>

                <action
                    android:name="android.intent.action.MAIN"/>

                <category
                    android:name="android.intent.category.LAUNCHER"/>
            intent-filter>
        activity>
        
        
        
        

        

    application>

5.然后把刚刚从HBuilder导出的资源文件复制到Project中
在src目录的main目录下，新建assets资源文件夹，然后新建apps文件夹，再新建一个【id】文件夹，这个id必须与manifest.json里的id一致，然后把HBuilder的资源文件夹www复制到该目录下

6.复制HBuilder-Integrate-AS中assets目录下的data文件夹到我们新建的Project中，其中dcloud_control.xml文件夹里需要修改appid，也就是刚刚我们第五步提到的文件夹名称，appver则是version的name（官方说必须一致，我自己瞎写发现也没有错，可能这个和版本控制有关）

7.注意，build.gradle中的applicationId需要与manifest中的package保持一致，否则会出错


8.在HBuilder-Integrate-AS中的libs文件夹下找到lib.5plus.base-release.aar文件，复制到自己的Project中来，并在build.gradle中配置相关信息

9.这个时候小伙伴们就可以运行自己的APP看看效果了

PS：如果运行App后发现屏幕中出现转圈圈情况，请仔细注意第5、6、7步骤是否正确，如果有相关的id不一致，请修正