vue移动端项目使用HBuilder 本地离线 打包安卓app


打包app之前(vue项目里操作)

1、vue项目中config文件夹下的index.js里‘/’改成‘./'

2.router.js中不能使用history模式

3.需要在vue项目根目录下 npm run build 然后生成static文件夹和index.html(一会儿使用)


本地离线打包

参考HBuilder文档地址:https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android

一、配置开发环境(3个开发环境必须配置好)

1.安装Android Studio

下载地址:

Android Studio官网  https://developer.android.google.cn/studio/index.html

Android Studio官网中文社区    http://www.android-studio.org/

2.安装HBuilderX

下载地址:  https://www.dcloud.io/hbuilderx.html

3.App离线SDK下载:

(HBuilderX 版本要和sdk版本对上,可以在上面官网文档下载最新的sdk)

链接:https://pan.baidu.com/s/14MgN6jxs8jPY1aNwRTL8Yw

提取码:kttv

SDK目录说明

|-- HBuilder-Hello                App离线打包演示应用

|-- HBuilder-Integrate-AS        集成uni-app或5+ app的最简示例

|-- SDK                            SDK库文件目录

|-- Feature-Android.xls            Android平台各扩展Feature API对应的详细配置

|-- Readme.txt                    版本说明文件及注意事项

|-- UniPlugin-Hello-AS            uni原生插件开发示例

tip:安装下载具体流程

1.Android Studio







2.安装HBuilderX

下载完解压之后双击就能用


3.sdk下载完等待备用


二、创建HBuilder项目

1、打开HBuilder创建一个项目


2、配置应用(名称图标等)


3、把之前build的vue项目中index.html和static放进去替换一下


4、点击发行->原生app-本地打包->生成本地打包app资源


5、打包完毕,备用


三、新建安卓项目

1、 打开Android studio新建一个空白项目


选择 Empty Activity 点击 Next。


(1)Package name作为应用标志,涉及申请第三方平台账号,一般情况下不建议修改,包名一般设置反向域名,如:io.dcloud.HBuilder

(2) Minimum API Level 建议选19及以上

(3)点击 Finish 完成创建。


创建虚拟设备点击小手机


点击Create Virtual Device创建虚拟设备


在Phone栏里随意选择各种配置的模拟设备,如果你的电脑配置并不是多么好,建议挑选简单的比较容易加载,在这里我挑选了一个320×480的。点击Next。


系统镜像,自己选择。点击Next。


这个默认就行,直接点击Finish。


我们可以看到虚拟设备已经创建完成,点击右上角×直接退出此界面。


顺着最左边的箭头,可以看到刚刚创建的虚拟设备标识,点击右边箭头指向的选项,运行虚拟设备(也可直接在上图中直接点击Actions栏中最左边的三角符号运行)。


等待片刻,模拟器成功打开。


此时点击红色框中"Run app"选项。

发现刚刚创建的Empty Activity项目成功跑起,这也就证明了你的AndroidStudio已经配置好了。如果你在这一步报错,模拟器没能打开或者不能成功显示下图界面,就说明哪里仍存在问题,后续运行和调试自己的项目时很有可能会出错,建议配置完毕再往下进行。(都成功了不用关继续下面内容)


2、配置工程

2.1、基础库配置

将之前下载好的App离线SDK里libs文件中的lib.5plus.base-release.aar、[email protected]和miit_mdid_1.0.10.aar(HBuilderX2.8.1之后更新到msa_mdid_1.0.13.aar)拷贝到刚刚创建的安卓项目libs目录下(app/libs)

SDK:

安卓项目


复制完在app/build.gradle中添加资源引用(复制到dependencies里 )

implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])

implementation 'com.github.bumptech.glide:glide:4.9.0' // 基座依赖

implementation 'com.android.support:support-v4:28.0.0'

implementation 'com.alibaba:fastjson:1.1.46.android'

复制完选中复制的内容点击红色圈中的任一选项进行同步处理。


2.1、应用配置

配置应用版本号

打开HBuilder创建的项目的manifest.json文件和安卓项目的app/build.gradle对照更改,要一致

applicationId "com.example.baohuyun"

minSdkVersion 19

targetSdkVersion 30

versionCode 1

versionName "1.0"



versionCode为应用的版本号(整数值),用于各应用市场的升级判断,建议与manifest.json中version -> code值一致

versionName为应用的版本名称(字符串),在系统应用管理程序中显示的版本号,建议与manifest.json中version -> name值一致。

applicationId为应用的包名,一般设置为反向域名,不建议修改。

建议将targetSdkVersion设置为25或以上。

App离线SDK minSdkVersion最低支持19,小于19在部分4.4以下机型上将无法正常使用。

