君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
王洁-Hybrid App 走向“轻混”——WeX5“轻架构高性能”前端可视化快速开发工具
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口春哥最近接手一个APP开发项目，帮我朋友公司搞的一个，现在已经基本完工了，今天周六花点时间写一下关于移动APP框架开发的那些事。
首先今天来介绍一款由起步软件开发的一款移动APP开发框架WeX5，这个他们在前天已经升级到全新的V3.1，他们家主要定位两个产品一个是面向普通开发者的WeX5，另一个就是面向企业的收费框架BeX5，具体区别我们来看一张图就一下子明白了。
WeX5亮点：安卓app、苹果app、微信服务号、微信企业号、web App、其它轻应用，一个都不能少。
WeX5可以怎么玩？
一、纯本地App
没任何服务请求，已经有开发好的一堆html+js，希望本地App中可以方便的使用，那可以参考默认的Native/X5工程，把自己开发好的资源放到www目录下就可以，注意工程的几个重要选项：
服务地址：http://localhost
首页: 假设你www中有一个入口的index.html，那写 /index.html
生成App包的向导中，&重新编译使用到的UI资源&一定不要选
二、关联一个网站，希望默认就打开某页
例如想把本论坛做成一个app，那可以新建一个本地App，把
服务地址：
首页: /forum.php
这样生成的app，一启动就打开论坛的首页
三、UI设计器
下建自己应用（例如demo），形成自己的一组页面，然后Native新建一个本地App，选择新建的资源demo，点右键&编译使用到的UI资源&，则
在ww下生成标准的html+js，改资源可以放到标准 web 服务器（apache, iis, tomcat等）直接进行网络访问
四、打包神器
什么UI2，什么X5不要，我就只要一个可以生成App的环境
xcode，adt, 哈哈，都有
五、标准玩法
外卖为例，/cn/wex5-server-interaction&有交互原理介绍
资源打进app，bass 部署到tomcat上作为服务， 这个是推荐用法。
什么，资源咋升级？这个就不能把资源打进app了，需要用BeX5运行UIServer 来解析，推荐使用BeX5。当然，不用BeX5，可以用第三种玩法那里部署到一个web服务器上，资源不要打包到app
WeX5和BeX5比较
许多对WeX5和BeX5略有了解得人都知道，WeX5和BeX5是完全共用前端框架技术的。但是WeX5和BeX5是两个差别定位有巨大差别的产品。具体差别如下：
& & & & 1.
BeX5的定位就是用于企业内部管理系统，这其实是传统的市场，现在企业管理软件也已经彻底走向移动app、微信app和webapp都必须支持的时代，
但无论何种前端，主要还是给企业内部人员使用的。所以BeX5的用户，指的是BeX5的组织机构分配了功能的人员，实际上就是企业的员工。
& & & & &2.
WeX5的定位则是面向消费者和公众的开放应用系统，这块市场巨大且非常热，比如现在市场上大热的各类电商系统、服务系统、客户系统、会员系统、微店微商
等等，为了支持这块巨大的新兴市场，WeX5采用最彻底的apache协议开源免费，无任何限制，彻底免费，这就是起步的诚意，就是为了让您做面向一般消
费者和面向公众的app和应用。
WeX5定位：
定位：开发面向消费者和公众的开放应用系统
适用：一般app、电商app、客服app、会员app、微店微商等
前端：安卓app/苹果app/微信服务号/PC web app
后端：数据处理组件，通过http(Ajax)、Websocket等对接各主流技术平台
费用：完全开源，彻底免费，无任何限制
BeX5定位：
定位：开发面向企业和政务的管理软件系统
适用：OA/HR/CRM等各类管理软件，电子政务及各行业管理软件
前端：安卓app/苹果app/微信服务号/PC web app
后端：工作流、报表、组织机构、业务逻辑等能力，j2ee框架
费用：按企业用户数收费，20用户免费，商业版收费
WeX5主要能力是：
移动app/微信app/Web app开发利器，一次开发多平台运行
完全的可视化、组件化、拖拽式快速开发环境
开放的后端支持：可通过http（Ajax）、Websocket、Socket.io等连接任意的后端
BeX5平台包含WeX5，并在WeX5之外，提供如下能力：
工作流支持
组织和权限支持
报表和图表支持
业务数据、业务逻辑和规则处理
文档服务器
好了，春哥今天介绍到此结束！WeX5经过Baas服务访问数据库 - 数据库当前位置:& &&&WeX5经过Baas服务访问数据库WeX5经过Baas服务访问数据库&&网友分享于：&&浏览：0次WeX5通过Baas服务访问数据库
WeX5通过Baas服务访问数据库
WeX5.Baas服务详解 视频地址：/s/1o6upyJ4
baas.net 版：/cn/wex5-baas-guide-net/
本案例实现了对takeout_order（外卖订单表）表的分页查询、关键字检索和修改保存的能力，数据库表结构参见WeX5自带的mysql数据库。
案例代码分为服务端和客户端两部分：
服务端包含一个servlet（com.justep.baas.test.DemoServlet），用于为客户端提供数据查询和数据保存的Web服务；
客户端包含一个.w页面（/UI2/demo/baas/simpleData/index.w），页面上的数据集通过ajax请求访问服务端提供的Web服务，实现数据的增删改查。
服务端实现了一个servlet（com.justep.baas.test.DemoServlet），用于为客户端提供数据查询和数据保存的Web服务。
导入baas工程
运行“启动WeX5开发工具.bat”；
打开Java透视图，选择菜单“窗口-打开透视图-Java”；
导入baas工程，选择菜单“文件-导入”，选择“常规-现有项目到工作空间中”，“下一步”，“选择根目录-浏览”，选择WeX5目录下“apache-tomcat\webapps\baas”，“完成”。
JNDI数据源配置
/baas/META-INF/context.xml
version=“1.0” encoding=“UTF-8″
reloadable=“true”
name=“jdbc/takeout” type=“javax.sql.DataSource”
maxActive=“100” maxIdle=“30”
driverClassName=“com.mysql.jdbc.Driver” url=“jdbc:mysql://127.0.0.1:3306/takeout”
username=“root” password=“x5″
注意：Tomcat 6启动时，自动将“/baas/META-INF/context.xml”复制一份到“\apache-tomcat\conf\Catalina\localhost\baas.xml”。但是当context.xml内容修改后，Tomcat并不会自动更新。所以，修改context.xml的内容后，需要手动更新“\apache-tomcat\conf\Catalina\localhost\baas.xml”。切记！切记！
特别注意：
由于Tomcat 6的bug（https://bz.apache.org/bugzilla/show_bug.cgi?id=44725），不要在Tomcat服务运行时删除“\apache-tomcat\conf\Catalina\localhost\baas.xml”，否则Tomcat会自动删除WEB-INF/web.xml。
Java Servlet
com.justep.baas.test.DemoServlet
public void service(ServletRequest request, ServletResponse response) throws ServletException {
String action = request.getParameter(“action”);
if (“queryOrder”.equals(action)) {
queryOrder(request, response);
} else if (“saveOrder”.equals(action)) {
saveOrder(request, response);
} catch (Exception e) {
e.printStackTrace();
throw new ServletException(e);
这里实现了queryOrder和saveOrder两个action。
private static void queryOrder(ServletRequest request, ServletResponse response) throws SQLException, IOException, NamingException {
JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(“params”));
JSONObject columns = params.getJSONObject(“columns”);
Integer limit = params.getInteger(“limit”);
Integer offset = params.getInteger(“offset”);
String search = params.getString(“search”);
List&Object& sqlParams = new ArrayList&Object&();
List&String& filters = new ArrayList&String&();
if (!Util.isEmptyString(search)) {
filters.add(“fUserName LIKE ? OR fPhoneNumber LIKE ? OR fAddress LIKE ? OR fContent LIKE ?”);
search = (search.indexOf(“%”) != -1) ? search : “%” + search + “%”;
for (int i = 0; i & 4; i++) {
sqlParams.add(search);
Table table = null;
Connection conn = Util.getConnection(DATASOURCE_TAKEOUT);
table = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, “fCreateTime DESC”, sqlParams, offset, limit);
} finally {
conn.close();
Util.writeTableToResponse(response, table);
private static void saveOrder(ServletRequest request, ServletResponse response) throws ParseException, SQLException, NamingException {
JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(“params”));
JSONObject data = params.getJSONObject(“data”);
Table table = Transform.jsonToTable(data);
Connection conn = Util.getConnection(DATASOURCE_TAKEOUT);
conn.setAutoCommit(false);
Util.saveData(conn, table, TABLE_TAKEOUT_ORDER);
} catch (SQLException e) {
conn.rollback();
} finally {
conn.close();
在上面的代码中，大多数都是用来处理参数、数据库连接和事务的代码，核心代码其实只有以下几句：
table = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, “fCreateTime DESC”, sqlParams, offset, limit);
Util.writeTableToResponse(response, table);
Table table = Transform.jsonToTable(data);
Util.saveData(conn, table, TABLE_TAKEOUT_ORDER);
Servlet配置
/baas/WEB-INF/web.xml
X5 Baas Demo Servlet
com.justep.baas.test.DemoServlet
X5 Baas Demo Servlet
客户端通过data组件的自定义刷新（onCustomRefresh）和自定义保存（onCustomSave）事件，实现页面数据与后台servlet服务的交互。
/UI2/demo/baas/simpleData/index.w
页面上包含一个数据组件orderData，orderData的列设置与数据库表takeout_order的列结构相匹配。
页面布局的最外层是一个panel，将页面分为上中下三个部分：
上部包含一个titleBar组件，设置了页面的标题和几个按钮，几个按钮的onClick事件分别设置了window或orderData的操作；
中部包含一个contents多页组件，里面包含两个页listContent和detailContent；
下部包含一个buttonGroup组件，里面包含两个按钮，分别通过target属性指向listContent和detailContent。
listContent中用一个pancel分成上下两个部分：
上部包含一个inputGroup，用于输入检索关键字；
下部外层是scrollView，scrollView的中间是一个list，用于展示订单列表数据。
detailContent中包含一组单列布局的labelInput组件，用于编辑订单数据。
/UI2/demo/baas/simpleData/index.js
var Baas = require(“$UI/demo/baas/baas”);
Model.prototype.orderDataCustomRefresh = function(event) {
var data = event.
var params = {
“columns” : Baas.getDataColumns(data),
“limit” : event.limit,
“offset” : event.offset,
“search” : this.getElementByXid(“searchInput”).value
var success = function(resultData) {
var append = event.options && event.options.
data.loadData(resultData, append);
Baas.sendRequest({
“url” : “/demo”,
“action” : “queryOrder”,
“params” : params,
“success” : success
Model.prototype.orderDataCustomSave = function(event) {
var data = event.
var params = {
“data” : data.toJson(true)
var success = function(resultData) {
data.applyUpdates();
Baas.sendRequest({
“url” : “/demo”,
“action” : “saveOrder”,
“params” : params,
“success” : success
上面代码中的核心代码如下：
Baas.sendRequest({
“url” : “/demo”,
“action” : “saveOrder”,
“params” : params,
“success” : success
这是客户端最重要一个方法，用于发送ajax请求，这个方法更多的注释和实现，参考/UI2/demo/baas/baas.js。
执行这个方法需要在js头引入baas.js：var Baas = require(“$UI/demo/baas/baas”);
data.loadData(resultData, append);
data.toJson(true)
data.applyUpdates();
运行和调试
运行“启动MySQL数据库.bat”；
运行“启动WeX5开发工具.bat”；
点击WeX5开发工具最上面的“小狐狸”按钮，启动Tomcat；
浏览器（推荐Chrome）地址栏输入http://localhost:8080/x5/m；
点左上角的按钮呼出菜单项，选择“演示案例/BAAS/简单数据”。
服务端Java调试
WeX5开发工具中，选择菜单“窗口-首选项”，“首选项”中左边选择“Studio配置-Tomcat”，右边去掉“不以调试模式启动Tomcat”，去掉“自动设置源文件目录”，勾选“baas”。配置修改后，需要重新启动Tomcat。
Java代码编辑窗口中，在需要调试代码的左侧边框，右键菜单选择“切换断点”，代码运行时会自动停在断点位置并进入调试模式。
客户端JavaScript调试
在代码中需要调试的地方，输入“debugger；”；
Chrome浏览器，F12呼出开发人员工具，代码运行时会自动停到debugger的代码位置并进入调试模式。
本文示例代码适用于WeX5 V3.1以上版本，有关Bass服务的详解配套视频请下载：WeX5 Baas服务详解
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有【图文】WeX5 App开发完整过程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
WeX5 App开发完整过程
上传于|0|0|文档简介
&&使用wex5开发APP的优势是可以实现双平台开发,不足之处是开发IOS需要下载MAC环境
大小：2.44MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