我vscode通过MPE预览我的.md文件，现在我通过MPE（chrome）将我的.md文件转化为PDF，PDF出现大量空白如何解决<h1 align="center">桂林电子科技大学</h>
<h3 align="center">移动
应用开发 实验报告</h3>
<table style="undefined;table-layout: fixed; width: 720px">
<colgroup>
<col style="width: 100px">
<col style="width: 200px">
<col style="width: 60px">
<col style="width: 100px">
<col style="width: 60px">
<col style="width: 200px">
</colgroup>
<tbody>
<tr>
<td>实验名称</td>
<td colspan="3">实验一 熟悉DevEco Studio开发环境</td>
<td rowspan="3">评语</td>
<td rowspan="3"></td>
</tr>
<tr>
<td>院系</td>
<td>计算机
与信息安全学院</td>
<td>专业</td>
<td>计算机科学
与技术</td>
</tr>
<tr>
<td>学号</td>
<td>220030010135</td>
<td>姓名</td>
<td>邹昆霖</td>
</tr>
<tr>
<td>实验日期</td>
<td colspan="2">2025年6月29日</td>
<td></td>
<td>成绩</td>
<td></td>
</tr>
</tbody>
</table>
### 一、实验目的
1. 掌握DevEco Studio创建工程的方法;
2. 掌握
HarmonyOS应用Stage模型工程目录结构;
3. 掌握ArkUI基本组件(`Button`, `Text`)、布局(`Column`)的使用方式;
### 二、实验内容
<!-- 代码标题、图标标题必须使用**进行加粗显示-->
**1.实验任务**
（1）首先下载并安装DevEco Studio IDE(下载需要注册并登录华为开发者账号)。
（2）启用CodeGenie,CodeGenie 是DevEco AI辅助编程工具,基于BitFun Platform AI能力平台,为开发者提供高效的
应用与服务AI编程支持,支持智能知识问答,同时支持ArkTS代码生成、页面生成、万能卡片生成能力,可以帮助开发者提高编码效率。
**2.其他任务**
（1）阅读开发
指南中的「
应用程序包基础知识」章节,了解
HarmonyOS应用程序包的结构(Stage模型),了解「
应用程序包开发
与使用」章节关于HAP、HAR、HSP等的描述。
（2）阅读开发
指南中的「
应用配置文件(Stage模型)」章节,了解app.json5、module. json5配置文件的作用及配置文件中的各属性名称及含义。
（3）了解DevEcoStudi。中「模拟器」和「预览器」调试的差异，学会创建「模拟器」并在其中运行第一个
HarmonyOs应用。
（4）观看「
HarmonyOs第一课」->「
HarmonyOs简介」、「赋能套件和学习资料介绍」章节视频及文字资料，并完成该课程中的「闯关
习题」，提交闯关
习题成绩至课堂派。
（5）观看「
HarmonyOS第一课」视频课程中的「IDE环境搭建」章节视频及文字资料，了解预览器、模拟器、真机调试的方式，并完成该课程中的闯关
习题，提交闯关
习题成绩至课堂派。
### 三、实验总结
在使用DevEco Studio IDE将代码写入后，在preview页面没有点击刷新页面，让我误以为代码错误，无法加载。
在仔细阅读
指南文档后解决
### 四、实验代码
以下分别是代码和运行结果截图示例。
**代码1. Index.ets**
在`Button`按钮的`onclick`事件中使用`router`组件实现页面跳转。
```ts
// Index.ets
// 导入页面路由模块
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，以响
应用户onClick事件
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 跳转按钮绑定onClick事件，单击时跳转到第二页
.onClick(() => {
console.info(`Succeeded in clicking the 'Next' button.`)
// 获取UIContext
let uiContext: UIContext = this.getUIContext();
let router = uiContext.getRouter();
// 跳转到第二页
router.pushUrl({ url: 'pages/Second' }).then(() => {
console.info('Succeeded in jumping to the second page.')
}).catch((err: BusinessError) => {
console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
})
})
}
.width('100%')
}
.height('100%')
}
}
```
<img src="./pictures/Screenshot_2025-07-01T225246.png" alt="打开hello world页面" title="计数器App" width="280" /> <br>
**图1.第一个页面运行结果**
**代码2. Seconds.ets代码**
```ts
// Seconds.ets
// Second.ets
// 导入页面路由模块
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Second {
@State message: string = 'Hi there';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件，单击按钮时返回到第一页
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
// 获取UIContext
let uiContext: UIContext = this.getUIContext();
let router = uiContext.getRouter();
try {
// 返回第一页
router.back()
console.info('Succeeded in returning to the first page.')
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}
```
<img src="./pictures/Screenshot_2025-07-01T225303.png" alt="打开hit here页面" title="第二个界面" width="280" /> <br>
**图2.第2个页面运行结果**
**「
HarmonyOs第一课」成绩截图**
<img src="./pictures/屏幕截图 2025-07-03 195512.png" alt="打开hit here页面" title="第二个界面" width="1200" /> <br>
**图3.
HarmonyOS介绍——成绩**
<img src="./pictures/屏幕截图 2025-07-03 200022.png" alt="打开hit here页面" title="第二个界面" width="1200" /> <br>
**图5.DevEco Studio的使用——成绩**
这是源码### 四、实验代码
以下分别是代码和运行结果截图示例。
**代码1. Index.ets**
在`Button`按钮的`onclick`事件中使用`router`组件实现页面跳转。
```ts
// Index.ets
// 导入页面路由模块########这是问题所在，文本和代码块在PDF中存在2/3空白页
HarmonyOS相关内容
扫一扫
1500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
