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

文章目录

  • 下载
  • 使用
    • 安装预览
    • 创建项目
  • 打包成APK
    • manifest.json 配置
      • 注册账号
      • 限权配置
      • 图标设置
    • 原生App-云打包
    • 安装使用效果
  • 使用Android模拟器
    • 通过Android Studio 启动模拟器
    • 通过命令行启动模拟器
  • 附录
  • END

下载

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

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第1张图片

下载好后是一个压缩包,解压后直接可以使用(无安装):

(HBuilder X) 从下载HBuilderX到生成app.apk_第2张图片

使用

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第3张图片

安装预览

点击右上角预览按钮

(HBuilder X) 从下载HBuilderX到生成app.apk_第4张图片

选择Yes

(HBuilder X) 从下载HBuilderX到生成app.apk_第5张图片

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第6张图片

创建项目

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第7张图片

生成如下项目

(HBuilder X) 从下载HBuilderX到生成app.apk_第8张图片

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第9张图片

打包成APK

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

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

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第10张图片

manifest.json 配置

进入 manifest.json

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第11张图片

注册账号

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第12张图片

限权配置

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第13张图片

图标设置

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第14张图片

原生App-云打包

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

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第15张图片

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第16张图片

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

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

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第17张图片

打包中,不要关闭(这里耗时可能会很长)

(HBuilder X) 从下载HBuilderX到生成app.apk_第18张图片

apk所在路径

(HBuilder X) 从下载HBuilderX到生成app.apk_第19张图片

安装使用效果

(HBuilder X) 从下载HBuilderX到生成app.apk_第20张图片

使用Android模拟器

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

通过Android Studio 启动模拟器

(HBuilder X) 从下载HBuilderX到生成app.apk_第21张图片

(HBuilder X) 从下载HBuilderX到生成app.apk_第22张图片

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

在这里插入图片描述

在这里插入图片描述

运行成功

(HBuilder X) 从下载HBuilderX到生成app.apk_第23张图片

通过命令行启动模拟器

进入Android SDK目录

找到emulator 文件夹

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

(HBuilder X) 从下载HBuilderX到生成app.apk_第24张图片

# 查看模器列表
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

(HBuilder X) 从下载HBuilderX到生成app.apk_第25张图片

顺便提下模拟器的默认安装位置

C:\Users\windows\.android\avd



附录

上方网页的原代码


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

        
        
        <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>
        
    div>
body>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

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

END

你可能感兴趣的:(Android,html,android,前端)