您现在的位置是：技术博客 > 前端前端

uniapp打包apk壳子

Lucas2025-07-02 11:22【代码】11人已围观

简介uniapp打包一个h5项目成apk

#### 第一步：创建新项目

1、打开 HBuilderX；
2、点击菜单栏 文件 > 新建 > 项目；
3、选择 uni-app 项目类型；
4、填写项目名称（如 "WebViewShell"）；
5、选择模板 - 推荐使用 默认模板；
6、点击 创建；

#### 第二步：修改项目结构

1、删除不需要的页面：删除 /pages/index 目录（如果存在），删除 /pages 下其他示例页面。
2、创建新的 WebView 页面：右键点击 /pages 文件夹，选择 新建页面 命名为 "webview"（全部小写）。
3、勾选 创建同名目录 和 在 pages.json 中注册，点击 创建。

#### 第三步：编写 WebView 页面代码

1、打开 /pages/webview/webview.vue 文件，替换为以下内容：
```
<template>
  <view class="content">
    
    <web-view 
      :src="webUrl" 
      @message="handleMessage"
      @error="handleError"
    ></web-view>
    
    
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

修改 /pages.json 文件：
```
{
  "pages": [
    {
      "path": "pages/webview/webview",
      "style": {
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh": false,
        "transparentTitle": "always",
        "titlePenetrate": "YES",
        "app-plus": {
          "titleView": false
        }
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#ffffff",
    "app-plus": {
      "background": "#ffffff"
    }
  }
}
```

#### 第五步：配置 manifest.json

1、打开 /manifest.json 文件，切换到 App模块配置，确保勾选了 WebView(网页视图) 模块。

2、在 基础配置 中：设置应用名称，设置应用标识（包名，如 com.yourcompany.webviewshell），根据需要配置其他基本信息。

### 第六步：配置 Android 权限
在 /manifest.json 中找到 "app-plus" -> "distribute" -> "android" 部分，添加网络权限：
```
"permissions": [
  "<uses-permission android:name=\"android.permission.INTERNET\"/>",
  "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>"
],
"android": {
  "usesCleartextTraffic": true,  // 如果需要加载HTTP网址
  "webView": {
    "useSystemWebView": false,   // 使用内置WebView
    "mixedContentMode": "always" // 允许混合内容
  }
}
```

### 第七步：打包 APK

1、点击菜单栏 发行 > 原生App-云打包；
2、选择 Android 平台；
3、选择证书（如果没有，可以使用“香蕉云编”系统创建新apk证书）；
4、点击 打包；
5、等待打包完成，下载 APK 文件；

很赞哦！ ( 1 )

上一篇：Node管理工具nvm-desktop

下一篇：一加手机无线调试教程