preface

Html5plus Api can be called in your Web project to realize some native functions. The official document HTML5 + specification, please be very carefully into the pit, mainly because the official document is not written well and there is almost no community. You can only climb one by one.

Download the H5 + SDK

The first step of offline packaging of H5+ application is to download the corresponding version of SDK directly from the official website: HTML 5+ SDK update log; It’s best to download the latest version of the SDK, as it fixes previous bugs (I recommend downloading the latest SDK package if you don’t want to tread too many holes yourself). Don’t worry if the official documentation on offline packaging doesn’t match the version you’re using, and you get stuck with offline packaging. Choosing the latest SDK will only make you miserable at first, but you’ll be better off later. Otherwise you’ll be constantly patching, which will be more painful, and you’ll still have to update if you run into SDK bugs.

Offline packaging preparation

If you don’t have Android Studio on your computer, please download one. I’m using Android Studio3.4.1 here. First, let’s talk about the purpose of each folder in SDK, AS shown below:

As shown in the figure, I’m using the current sdK1.9.9.62327, where the directory structure is as follows:

  1. Both markdown files illustrate some of the things that need to be noted when using this version of the SDK for offline packaging, such as the fact that one feature cannot coexist with another.
  2. Androidmanifest.xml is the android configuration file. Assets are the directory we need to place in app/ SRC /main/ when we pack offline. The complete path is app/ SRC /main/assets. Libs are feature dependent package files (tweets, shares, etc.).
  3. Hbuilder-hello and HBuilder-Integerate-as are both offline packaging demos, but for offline packaging with Android Studio click On HBuilder-Integerate-As, If you’re using Eclipse you can try another version (I haven’t).
  4. Uniplugin-hello-as: uniplugin-hello-as: uniplugin-hello-as: uniplugin-hello-as: uniplugin-hello-as Since these two folders have not been used this time, their use is not clear for the time being.
  5. Feature-android. XLS is a list of permissions that need to be used in the Androidmanifest.xml configuration file for reference.

Open Android Studio and use the following method to open hBuilder-integerate-as demo:

There are two ways to do offline packaging, the one I recommended above, and the other is to create a native Android project using Start a new Android Studio Project. If you look at the official documentation, it’s almost the same as this tutorial. Create the simplest Android Studio (Android Studio) with the new version 5+SDK. There are a lot of files are not there, and there will be a lot of pothoods. The official documentation of this packaging method I recommend is: Android Platform local (offline) packaging guide – Android Studio; According to the steps of the official document, open the demo and compile it directly to judge whether the official demo can run normally. If the demo cannot run, the following steps are meaningless. You can consider changing to an SDK package. If it works, the first step after the official documentation is to introduce dependency packages. If you are packing offline as I recommend,

This step can be skipped because the demo has almost all functionality integrated and dependencies have already been introduced. If you re-introduce it, you may fail to merge the Androidmanifest.xml configuration file, so trust me and don’t make trouble for yourself. After the function is normal, refer to feature-android. XLS to introduce dependent packages and add permissions. The second step in the official documentation is to configure application permissions

You can skip it, the demo is integrated, that’s why I recommend it. Step 3 Configure data for the third-party library

Alternatively, you can skip the configuration after the introduction of the program is successfully compiled.

The offline package

If you are packaging your code offline without using cloud packaging, you will need to use HBuilder (X) to package your code offline (if you have used cloud packaging, you should see this).

Offline packaging is in the distribution features menu at the top. If you still only have a dist folder (build package) then you need to use HuBuilderX to build an empty 5+app project so that you have a manifest file, You can then copy the contents under your Dist folder to the project root and visually configure some information (startup icon, SDK configuration, etc.) by clicking on the manifest.json file above. After the configuration is complete, click Publish > Native APP – Local Package > Generate local package APP resources, and place the location as

Our demo project under the/app/SRC/main/assets/WWW/directory under/apps/XXXX (including XXXX for your appId, note: In AS the file structure on the left shows AcmApp. WWW represents AcmApp/WWW this two folders, and don’t put the file named AcmApp. WWW, otherwise it will become/app/SRC/main/assets/apps/XXXX. WWW. Appid can view manifest.json in hbuilderx or directly view the manifest.json code file. Generally when you use hbuilderx offline package this period of XXXX/WWW/automatically generated, you just need to choose the path of the good place, you open the demo/app/SRC/main/assets/apps directory path).

Now that we’re almost halfway there, it’s time to change the configuration.

Modifying corresponding Configurations

