本帖最后由 小太阳 于 2016-6-21 09:38 编辑
想必使用WeX5的各位亲都应该看过了官方的WeX5开发指南,小茄觉得官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个刚进入代码世界的html5 app开发宝宝,小茄表示拿着这份指南也找不到“南”,为了让其他跟小茄差不多等级的html5 app开发宝宝们更轻松地打怪刷副本,小茄决定分享自己的经历,为 html5 app开发宝宝们写一本WeX5的练级攻略,名为《WeX5的正确打开方式》,喜欢的亲可以收听我或者加个好友哈~
本文是《WeX5的正确打开方式》系列的第一篇文章——【进击的Hello World】
在代码世界里,每个程序宝宝破蛋而出时看到的第一行代码,都是名为Hello World的东西。使用WeX5的html5 app开发宝宝们也应该看过了官方版的Hello World,不过作为一名纯小白,小茄表示官方的Hello World也并没那么hello,当时理解起来也是花光了吃奶的力气……
先抛开官方版的,下面就来看看进击版的Hello World吧。 基础部分1、准备工作:打开hml5 app 开发工具——WeX5(路径:WeX5\studio\studio.exe),在左侧模型资源管理器中建立HelloWorld目录并新建W文件,模板选空白的就好。这一步有问题找右键。
2、鼠标拖一个Output放到W页面上,效果如下:
3、在属性标签页设置Output的外观样式,这里常用的是class(设置类型),style(设置具体的样式),我这里就设置了一下Output的红色边框。这里都是可视化鼠标操作,就不多说了,各种样式可以尽情探索,不要生怕点错了会弄疼软件哈。
4、一番精心打(rou)扮(lin)之后,当然要看看运行效果啦,试运行的步骤是:先启动Tomcat,然后在W文件上右键选择“用浏览器运行”。记得要先保存W文件再试运行才能看到改动效果哦。
通过简单的鼠标操作,很简单就能设置好Output控件的外观,这个也是WeX5的强大之处。而且更重要的一点是,所有设置都是符合html5 标准的!比如说你要设置一个控件的位置,并不能直接拖动控件到你想要的位置,而要通过边距、定位等设置才能定位。所以即使是使用WeX5进行开发,还是要懂基本的HTML、CSS、JavaScript的,这里推荐不太熟悉的亲们去稍微学习点基本的html5基础知识。新手不用太纠结细节,先整体了解,日后碰到具体问题再去找相应的解决办法。当然,小茄这边也会分享相关的内容,大家可以关注哈~~~ 5、上面的鼠标流操作设置好了外观,但还没看到Hello World的影子呢。大家肯定也想到了要在Output中输出Hello World,具体操作也非常简单:在属性标签页的“bind-ref”内输入“Hello World”就可以啦,注意要用英文模式的双引号把Hello World引起来。有点编程基础的同学都知道,用双引号包起来的才是字符串,没有双引号的话就是变量了。这样就设置好了,试运行时在Output里面就能看到效果了。
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前缀的。没错,这里也采用了数据绑定机制一样的实现方式,不过这里暂时先不用管这些,知道用法即可。
|