文章目录
下载
因为我们需要打包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-云打包我们学习阶段选择使用公共测试证书即可
第一次打包需要安装依赖，安装即可
出现了几个警告，原来是我还没绑定手机，身份验证之类的
打包中，不要关闭（这里耗时可能会很长）
apk所在路径
安装使用效果
使用Android模拟器
通过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> / </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>