WeTouch 开发文档

WeTouch 开发文档

第一个应用

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

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

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

    <img src="http://images.uileader.com/20180108/010ad6ac-1ab6-49fb-b9df-154d580aa7bc.png" />
    
  2. 创建完成后,使用Visual Studio Code打开。打开后,在项目展开的情况下,在空白处点击右键,选择 WeTouch 创建基础工程

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

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

创建成功后,会提示需要登录账号。点击确定,会弹出登录页面。进行登录操作。

登录界面:

需要在uileader注册一个账号,点击注册按钮进行注册即可。也可以直接在:http://www.uileader.com/uileader/login.do注册。

登录成功界面,可以看到用户信息以及一些打包配置等

【需要登录成功后,才可以使用WeTouch的相关功能】

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

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

右键,选择WeTouch 编译并启动开发服务

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

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

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

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

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

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

新建页面

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

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

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

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

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

WeTouch 识别为WeTouch工程

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

如图所示:

注意事项

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

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

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

img

正确的WeTouch项目目录结构:

img

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

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