touch服务器端文件夹,Touch UI 开发文档

第一个应用

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

使用 TouchUI 创建基础工程 创建应用首先需要手动创建一个文件夹，作为我们的项目工程。作为演示，我们创建一个touchui_basic文件夹。

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

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

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

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

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

右键，选择TouchUI启动开发服务。

启动成功后，会输出以下信息：

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

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

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

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

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

新建页面

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

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

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

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

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

TouchUI 识别为TouchUI工程

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

如图所示：

注意事项

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

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

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

正确的TouchUI项目目录结构：

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

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