在上一篇文章的最后我们成功打开了hexclient.exe,不过打开的是官方默认的界面,如果我们要运行自己编写的页面该怎么办?
现在就要来认识一下上一章提到的比较重要的另一个文件:manifest.json,这个是hex的清单文件,与程序运行有关的配置项基本都在这里。首先先用编译器(我用的是VS Code,其他编译器也可以)打开manifest.json。

这些配置项我们目前还看不懂,打开官网指南可以查询这些配置项的含义和值。

其中first_page是配置首页的,也就是运行程序时打开的第一个界面。

我们在当前目录下创建一个文件夹helloworld,在helloworld里面创建一个文件,命名为index.html。


在index.html里面写一个Hello World(像普通的页面那样)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heX test</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin-top: 200px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
</div>
</body>
</html>
然后在manifest.json文件中,修改first_page选项。我们由官网给出的指南可以知道,first_page是运行时首页的url或者本地路径,现在我们将首页地址修改为我们刚刚写的index.html。
"first_page": "$(AppDir)helloworld/index.html",
其中$(AppDir)是当前文件夹的路径,在此文件夹下的helloworld/index.html就是我们刚写好的文件。
双击hexclient.exe运行,可以看到打开的程序首页已经变成我们编写的index.html。

manifest里面还有和窗口大小、定位相关的配置项,修改它们可以调整窗口的大小和位置。

修改launch_width、launch_height。
"launch_width": 400,
"launch_height": 300,

网友评论