uni-app 离线打包配置

uni-app 离线打包配置
# Uniapp-x的离线打包

准备（我的配置）

  • HBuilder X：4.29版本及以上
  • uniapp x SDK：4.29，下载地址 Uniapp x SDK
  • android studio：2023/2024都行
  • 其它：
    • gradle版本为8.7
    • gradle插件版本为8.6.0
    • kotlin插件版本为1.9.0

1. 新建一个Android空项目

打开 android studio，点击顶部的 New Project –> Phone And Tablet –> No Activity，如下图：

新建项目

项目配置

  • Name 是你的项目名称
  • Package name是你的包名
  • Language 要选择 Kotlin
  • Min Sdk 建议21

点击Finsh，这是空项目模板

空项目模板

我这里是gradle构建之后的目录，后面的都是基于构建完成的。

一般称app为主模块，它下面的 build.gradle.kts 是主模块的编译配置文件，也是项目级别的编译配置文件，一定要跟其它的区分开来。

2. 新建uni-app x模块

点击File->New->New Module…

点击左侧Templates的Android Library。

Language选择Kotlin。

Module name建议设置为uniappx。

点击Finish。

uniappx模块

构建之后会多出一个uniappx目录。

基础库配置

在uni-app x模块下新建目录libs，跟src同级别 ，将uts-runtime-release.aar，android-gif-drawable-1.2.28.aar，app-common-release.aar，app-runtime-release.aar，breakpad-build-release.aar，dcloud-layout-release.aar， framework-release.aar，uni-exit-release.aar，uni-getAccessibilityInfo-release.aar，uni-getAppAuthorizeSetting-release.aar，uni-getAppBaseInfo-release.aar， uni-getSystemSetting-release.aar，uni-openAppAuthorizeSetting-release.aar，uni-prompt-release.aar，uni-storage-release.aar，uni-getDeviceInfo-release.aar， uni-getSystemInfo-release.aar，uni-rpx2px-release.aar，uni-theme-release.aar共19个aar拷贝到libs下，参考下图

基础库配置

修改uniappx模块下的build.gradle

添加依赖

dependencies {  
    ···  
    implementation fileTree(include: ['*.aar'], dir: './libs')  
    implementation "androidx.core:core-ktx:1.10.1"  
    implementation "androidx.recyclerview:recyclerview:1.3.2"  
    implementation "androidx.appcompat:appcompat:1.0.0"  
    implementation "androidx.exifinterface:exifinterface:1.3.6"  
    implementation "androidx.localbroadcastmanager:localbroadcastmanager:1.0.0@aar"  
    implementation "androidx.constraintlayout:constraintlayout:2.1.4"  
    implementation "androidx.webkit:webkit:1.6.0"  
    implementation "com.google.android.material:material:1.4.0"  
    implementation "androidx.viewpager2:viewpager2:1.1.0-beta02"  
    implementation "com.alibaba:fastjson:1.2.83"  
    implementation "com.facebook.fresco:fresco:3.1.3"  
    implementation "com.facebook.fresco:middleware:3.1.3"  
    implementation "com.facebook.fresco:animated-gif:3.1.3"  
    implementation "com.facebook.fresco:webpsupport:3.1.3"  
    implementation "com.facebook.fresco:animated-webp:3.1.3"  
    implementation "com.github.bumptech.glide:glide:4.9.0"  
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4"  
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4"  
    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.10"  
    implementation "org.jetbrains.kotlin:kotlin-reflect:1.8.10"  
    implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.4.1"  
    implementation "com.squareup.okhttp3:okhttp:3.12.12"  
    implementation "com.github.getActivity:XXPermissions:18.63"  
}

添加依赖

添加aaptOptions配置

aaptOptions {  
    additionalParameters '--auto-add-overlay'  
    ignoreAssetsPattern '!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~'  
}

aaptOptions配置

修改app主模块的配置(不要漏掉了)

在build.gradle的dependencies节点添加下面两行

implementation(fileTree(mapOf("include" to listOf("*.aar"), "dir" to "../uniappx/libs")))  
implementation(project(":uniappx"))

修改app主模块

配置gradle插件

  1. 下载的SDK压缩包里面有一个plugins文件，将它复制到你的项目根目录

