Touch UI 开发文档

Touch UI 开发文档

第一个应用

在安装好需要的开发工具后,就可以开始创建我们的第一个应用啦!

使用 TouchUI 创建基础工程 创建应用

  1. 首先需要手动创建一个文件夹,作为我们的项目工程。作为演示,我们创建一个touchui_basic文件夹。

  2. 创建完成后,使用Visual Studio Code打开。打开后,在项目展开的情况下,在空白处点击右键,选择 TouchUI 创建基础工程

创建成功,会输出以下信息。如果编辑器没有该栏目,可以通过顶部菜单查看 >> 输出 ,来调出该栏目。

如果有输出栏目,但是输出的是其他信息,需要指定输出通道。详见文档 “实战 >> 工具 >> VSCode使用技巧和快捷键 ”

创建成功后,就可以看到我们的项目下多了很多文件。是我们初始的一些页面,针对每一个文件的作用,可以参考下一章的内容。 入门 >> TouchUI工程 来学习。

使用 TouchUI 启动开发服务 运行应用

右键,选择TouchUI启动开发服务

启动成功后,会输出以下信息:

并且自动打开浏览器。如果没有自动打开,则手动将输出到链接通过浏览器打开。

为了更好的兼容,请下载chrome浏览器,来预览应用。

浏览器弹出后,我们需要打开谷歌控制台【控制台通过在浏览器中右键 >> 检查 可打开】,使用手机来预览我们的项目。【必须使用浏览器的手机来预览我们的项目,因为我们的应用是移动应用,一些事件需要移动设备上的才可以正常响应。】

谷歌控制台:【点击图内所示红框可开启手机预览模式】

到这一步,我们的项目就可以在浏览器上成功的运行啦!

新建页面

新建页面时,希望创建在哪个目录,就在目录位置右键。

会弹出以下窗口,这里输入文件名称。

会同时生成demo.ui文件,并且会将该页面的路径自动加入到app.ui文件中的路由配置列表中。

注意:这里的路径必须跟实际的页面一一对应。例如:当你删除文件时,需要将对应的路径也删除。

关于路由配置,详见文档的“框架 >> 配置”部分。

TouchUI 识别为TouchUI工程

在多人开发中,可能会遇到我们的项目并不是自己创建的,而是通过他人传输,或者是git/svn来克隆下来的,在这种情况下,项目基础目录已经完整,但是可能会出现右键菜单并没有 TouchUI 启动开发服务 这一项。这是因为我们的项目并没有识别为 TouchUI工程。 所以需要展开项目,右键并选择 TouchUI 识别为TouchUI工程

如图所示:

注意事项

1、一个工作区内不能同时有多个文件夹,否则创建基础工程会失败。

正确的结构为该目录作为根节点。

2、错误的目录层级会导致编译不通过。下图中,在项目的目录外,又套了一层。

img

正确的TouchUI项目目录结构:

img

3、项目合起时,右键无法出现插件菜单。必须展开。

4、在项目根目录进行右键无法出现插件菜单,需要点击在空白处。