文档章节

【WeX5的正确打开方式】(1)进击的Hello World

zorofy
 zorofy
发布于 2016/06/12 10:35
字数 2444
阅读 152
收藏 4

前言

想必使用WeX5的各位亲都应该看过了官方的WeX5开发指南了,小茄觉得官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的中级程序猿们。但是作为一个刚进入代码世界的程序猿宝宝,小茄表示拿着这份指南也找不到“南”,为了让其他跟小茄差不多等级的程序猿宝宝们更轻松地打怪刷副本,小茄决定分享自己的经历,为程序猿(媛)宝宝们写一本WeX5的练级攻略,名为《WeX5的正确打开方式》。

目录:

  1. 入门篇之进击的Hello World
  2. 入门篇之进击的Hello World(二)
  3. 待续……

本文是《WeX5的正确打开方式》系列的第一篇文章。

进击的Hello World

在代码世界里,每个程序猿宝宝破蛋而出时看到的第一行代码,都是名为Hello World的东西。使用WeX5的程序猿宝宝们也应该看过了官方版的Hello World,不过作为一名纯小白,小茄表示官方的Hello World也并没那么hello,当时理解起来也是花光了吃奶的力气…… 先抛开官方版的,下面就来看看简单的Hello World吧。

基础部分

  1. 准备工作:打开WeX5开发工具(路径:WeX5\studio\studio.exe),在左侧模型资源管理器中建立HelloWorld目录并新建W文件,模板选空白的就好。这一步有问题找右键。

    新建文件

  2. 鼠标拖一个Output放到W页面上,效果如下:

    插入组件

  3. 在属性标签页设置Output的外观样式,这里常用的是class(设置类型),style(设置具体的样式),我这里就设置了一下Output的红色边框。这里都是可视化鼠标操作,就不多说了,各种样式可以尽情探索,鼠标动起来。

    设置样式

  4. 一番精心打(rou)扮(lin)之后,当然要看看运行效果啦,试运行的步骤是:先启动Tomcat,然后在W文件上右键选择“用浏览器运行”。记得要先保存W文件再试运行才能看到改动效果哦。

    浏览器调试

通过简单的鼠标操作,很简单就能设置好Output控件的外观,这个也是WeX5的强大之处。而且更重要的一点是,所有设置都是符合W3C标准的!比如说你要设置一个控件的位置,并不能直接拖动控件到你想要的位置,而要通过边距、定位等设置才能定位。所以即使是使用WeX5进行开发,还是要懂基本的HTML、CSS、JavaScript的,这里推荐不太熟悉的亲们去w3school 学习基本的web基础知识。新手不用太纠结细节,先整体了解,日后碰到具体问题再去找相应的解决办法。当然,小茄这边也会分享相关的内容,大家可以关注哈~~~ 5. 上面的鼠标流操作设置好了外观,但还没看到Hello World的影子呢。大家肯定也想到了要在Output中输出Hello World,具体操作也非常简单:在属性标签页的“bind-ref”内输入“Hello World”就可以啦,注意要用英文模式的双引号把Hello World引起来。有点编程基础的同学都知道,用双引号包起来的才是字符串,没有双引号的话就是变量了。这样就设置好了,试运行时在Output里面就能看到效果了。

