文档章节

【分享】WeX5的正确打开方式(1)

没错就是酱紫
 没错就是酱紫
发布于 2016/06/21 10:38
字数 2271
阅读 57
收藏 0
点赞 0
评论 0

    最近在研究WeX5,想在这里记录下使用过程中的点滴,今天先把之前已经掌握的分享一下。

       WeX5官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个刚进入代码世界的html5 app开发宝宝,本人表示拿着这份指南也找不到“南”,

        先抛开官方版的,下面就来看看进击版的Hello World吧。

基础部分

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

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

3、在属性标签页设置Output的外观样式,这里常用的是class(设置类型),style(设置具体的样式),我这里就设置了一下Output的红色边框。这里都是可视化鼠标操作,就不多说了,各种样式可以尽情探索,不要生怕点错了会弄疼软件哈。

4、一番精心打扮之后,当然要看看运行效果啦,试运行的步骤是:先启动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前缀的。没错,这里也采用了数据绑定机制一样的实现方式,不过这里暂时先不用管这些,知道用法即可。

这里小茄也默认大家有Web编程基础的了,先对比原生的web写法:

<p id="output1">Hello World</p>
<button>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="" /><br />
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;
});

© 著作权归作者所有

共有 人打赏支持
没错就是酱紫
粉丝 6
博文 16
码字总数 33938
作品 0
东城
程序员
【php增删改查实例】第二十六节 - 个人详情页制作

在一般的系统中,当用户点击头像的时候,就会跳转到对应的个人详情页,在这个页面,他可以查看和修改自己的个人信息,或者更换头像。 本案例中,个人详情页使用bootstrap框架。 首先,我们新...

剽悍一小兔 ⋅ 06/07 ⋅ 0

使用so动态链接库g++正确,gcc undefined reference错误

在调用libcyusb.so时出现undefined reference错误,具体过程如下: test.c如下: cyusb_open为libcyusb.so中的库函数,使用 g++ test.c -lcyusb 可正确编译 gcc test.c -lcyusb 错误,提示c...

悲催的古灵武士 ⋅ 02/06 ⋅ 0

WeX5 快速开发平台 V3.6 正式版发布

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

muyu ⋅ 2016/10/14 ⋅ 4

WeX5 快速开发平台V3.6预览版发布(2016-9-1)

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

muyu ⋅ 2016/09/04 ⋅ 10

【分享】WeX5的正确打开方式(2)

我的上篇文章介绍了WeX5中基本的页面布局和交互事件写法,有人私信我为什么源码中的js要那样写,HTML源码的结构是怎样的之类。那今天就总结一下Hello World的源码结构,才识有限,有疑问欢迎...

没错就是酱紫 ⋅ 2016/06/22 ⋅ 0

【分享】WeX5的正确打开方式(7)——数据组件详解

本文是【WeX5的正确打开方式】系列的第7篇文章,详细介绍WeX5中数据组件的增删改查以及数据定位方法。 前言 上一篇 数据组件初探 我们简单介绍了数据组件的引入和底层结构以及特性,并实现了...

没错就是酱紫 ⋅ 2016/07/12 ⋅ 0

WeX5 快速开发平台 V3.4 正式版发布

WeX5 V3.4 正式版下载地址 http://pan.baidu.com/s/1jHBUDtc WeX5 V3.4正式版发布说明: 1、新增移动端模板32个:包括首页、数据列表、数据展示、注册、登录、搜索等常用单页面模板和完整应用...

muyu ⋅ 2016/04/01 ⋅ 17

【分享】WeX5的正确打开方式(6)——数据组件初探

本文是【WeX5的正确打开方式】系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式。 数据组件的由来 上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON...

没错就是酱紫 ⋅ 2016/07/05 ⋅ 0

完全开源的App开发框架WeX5之数据绑定02:visible绑定

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

WeX5移动开发云 ⋅ 2015/03/26 ⋅ 0

H5 App开发工具--WeX5

WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能“一秒打开”!对跨平台多前端应用开发的支持极好,一次开发,多平台运行。 WeX5采用混合应用(hybrid app)开发模式...

muyu ⋅ 2015/01/10 ⋅ 9

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 45分钟前 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部