wex5中使用baas设置数据库连接

【WeX5的正确打开方式】（1）进击的Hello World

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

目录：

（1）入门篇之进击的Hello World

（2）入门篇之进击的Hello World（续）

（3）WeX5绑定机制

（4）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前缀的。没错，这里也采用了数据绑定机制一样的实现方式，不过这里暂时先不用管这些，知道用法即可。

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

<p id=”output1″>Hello World</p>
<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=”” /><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;
});

【WeX5的正确打开方式】（2）进击的Hello World

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

《WeX5的正确打开方式》系列目录：

（1）入门篇之进击的Hello World

（2）入门篇之进击的Hello World（续）

（3）WeX5绑定机制

（4）WeX5绑定机制（续）

前言

上篇文章介绍了WeX5中基本的页面布局和交互事件写法，大家也领略到了WeX5页面布局设计器的快速便捷，但是相信很多同学对里面内容还是有疑问的，比如为什么源码中的js要那样写，HTML源码的结构是怎样的之类。这一篇就来分析一下Hello World的源码结构，才识有限，有错还请大家指出哈。

HTML部分

在上篇Hello World的案例中，我们是通过新建一个w文件来进行页面样式布局的，这里可能有同学会疑惑：怎么没看见HTML文件呢？最终的HTML文件在哪？而且w文件的结构也跟我们常见的网页结构不同啊，常规的<hear>、<body>标签都没有呢，这是怎么回事？
首先要明确的一点就是：w文件只是一个页面片段，通俗地说就是一小段HTML代码。在实际运行的时候，比如说调试的时候WeX5会将该页面片段以及相应的资源加载到一个页面框架中，从而获得最终的整页显示效果。也就是说，可以将很多w文件加载到一个页面中，比如官方的外卖案例中，地图定位被做成一个w文件，然后在需要的时候中调用它，这就是所谓的按需加载了。

那怎样得到一个完整的页面呢？这就需要通过编译了，具体可以参考WeX5官方的Hello World教程中的编译和部署。简单来说就是在Native目录下新建一个本地App，指定主页为Hello World的w文件，然后执行“编译使用到的UI资源”。编译后在www目录下会有一个index.html文件，这就是整个页面的html文件。
先看看Hello World中的w文件源码（点击编辑器左下角的源码标签）：

从上到下分别是window组件、model组件、output组件和button组件。window组件就是整个w文件的容器，output组件和button组件是我们添加上去的，都很好理解。但是怎么会有个model组件呢？生成的页面上好像也没看见这个model组件呀？这是用来做什么的呢？

在页面应用中，除了UI和人机交互之外，我们还需要做很多数据的处理。简单的应用中我们直接就把数据嵌入到js的变量中去了。但是数据比较复杂的情况下，这种做法在管理上比较困难了。WeX5的做法是将数据单独抽出来做成一个独立的data组件，每个data组件管理相应的数据，规模较大的应用上会有比价多的data组件，所以就需要一个容器来接纳这些data组件，这个容器就是model组件了。
注意：上篇中也有介绍js源码中的Model对象，实际上这两个model代表含义是一样的，都是代表着这个页面片段的所有资源（包括变量、dom节点等）。当然，好奇的同学可以试过删除它但发现没什么影响，这里要了解HTML源码中的model是整个model的一个映射，js中的model才是源头。

再看看完整的html文件，由于WeX5采用了按需加载的机制，所以必须要到浏览器打开才能看到真正完整的整页页面哦：

红框部分为w文件编译而成的HTML代价，可以看到编译后的代码增加了很多内容，有为了避免命名冲突而加的，有将数据绑定关系转换过来的内容等。一般来说我们用WeX5做开发只需要做好w文件即可，并不需要直接写现成的HTML代码。

JavaScript部分

先打开js源码（点击编辑器左下角的JS标签）：

熟悉Html5 app 开发的同学一眼就能看出，这是模块化的写法。WeX5中采用的是AMD规范的requirejs实现模块化开发，每个w文件自动配置一个同名的js文件，在页面加载的时候自动加载相应的js文件。js文件中所有的js代码被包裹在一个define语句里面，同时在内部定义了一个Model对象并在最后输出这个Model对象。其实这里的思路也很简单，就是将所有与该w文件相关的js代码放入define中隐藏起来，避免污染全局变量（这一点上一篇也说过），同时通过Model对象向外界暴露相应的接口，这样外界就可以通过这些接口对内进行操作了。另外，第一二行定义变量就是引入jQuery和justep框架，跟平常使用jQuery一样的，如果要引入其他模块也可以用同样的方式。当然，你也可以写成 define([引用模块1，引用模块2], function(模块1参数，模块2参数) { 执行代码 } )，采用这种写法要注意各个参数与模块对应起来，否则就会出错。

说了这么多，那我们的代码应该怎么写？

需要对外暴露的信息写入var Model = function(){};中，需要对外暴露的方法推荐写到Model原型里（Model.prototype.你的方法=function(){};），其他隐藏信息直接写到define内即可。比如：

变量a、b和函数add都不在Model内，也就是这些信息外界都不能访问到，这样就实现了模块内部的封装。更多关于前端模块化开发的内容，可以看看阮一峰的博文：Javascript模块化编程。

另外还要一点：在设计编辑器中直接绑定的变量，都是在Model之下的。比如增了一个input然后将bind-value设置为myValue，那么这个myValue变量就是在Model之下的，可以通过myValue来访问。

总结：Model就是js模块对外的接口，w页面与同名js文件的联系通过绑定机制来实现。

CSS部分

大家看到HTML源码的时候也应该发现了，通过可视化编辑器设置的样式是内联式的。很多人第一反应就是内联样式不好，但不好在哪？外联的好处又在哪？

内联样式因为直接写入HTML中，表现与结构重度耦合，不利于管理和改动，另外一些本可以重用的样式也直接写入内联样式中了，所以样式的重用性差。但是内联也是有很大的优势的：一是速度快，由于不需要查找CSS文件和定位样式，所以执行速度是最快的；二是可以减少HTTP请求，独立的CSS文件需要另外开HTTP请求去获取，而HTTP请求又是性能优化的最重要瓶颈。外联样式的好处网上已经说得太多，可以在不改结构的情况下快速批量化更改样式，样式的重用性好等等。

所以，小孩子才分好坏，成年人只看利弊。在WeX5中使用外联样式也是按需加载的，编写方式跟正常的html5 app开发一样的。官方建议的也是使用外联样式，降低后期维护成本。可以直接点击编辑器左下角的CSS标签进入CSS编辑器里面。这里也提供了可视化编辑（点击添加按钮）和直接键盘输入两种编写方法：

个人强烈建议使用键盘直接输入，使用可视化编辑生成的样式还是比较臃肿的。写完保存之后，系统就会直接生成与w文件同名的css文件，在载入w文件的时候才会加载同名的js和css文件，实现按需加载。

总结

WeX5 Hello World的介绍就到这里了。通过Hello World案例，我们了解了组件可视化布局、样式设置、交互事件编写这三个最基本的操作，对应的是HTML、CSS、js三大部分。其实任何一种前端的工具、框架、类库都是基于这三大部分的集合，有了这些基础之后其他的知识点还是比较好理解上手的。