第一个应用
在安装好需要的开发工具后,就可以开始创建我们的第一个应用啦!
使用 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、在项目根目录进行右键无法出现插件菜单,需要点击在空白处。