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、android-gif-drawable-release@1.2.17.aar和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} 必须替换成当前应用的包名

  <activity

      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" >

      <intent-filter>

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

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

      </intent-filter>

  </activity>

  <activity

      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">

      <intent-filter>

          <category android:name="android.intent.category.DEFAULT" />

          <category android:name="android.intent.category.BROWSABLE" />

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

          <data android:scheme="h56131bcf" />

      </intent-filter>

  </activity>

  <!--provider节点必须添加-->

  <provider

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

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

      android:exported="false"

      android:grantUriPermissions="true">

      <meta-data

          android:name="android.support.FILE_PROVIDER_PATHS"

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

  </provider>

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

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.baohuyun">

    <application

        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">

        <activity

            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" >

            <intent-filter>

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

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

            </intent-filter>

        </activity>

        <activity

            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">

            <intent-filter>

                <category android:name="android.intent.category.DEFAULT" />

                <category android:name="android.intent.category.BROWSABLE" />

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

                <data android:scheme="h56131bcf" />

            </intent-filter>

        </activity>

        <!--provider节点必须添加-->

        <provider

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

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

            android:exported="false"

            android:grantUriPermissions="true">

            <meta-data

                android:name="android.support.FILE_PROVIDER_PATHS"

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

        </provider>

    </application>

</manifest>

资源配置

将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、点击下面,和之前一样操作下去就可以了


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容