复制插件

  1. 在项目根目录的build.gradle的顶部添加gradle插件的依赖

添加gradle插件

buildscript {  
    dependencies {  
        classpath(files("plugins/uts-kotlin-compiler-plugin-0.0.1.jar"))  
        classpath(files("plugins/uts-kotlin-gradle-plugin-0.0.1.jar"))  
    }  
}

然后在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖

添加io.dcloud.uts.kotlin

plugins {  
    ...  
    id 'io.dcloud.uts.kotlin'  
}

修改项目的settings.gradle

在项目根路径下的settings.gradle中添加jitpack的maven的仓库地址和本地gradle插件的路径配置

修改settings.gradle

dependencyResolutionManagement {  
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)  
    repositories {  
        ...  
        maven { url = uri("https://jitpack.io") }  
        flatDir { dirs('./plugins/') }  
    }  
}

修改项目的gradle.properties

在项目根路径下的gradle.properties中追加如下内容

修改gradle.properties

android.useAndroidX=true  
android.enableJetifier=true

修改app主模块下的AndroidManifest.xml

添加activity,将下面内容拷贝到application节点下

修改AndroidManifest.xml

完成的AndroidManifest.xml如下

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:name="io.dcloud.uniapp.UniApplication"
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Offlinenative"
        tools:targetApi="31" >
        <activity
            android:name="io.dcloud.uniapp.UniAppActivity"
            android:configChanges="orientation|keyboard|keyboardHidden|smallestScreenSize|screenLayout|screenSize|mcc|mnc|fontScale|navigation|uiMode"
            android:exported="true"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@style/UniAppX.Activity.DefaultTheme"
            android:windowSoftInputMode="adjustResize"
            tools:replace="android:label,android:exported,android:theme,android:configChanges,android:windowSoftInputMode,android:screenOrientation">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

修改uniappx模块下的AndroidManifest.xml

添加appid,在application节点下添加DCLOUD_UNI_APPID节点

修改uniappx模块下的AndroidManifest.xml

    <application>
        <meta-data
            android:name="DCLOUD_UNI_APPID"
            android:value="你的appid" />
    </application>

拷贝资源文件

  1. 导出uni-app x项目的资源文件:选择项目，然后点击：发行 -> 原生App-本地打包 -> 生成本地打包App资源,导出成功之后会在项目的unpackage/resources目录下生成资源文件

导出资源文件

  1. 将app-android目录下与appid对应的目录拷贝到uniappx的assets/apps目录下，需要自己先创建

拷贝资源文件

  1. 拷贝kt文件：需要将unkackage/resource/app-android/uniappx/app-android/src/目录下的所有文件拷贝到项目的uniappx模块下的src/main/java下，src/main/java下的包名文件夹可以删掉

如果你的项目没有uts插件，到这一步已经可以使用As运行啦

配置uts插件

资源导出成功之后，uts插件资源位于unpackage/resource/app-android/uni_modules下

为方便区分，uts插件指前端封装的uni_modules插件；android uts插件指根据编译后的uts插件生成的安卓原生模块

新建android uts插件模块，跟新建uniappx一样，下面以插件wow-scankit为例子，下面所有都是基于wow-scankit的配置示例

新建android uts插件模块

  1. 点击左侧Templates的Android Library。
  2. Language选择Kotlin。
  3. Module name建议与uts插件模块名称一致。
  4. 点击Finish。

注意：

  • Templates一定要选择Android Library。
  • Language一定要选择Kotlin。
  • Build configuration language建议选择Groovy DSL(build.gradle)。以下教程均按照此模式进行

添加gradle插件

在wow-scankit插件模块的build.gradle的plugins节点下添加io.dcloud.uts.kotlin的依赖

添加gradle插件

plugins {  
    ...  
    id 'io.dcloud.uts.kotlin'  
}

添加依赖

将下面内容拷贝到build.gradle中，添加到原有的dependencies节点，不要删掉原有的

dependencies {  
    compileOnly fileTree(include: ['*.aar'], dir: '../uniappx/libs')  
    compileOnly fileTree(include: ['*.aar'], dir: './libs')  
    compileOnly "com.alibaba:fastjson:1.2.83"  
    compileOnly "androidx.core:core-ktx:1.10.1"  
    compileOnly 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.8'  
    compileOnly 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.8'  
}

