我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>220030
010135</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空白页
扫一扫
3871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
