码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-07-14 01:28:08      阅读:576      评论:0      收藏:0      [点我收藏+]

标签:

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

 技术分享 (2016-01-13 14:49:05)
标签: 

it

分类: WeX5的初步自学
一.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运行的时候不会自动保存,如果是新添加的内容,所以每次运行前要保存
运行效果如下图:
技术分享

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

标签:

原文地址:http://www.cnblogs.com/shinefon-2-2/p/5668083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!