根据config.json配置应用

如果uts插件的config.json有内容

下面是插件wow-scankit的配置

{  
    "minSdkVersion": "21",  
    "dependencies": ["com.huawei.hms:scan:2.12.0.301"]  
}

在插件wow-scankit的android节点的defaultConfig的minSdk设置此字段

在插件wow-scankit的dependencies 添加 implementation 'com.huawei.hms:scan:2.12.0.301'

添加依赖

在项目的settings.gradle.jks文件需要添加仓库地址

添加仓库地址

完整的dependencyResolutionManagement如下

dependencyResolutionManagement {  
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)  
    repositories {  
        google()  
        mavenCentral()  
        maven {  
            url = uri("https://jitpack.io")  
        }  
        maven {  
            url = uri("https://developer.huawei.com/repo/")  
        }  
        flatDir {  
            dirs("./plugins/")  
        }  
    }  
}

将插件添加到uniappx模块

将插件添加到uniappx模块

implementation project(":wow-scankit")

复制资源（如果有就复制）

libs

将src目录下的所有文件拷贝到android uts插件模块/src/main/java目录下（wow-scankit插件没有）

assets

将assets文件夹拷贝到wow-scankit插件模块/src/main/目录下

res

将res文件夹拷贝到wow-scankit插件模块/src/main/目录下。

AndroidManifest.xml

将AndroidManifest.xml拷贝到wow-scankit插件模块/src/main/目录下

添加到主项目

将wow-scankit插件模块的依赖添加到uniappx模块的build.gradle的依赖中

添加到主项目

implementation project(':wow-scankit')

更多关于uni-app 离线打包配置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 离线打包配置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中进行离线打包配置，主要涉及到平台配置、原生插件管理、以及根据不同平台的打包命令设置。下面是一个基本的配置示例，以及一些关键代码片段，帮助你理解如何配置uni-app进行离线打包。

1. 配置manifest.json

首先，在manifest.json文件中，你需要配置应用的基本信息以及目标平台。

{
  "mp-weixin": { // 微信小程序配置示例
    "appid": "your-wechat-appid",
    "setting": {
      "urlCheck": false
    }
  },
  "app-plus": { // App平台配置
    "name": "your-app-name",
    "version": {
      "name": "1.0.0",
      "code": "100"
    },
    "sdkConfigs": {} // 可配置第三方SDK
  },
  "h5": {}, // H5平台配置
  // 其他平台配置...
  "plugins": { // 插件配置
    "your-plugin-id": {
      "version": "latest",
      "provider": "your-plugin-provider"
    }
  }
}

2. 配置vue.config.js（如果使用Vue CLI）

如果你在使用Vue CLI集成uni-app，你可以在vue.config.js中配置一些构建选项。

module.exports = {
  configureWebpack: {
    // 自定义webpack配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  chainWebpack: config => {
    // 使用chainWebpack进行更细粒度的配置
    config.plugin('define').tap(args => {
      args[0]['PROCESS_ENV'] = {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      };
      return args;
    });
  }
};

3. 原生插件和模块配置

对于需要使用原生插件或模块的情况，你需要在manifest.json中声明，并在原生工程（如Android的AndroidManifest.xml或iOS的Info.plist）中进行相应配置。

4. 离线打包命令

最后，进行离线打包时，你需要使用HBuilderX或命令行工具。以下是命令行工具的一个简单示例：

# 安装依赖
npm install -g hbuilderx-cli

# 打包App（以Android为例）
hbuilderx build -p android --release

对于iOS，你可能需要使用Xcode进行后续的签名和打包步骤。

注意

  • 确保所有平台特定的配置文件（如AndroidManifest.xml、Info.plist）已正确配置。
  • 根据具体需求调整manifest.json中的配置。
  • 离线打包前，确保所有资源文件和依赖库都已正确引入。

以上配置和代码示例提供了一个基础的框架，帮助你开始配置uni-app进行离线打包。根据具体项目需求，你可能需要进一步调整和扩展这些配置。

回到顶部