Find androidmanifest.xml in the demo project you have opened (AS). The modification steps can be found in the official documentation:

Since the official documentation here is very detailed, so I will not go into details, icon configuration is also very detailed, add a point

  1. Icon. PNG indicates the desktop display icon.
  2. PNG represents the push display icon (untested, since we applied icon and push using an image).
  3. PNG (application startup page).

Note: Names must be named in this format.

Modify/app/SRC/main/assets/data/dcloud_control. The XML file, appid and manifest. The json file id, appver and manifest the json file version. The name as below:

Edit /app/build.gradle as shown below:

Where applicationId is configured as your package name.

If you are using a different method for offline packaging, you will need to copy and modify the demo file step by step in this way, and put the SDK/ Assets /data file I mentioned in this location under your offline project:

But no apps file? You have to copy it from the demo project and replace the H57991E95 folder with your offline package (Hbuilderx publishing > Native App – Local Package > Generate local Package app resources generated package). Remember this must be the format appID/WWW/real resource file, This is why I don’t recommend starting from scratch if you have some Android background.

Androidmanifest.xml Important configuration items are configured

Not surprisingly, the above steps have taken you offline and should be able to compile successfully, but compiling does not mean that everything in your application is working properly. Here are a few important configuration items for Androidmanifest.xml.

  1. Push configuration items

    First, you need to add permissions to your project to check whether it has:

    <! -- configured in 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. Your app package name" />
<permission
    android:name="getui.permission.GetuiService. Your app package name"
    android:protectionLevel="normal" />
Copy the code

    Only one server can be configured on the same device. Therefore, do not configure the server. You also need to configure meta-data third-party library data, please refer to the official documentation, which is very simple:

    ! Application node --><receiver android:name="io.dcloud.feature.apsGt.GTNotificationReceiver">
        <intent-filter>
            <action android:name="android.intent.action.BOOT_COMPLETED"/>
            <action android:name="Your package name.__CREATE_NOTIFICATION" />
            <action android:name="Your package name.__REMOVE_NOTIFICATION" />
            <action android:name="Your package name.__CLEAR_NOTIFICATION" />
            <action android:name="Your package name.__CLILK_NOTIFICATION" />
        </intent-filter>
    </receiver>
Copy the code

    Be sure to replace the package name with your package name (in reverse domain name format).

  2. Android7.0+ has a strict file permission control for security, so many runtime methods will not work, I encounter install (update app), openFile (openFile), should be involved in the file should have problems, and will not report errors. It was impossible for me to locate it. Finally, I got rid of the problem when I saw a blog post. Otherwise, I almost gave up and added the following code to the application node of the configuration file:

    <provider
        android:name="android.support.v4.content.FileProvider"
        android:authorities="Your package name.fileProvider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/file_provider" />
    </provider>
Copy the code

    XML /file_proviser. XML: / SRC /main/res /file_proviser. XML: /file_proviser. XML: /file_proviser. XML: / SRC /main/res Android. OS. FileUriExposedException;

  3. It is also worth noting that there are many cases where you need to replace the package name with your own package name, but there are some cases where you can’t replace the package name with your own package name. Once you replace the package name with your own package name, some functions will fail, or the compilation will fail directly, but how to distinguish? In general, you can delete its original value first, and then press its value again, do not copy, if the prompt has its previous value indicates that this is a reference to other places of the file, you can not delete; Another way, most of the configuration reference dependence from/SRC/main/Java folder, if you are struggling with the package name to replace your package name, go to the path to find the corresponding documents such AS com. HBuilder. Both SDK_WebView (AS I mentioned in the above file structure. Check if there is a com/Hbuilder/ Intergrate folder in the Java folder, as well as a SDK_WebView file, if so you cannot replace it with your package name. The following is a simple way to replace the package name of the activity node in the configuration file: ActivityEntry, SDK_WebView, and SDK_WebApp cannot be replaced.

    <! -- Com.hBuilder.integrate your reference to your Java folder directory structure, maybe later updated structure will change -->
<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"> <! 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>
Copy the code

    H5 + app offline packaging pit is only stepped here for the time being, later come to replenish.

Finally add a few reference value of the official documentation, the official documentation is indeed bad, but these documents can still be used as a dictionary reference:

  1. List of Android permissions used by the 5+ API
  2. Android Dynamic Permission application
  3. Android7: No response from plus.runtime.openFile (need to package and modify SDK)

Call Html5plus API to implement offline packing pit for Web App with native features