1.3 开发工具介绍_基于WeX5的HTML5 App移动应用开发-QQ阅读男生科幻网

书名：基于WeX5的HTML5 App移动应用开发
作者名：夏辉张书峰杨伟吉
本章字数：2355字
更新时间：2021-04-04 08:39:07

1.3 开发工具介绍

开发工具Studio提供了欢迎页面，提供学习、交流WeX5的入口。开发工具包括菜单栏、工具栏、导航栏、透视图、编辑区和控制台。右上角的导航栏默认有Studio和“数据库”，这两个是Studio中常见的透视图。单击Studio切换到“模型资源”透视图，左边显示用于开发的“模型资源”，有三个目录，分别是Baas、UI2和Native。Baas是后端服务模型，UI2是前端页面模型，Native是生成的App。单击“数据库”切换到“数据库视图”，左边显示“数据库视图”，用于操作数据库。“控制台”是Tomcat控制台，Tomcat启动时，若运行出错，注意看这里的输出信息。WeX5开发工具界面如图1-7所示。

1）菜单栏中包含了“文件”“编辑”“浏览”“搜索”“项目”“运行”“窗口”“WeX5文档”“本地App”“帮助”等菜单。

通过“文件”菜单可以新建文件、打开新的文件、关闭文件，还可以切换工作空间、重新启动、退出当前文件、导入和导出目标文件等。

通过“编辑”菜单可以复制、粘贴、剪切、删除、全部选中、替换、查找文本，撤销当前操作。

通过“窗口”菜单可以新建窗口、打开透视图、显示视图、复位透视图、关闭透视图、导航、进入首选项。如果窗口位置发生了变化，可以单击复位透视图，使窗口恢复到初始状态。如果要修改文字大小，可以在首选项中进行。在首选项中还可以对新建的数据库进行配置。

2）透视图中包含了Bass后台数据库、UI2前端资源和Native资源，可以在Bass目录下创建数据库服务，在UI2目录下创建.w页面，在Native目录下生成App。

图1-7 WeX5开发工具界面

3）编辑区是设计区域，页面在编辑区显示，可以将组件拖拽到编辑区。

1.3.1 UI2前端资源

UI2目录下所有的Web资源按目录组织，可以有任意多级目录。system目录包含UI2框架的核心js库、css和组件等资源。UI2下除system目录之外的第一级目录通常称为一个Web应用，比如demo、takeout、account就是WeX5自带的综合演示、外卖、记账三个应用。每个应用由多个页面和相关的资源组成。开发WeX5的应用，就是利用系统js库、css库和组件编写应用页面（.w），即每个页面包括.w、.js和.css三个同名文件，.w是页面的主文件，.js和.css可以没有，如果页面有.js和.css文件，.w在编译运行时会自动引入，不需要手工在.w里链接引用。比如记账页面包含index.w、index.js、index.css三个文件，在浏览器请求index.w时，index.w会自动请求index.js和index.css。UI2界面如图1-8所示，UI2框架结构如图1-9所示。

图1-8 UI2界面

图1-9 UI2框架结构

为了说明方便，框架结构图每个框的左上角都做了数字标记。可以由底层向上理解。

1）最下层（框0）是模块化框架，UI2目前遵循AMD模块化标准，采用requirejs实现。这是UI2的基础，UI2所有的资源（js、css、html等）都是模块，都采用模块化方式引入，采用模块化方式管理依赖。

2）第二层（框1）是组件化框架，组件化框架提供组件规范和组件生命周期管理能力，组件化框架的实现本身也是js模块，并且依赖公共模块MVVM和jQuery。

3）第三层是具体的组件层，按照组件化规范实现的各种组件，每个组件有一个主js模块代表该组件，除了这个主js模块，每个组件还可包含多个js模块、css模块和图片等其他资源。UI2已经提供了丰富的组件，UI2自身提供的这些组件基于Bootstrap样式库。当然，如果希望采用别的样式库，也可引入别的样式库，并且基于此样式库来制作组件。

4）第四层是页面层，首先一个页面由.w、.js和.css模块构成，在逻辑上，页面由多个组件组成，同时页面也可以包含子页面。