完整版build.gradle

apply plugin: 'com.android.application'

android {

    compileSdkVersion 30

    buildToolsVersion "30.0.3"

    defaultConfig {

        applicationId "com.example.baohuyun"

        minSdkVersion 19

        targetSdkVersion 30

        versionCode 1

        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

        }

    }

}

dependencies {

    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])

    implementation 'com.github.bumptech.glide:glide:4.9.0' // 基座依赖

    implementation 'com.android.support:support-v4:28.0.0'

    implementation 'com.alibaba:fastjson:1.1.46.android'

    implementation 'androidx.appcompat:appcompat:1.0.2'

    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

    testImplementation 'junit:junit:4.12'

    androidTestImplementation 'androidx.test.ext:junit:1.1.0'

    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'

}

配置应用名称

打开app->src -> main -> res -> values -> strings.xml文件,修改“app_name”字段值,该值为安装到手机上桌面显示的应用名称,建议与manifest.json中name(基础配置中的应用名称)对应。 version对应build.gradle


配置应用启动页及provider节点

将下述内容添加到app/src/main/Androidmanifest.xml的application节点中

注意:新建的项目默认会有一个MainActivity的节点,必须删掉!

注意:${apk.applicationId} 必须替换成当前应用的包名

 

      android:name="io.dcloud.PandoraEntry"

      android:configChanges="orientation|keyboardHidden|keyboard|navigation"

      android:label="@string/app_name"

      android:launchMode="singleTask"

      android:hardwareAccelerated="true"

      android:theme="@style/TranslucentTheme"

      android:screenOrientation="user"

      android:windowSoftInputMode="adjustResize" >

     

         

         

     

 

 

      android:name="io.dcloud.PandoraEntryActivity"

      android:launchMode="singleTask"

      android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard"

      android:hardwareAccelerated="true"

      android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"

      android:screenOrientation="user"

      android:theme="@style/DCloudTheme"

      android:windowSoftInputMode="adjustResize">

     

         

         

         

         

     

 

 

 

      android:name="io.dcloud.common.util.DCloud_FileProvider"

      android:authorities="${apk.applicationId}.dc.fileprovider"

      android:exported="false"

      android:grantUriPermissions="true">

     

          android:name="android.support.FILE_PROVIDER_PATHS"

          android:resource="@xml/dcloud_file_provider" />

 

改完之后app/src/main/Androidmanifest.xml

    package="com.example.baohuyun">

   

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:roundIcon="@mipmap/ic_launcher_round"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

       

            android:name="io.dcloud.PandoraEntry"

            android:configChanges="orientation|keyboardHidden|keyboard|navigation"

            android:label="@string/app_name"

            android:launchMode="singleTask"

            android:hardwareAccelerated="true"

            android:theme="@style/TranslucentTheme"

            android:screenOrientation="user"

            android:windowSoftInputMode="adjustResize" >

           

               

               

           

       

       

            android:name="io.dcloud.PandoraEntryActivity"

            android:launchMode="singleTask"

            android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard"

            android:hardwareAccelerated="true"

            android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"

            android:screenOrientation="user"

            android:theme="@style/DCloudTheme"

            android:windowSoftInputMode="adjustResize">

           

               

               

               

               

           

       

       

       

            android:name="io.dcloud.common.util.DCloud_FileProvider"

            android:authorities="com.example.baohuyun.dc.fileprovider"

            android:exported="false"

            android:grantUriPermissions="true">

           

                android:name="android.support.FILE_PROVIDER_PATHS"

                android:resource="@xml/dcloud_file_provider" />

       

   

资源配置

将SDK->assets->data文件夹拷贝到src/main文件夹下与java同级,如下图:


注意:dcloud1.dat、dcloud2.dat为uni-app所需资源(2.7.0之后已不在需要,升级时需要删除,可以减少apk大小),5+APP可将这两个文件删除。

注意:SDK升级时,data下资源需要同时更新。

创建apps文件夹并拷贝资源(在app/src/main/assets下创建)

将HBuilderX中的项目unpackage/resources下的打包好的文件 复制到assets->apps下,如下图所示:


修改dcloud_control.xml文件


点击下面按钮


模拟器就显示出来了,没报错正常显示就可以继续下一步


点击下面


右下角提示

打包成功放到手机就可以

后面页面有改动需要再次打包的情况

1、把新build的vue项目中index.html和static放进HBuilder项目替换一下


2、 打包


3、 在android项目中的app/src/main/assects/apps中,把打包完的文件替换进去,


4、点击下面,和之前一样操作下去就可以了


你可能感兴趣的:(vue移动端项目使用HBuilder 本地离线 打包安卓app)