(HBuilder X) 从下载HBuilderX到生成app.apk

文章目录下载使用安装预览创建项目打包成APKmanifest.json 配置注册账号限权配置图标设置原生App-云打包安装使用效果使用Android模拟器通过Android Studio 启动模拟器通过命令行启动模拟器附录END下载官网下载： HBuilderX-高效极客技巧 (dcloud.io)因为我们需要打包app，所以最好下载的是App开发版，若是标准版则需要自行下载和配置app的依赖下载

天赐细莲

5684人浏览 · 2022-03-18 23:00:58

天赐细莲 · 2022-03-18 23:00:58 发布

文章目录

下载
使用
- 安装预览
- 创建项目
打包成APK
使用Android模拟器
- 通过Android Studio 启动模拟器
- 通过命令行启动模拟器
附录
END

下载

官网下载： HBuilderX-高效极客技巧 (dcloud.io)

在这里插入图片描述

因为我们需要打包app，所以最好下载的是App开发版，若是标准版则需要自行下载和配置app的依赖

在这里插入图片描述

下载好后是一个压缩包，解压后直接可以使用（无安装）：

在这里插入图片描述

使用

第一次使用可以选择主题，和习惯快捷键 (这里我选择vscode)

在这里插入图片描述

安装预览

点击右上角预览按钮

在这里插入图片描述

选择Yes

在这里插入图片描述

安装完毕后，可以成功预览我们的文件

在这里插入图片描述

创建项目

我这里选择5+App 默认模板 作为样例讲解

在这里插入图片描述

生成如下项目

在这里插入图片描述

这里我直接贴一段我预先写好的小demo （附录有源代码）

在这里插入图片描述

打包成APK

发行 —> 原生App-云打包（本地打包需要Android的sdk环境）

由于我们这里是新建的项目，所以很多内容未配置，会出现警告

[HBuilder] 17:54:31.228 项目的AppID不能为空，请在该项目下的manifest.json中重新获取

在这里插入图片描述

manifest.json 配置

进入 manifest.json

发现这里有警告AppID不能为空

在这里插入图片描述

注册账号

点击重新获取会要求我们登录注册，那就按照流程走即可

在这里插入图片描述

限权配置

因为我这里有网络请求，所以要获取一下 INTERNET 的限权

在这里插入图片描述

图标设置

注意：这里的图标不能是修改了后缀的.png图片

在这里插入图片描述

原生App-云打包

回到 发行 ---> 原生App-云打包

我们学习阶段选择使用公共测试证书即可

在这里插入图片描述

第一次打包需要安装依赖，安装即可

在这里插入图片描述

出现了几个警告，原来是我还没绑定手机，身份验证之类的

https://ask.dcloud.net.cn/account/setting/profile/

https://dev.dcloud.net.cn/app/index

在这里插入图片描述

打包中，不要关闭（这里耗时可能会很长）

在这里插入图片描述

apk所在路径

在这里插入图片描述

安装使用效果

在这里插入图片描述

使用Android模拟器

安装配置模拟器 - HBuilderX 文档 (dcloud.net.cn)

通过Android Studio 启动模拟器

在这里插入图片描述

Android模拟器启动后，HBuilderX会将其识别为名称为emulator-xxxx的Android手机，其中的xxxx为模拟器的id如下图：

在这里插入图片描述

运行成功

在这里插入图片描述

通过命令行启动模拟器

进入Android SDK目录

找到emulator 文件夹

命令行进入该文件夹下的路径

在这里插入图片描述

# 查看模器列表
emulator.exe -list-avds
# 打开指定模拟器
emulator.exe -avd 模拟器名字
emulator.exe -netdelay none -netspeed full -avd 模拟器名字
emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_26

在这里插入图片描述

顺便提下模拟器的默认安装位置
C:\Users\windows\.android\avd

附录

上方网页的原代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询</title>
    <!-- bootstrap 4.6.0 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
</script>

<style>
    /* 天气模块 */
    .weather {
        width: 100%;
        margin-left: 10px;
    }

    .weather>h5 {
        margin-top: 15px;
        margin-left: 10px;
    }

    .weather>.form-control {
        display: inline-block;
        width: 150px;
        margin: 0 2%;
    }

    .show-city {
        font-family: 宋体;
        font-size: 20px;
    }

    /* 列表表格模块 */
    /* #region */
    .weather-table-div {
        display: inline-block;
    }

    .weather-table {
        width: 280px;
        margin: 20px 10px;
    }

    .weather-table>thead>th {
        font-family: 宋体;
        font-size: 23px;
        text-align: center;
        padding: 0 0;
    }

    .weather-table>tbody>tr>td {
        padding: 1px 3px;
    }

    .weather-table>tbody>tr> :first-child {
        font-size: 20px;
        text-align-last: justify;
        text-align: justify;
        text-justify: distribute-all-lines;
    }

    .weather-table>tbody>tr> :nth-child(2) {
        font-size: 20px;
        text-align: center;
    }

    /* #endregion */
</style>

<body>
    <div class="weather">
        <h5>
            城市天气查询：
            <img src="http://api.k780.com/upload/weather/d/0.gif" alt="日间" />
            <span>&nbsp;/&nbsp;</span>
            <img src="http://api.k780.com/upload/weather/n/1.gif" alt="夜间" />
        </h5>
        <input class="form-control" placeholder="请输入城市名" type="text" v-model="cityName" @keyup.enter="checkWeather" />
        <button class="btn btn-primary" @click="checkWeather">确认</button>
        <br>
        <span class="show-city" v-if="showCity">
            你查询的城市是：<b>{{ showCity }}</b>
        </span>
        <br />

        <!-- 一周天气展示列表 -->
        <!-- #region -->
        <div class="weather-table-div" v-for="(item, index) in weatherData">
            <table class="table table-striped weather-table">
                <thead class="thead-light">
                    <th colspan="2">{{ item.days + " " + item.week }}</th>
                </thead>
                <tbody>
                    <tr>
                        <td>温度</td>
                        <td>{{ item.temperature }}</td>
                    </tr>
                    <tr>
                        <td>天气</td>
                        <td>{{ item.weather }}</td>
                    </tr>
                    <tr>
                        <td>日间</td>
                        <td><img :src="item.weather_icon" alt="" /></td>
                    </tr>
                    <tr>
                        <td>夜间</td>
                        <td><img :src="item.weather_icon1" alt="" /></td>
                    </tr>
                    <tr>
                        <td>风向</td>
                        <td>{{ item.wind }}</td>
                    </tr>
                    <tr>
                        <td>风级</td>
                        <td>{{ item.winp }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- #endregion -->
    </div>
</body>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: ".weather",
        data: {
            cityName: "",
            showCity: "",
            weatherData: null,
        },
        methods: {
            checkWeather() {
                let url = `http://api.k780.com:88/?app=weather.future&
                    appkey=10003&
                    sign=b59bc3ef6191eb9f747dd4e83c99f2a4&
                    format=json`
                url += `&weaid=` + this.cityName;
                axios.get(url).then(
                    (response) => {
                        const weatherData = response.data;
                        if (weatherData.success === "1") {
                            this.weatherData = weatherData.result;
                        }
                    },
                    (error) => {
                        console.log("error", error);
                    }
                );

                this.showCity = this.cityName;
                this.cityName = "";
            }
        },
    });
</script>

</html>