WeX5的简单介绍及UI的简单讲解

WeX5的简单介绍及UI的简单讲解

(2016-01-13 14:49:05)

一.WeX5的简单讲解

1.WeX5是前端快速开发框架，可开发跨端运行应用。是移动App/微信/WebApp开发利器，一次开发多平台运行。

二.WeX5平台了解

1.菜单和工具栏 ：查看API；启动Tomcat；搜索；首选项；复位透视图

2.透视图 ：导入java项目；使用svn

3.模型资源 ：文件对比 ；新建、复制、删除；重命名文刷件新及文件夹；模型编译

切换到资源管理器 ；创建本地App；生成App包；模拟运行

4.编辑器：格式化；查找、替换；编辑文件(使用快捷键)

5、控制台 ：显示Tomcat信息；搜索结果

三.组件的编辑

1.摆放组件的两种方法：（1）双击；（2）拖拽；

2.编辑组件的几种方法：

（1）设置属性；

（2）右键菜单；

（3）添加事件；

（4）剪切、复制、粘贴;

(5)删除组件;

(6)删除组件事件 ;

三.WeX5中的快捷键

• Ctrl+Shift+/ 整段注释
• Ctrl+Shift+\ 取消整段注释
• Ctrl+Shift+C (取消)逐行注释
• Ctrl+Shift+F 格式化文档
• Ctrl+Shift+L 查看快捷键
• Ctrl+D 删除行
• Ctrl+F 查找、替换
• Ctrl+K 查找
• Ctrl+L 定位行
• Ctrl+M 编辑器窗又最大化
• Ctrl+S 保存文件
• Ctrl+Z 插销前一个操作
• Alt+↑(↓) 当前行向上(下)移一行

四.UI部分的讲解

1.页面是UI2的核心，页面是一个相对独立可复用的界面展现和交互单元，它即可作为Web页面独立运行，也可作为一个页面片段嵌入到别的页面运行。每个页面包括.w、.js和.css三个同名文件，.w是页面的主文件，.js和.css可以没有。如果页面有.js和.css文 件，.w在编译运行时会自动引入, 不需要手工在.w里链接引用。比如外卖页面包含index.w、index.js、index.csss三个文件，在浏览器请求index.w时，index.w会自动请求index.js和index.css。

五. 简单demo

1.创建应用：

2.创建W文件

3.在设计模式中放入input和output组件

（1）拖入控件的第一种方法：首先点击一下控件，然后在点击一下设计界面；

（2）拖入控件的第二种方法：选取好父视图后，双击控件就可以；

4.输入代码：

5.设置属性

KO可以把bind-value 的值动态写入input的value属性

6.output控件要显示值得话需要设置bind-text属性

7.利用浏览器运行

（1）首先启动Tomcat（如果没有启动过的话）

（2）启动浏览器运行

8.注意：WeX5运行的时候不会自动保存，如果是新添加的内容，所以每次运行前要保存

运行效果如下图：