![样式预览](https://static.oschina.net/uploads/img/201606/12103208_9ywg.jpg "在这里输入图片标题")

**PS:**这里的“bind-ref”是WeX5中的一个数据绑定机制,可以将其想象成一个管道,通过这个管道可以将不同组件间的数据绑定起来。例如我这里有两个Output组件,我们可以简单的通过bind来讲两个组件的值绑定起来,但只是绑定的话并没有动态刷新的功能,如果需要像官方Hello World那样做到动态刷新,还需要将绑定的值设置为可观察对象。这个部分理解起来比较难,后续我会单独开一个章节去讲这部分,本文先略过。 **注意:**原生的Web写法应该是在标签内写入要显示的内容,例如:`

Hello World `。但是WeX5将基本的HTML组件进行了封装,而且为了方便管理数据还引入了数据绑定机制,每次进行组件初始化的时候都会调用相应的构造函数去初始化组件,所以即使在Output组件的源码中加入Hello World:

<div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" style="height:40px;" dataType="String">Hello World</div>

但Output的innerText也还是会根据数据绑定的规则去初始化组件,如果没有绑定,则初始化为空值。因此,WeX5中除了原生的HTML标签外,都应该按照WeX5的规范使用数据绑定的方式来管理控件。

进阶部分

上面这种纯输出的页面没什么意思,现在试试加点交互效果。比如说加个按钮,点击按钮改变输出信息为”Hello WeX5”。官方原版的Hello World案例中使用了WeX5的数据双向绑定机制来实现,因为我们都不熟悉WeX5的数据绑定机制,所以理解起来非常吃力。抛开绑定机制,WeX5的写法其实很简单:

Model.prototype.button2Click = function(event){
    var output = this.getElementByXid('output1');
    output.innerText = "Hello WeX5";
};

WeX5提供了一个事件标签页来方便地设置组件的各种事件,这样一来可以一览组件的事件接口,二来也方便集中管理所有组件事件。使用方法就是在需要的事件中填入函数名(不填则使用默认函数名)并双击,然后就可以进入js源码页了,这里系统会自动生成Model.prototype.函数名 = function(event){}代码段。细心的同学会发现,这里的事件也是带bind前缀的。没错,这里也采用了数据绑定机制一样的实现方式,不过这里暂时先不用管这些,知道用法即可。

![输入图片说明](https://static.oschina.net/uploads/img/201606/12102913_19f1.jpg "在这里输入图片标题")

对比原生的web写法:


Hello World

<button onclick="button2Click()">Button</button>
<script type="text/javascript">
	function button2Click(event) {
		var output = document.getElementById('output1');
		output.innerText = 'Hello WeX5';
	}
</script>

可以看出主要的差异点事WeX5中使用了xid代替了原生的id,所以要用getElementByXid来获取元素节点。之所以这样做的原因,主要是为了解决命名冲突的问题,在一个复杂页面中通常是将页面分成很多页面片段来开发的,而很多时候某几个页面片段都可能引用了同一个组件,那么在总页面中就会产生id的命名冲突。而xid是通过在id后面加入一个页面标示,即使是同一个id在不同的页面片段中的xid也是不同的,这样就解决了id冲突的问题。

另外一点差异是WeX5中还创建了一个Model对象,页面中资源都放入了Model变量中,使用的时候也要在Model中进行操作。而原生的写法是将所有函数和变量都放在全局环境中,使用的时候直接引用全局中的函数变量。当一个页面比较复杂的时候,全局下就会有非常多的函数和变量,这样就容易产生变量冲突和变量覆盖,因为js中是可以重复声明的,后声明的变量会覆盖掉前面声明的变量,这样一来后声明的函数就将前面的函数体覆盖掉了。更为严重的是,浏览器给js提供了很高的权限,你甚至可以覆盖掉系统提供的接口。比如说:

alert = function () { window.close(); }
alert("hello");

这样alert就由报警变成了关闭页面,但浏览器是允许这种行为的,所以我们应该尽量避免污染全局变量。

最后还有一点就是我们定义的方法是放在Model.prototype之下的,也就是放在Model原型下面的。也就是说采用了混合模式(构造+原型)来创建对象,当然,直接写在对象下也是OK的,只是不推荐这种写法,例如:

var Model = function(){
	this.callParent();
	this.button2Click = function(event){
		var output = this.getElementByXid('output1');
		output.innerText = "Hello WeX5";
	};
};

上面的例子实现了一个按钮改变输出文字的功能,通过这个例子,大家应该能掌握WeX5中页面布局设计与简单交互事件的写法,上面介绍的写法与原生比较相似,对有web基础的同学来说应该是很好理解的。没有基础的同学,还是推荐先到w3school 去学习web基础,过一遍HTML、CSS,熟悉一下js语法即可。 关于Hello World可说的内容还有许多,下一篇我会简单介绍一下HTML源码以及js源码结构。

附录:官方Hello World的WeX5写法与原生js写法对比,可以看出在页面复杂的时候WeX5的代码更简洁,更方便管理。 原生js写法:

Input1: <input type="text" id="input1" value="" />  

Input2: <input type="text" id="input2" value="" />
<script type="text/javascript">
	var input1 = document.getElementById('input1'),
		Input2 = document.getElementById('input2');
	input1.addEventListener('input', function (e) {
		input2.value = this.value;
	});
	input2.addEventListener('input', function (e) {
		input1.value = this.value;
	});
</script>

WeX5写法:

define(function(require){
	var $ = require("jquery");
	var justep = require("$UI/system/lib/justep");

	var Model = function(){
		this.callParent();
		this.input1 = justep.Bind.observable(""); //核心语句
	};
	return Model;
});

本文源自WeX5开发者论坛WeX5开发者论坛

© 著作权归作者所有

共有 人打赏支持
zorofy
粉丝 0
博文 1
码字总数 2444
作品 0
朝阳
私信 提问
WeX5 V3.3 正式版,跨端移动开发框架

WeX5 V3.3 正式版发布了,新增特性: 1、提供超轻量高性能服务框架(XBaaS),支持免代码或少量代码快速开发操作数据表的CRUD服务,目前v3.3版本提供了XBaaS的java和.net语言实现,后续会提供...

muyu
2016/01/19
3.4K
10
完全开源的App开发框架WeX5之数据绑定02:visible绑定

上周分享了WeX5数据绑定(Data Bindings)的初步体验(点击查看);现继续跟小伙伴们分享WeX5数据绑定之visible绑定。 (提示:WeX5是一个彻底开源的app开发框架,每行源代码都可以自己改;能开...

WeX5移动开发云
2015/03/26
2.1K
0
WeX5 快速开发平台 V3.6 正式版发布

WeX5 V3.6 正式版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/10/14
5.4K
4
高性能+大数据的HTML5 App开发交流会【就这周日】

【活动说明】 HTML5技术正在席卷App行业,如何最高效率地开发出轻架构、高性能HTML5 App已是抢占潮流红利的关键。 同时,App说到底都是在围绕“数据”做生意,该用什么样的大数据技能武装自己...

极光推送
2016/05/18
1K
2
H5 App开发用了WeX5,真正体验到极速秒开

这是使用WeX5移动应用开发工具开发的一个H5 App,功能仿淘宝; 全部源代码免费,点击即可下载。 在Web端点击链接,体验“一秒打开” http://wex5.com/cn/portfolio-items/wex5-taobao/ 任何移...

WeX5移动开发云
2016/01/29
11.3K
2

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
3
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部