WEX5工具进行webapp的开发

wex5

　　UI2

 　　采用UI2进行界面的设计，有图形拖拽功能，能轻松的设计出一套webap应用框架，只是缺少数据。

　　　　其中最值得一提的是Data 与 BaasData组件

　　

　　　　data组件（能直接映射数据到指定的行）的使用：

　　　　　　var orderData = this.comp("orderData");

　　　　　　//清楚数据
　　　　　　　　cartData.clear();

　　　　　　//删除指定行数据
　　　　　　　　orderData.deleteData(orderRows);

　　　　　　//向data中添加一行数据
　　　　　　　　var orderRows = orderData.newData({
　　　　　　　　　　index : 0,
　　　　　　　　　　defaultValues : [ {
　　　　　　　　　　"fID" : orderID,
　　　　　　　　　　"fCreateTime" : justep.Date.toString(new Date(), justep.Date.STANDART_FORMAT),
　　　　　　　　　　"fContent" : content,
　　　　　　　　　　"fUserID" : userData.val("fID"),
　　　　　　　　　　"fUserName" : userData.val("fName"),
　　　　　　　　　　"fPhoneNumber" : userData.val("fPhoneNumber"),
　　　　　　　　　　"fAddress" : userData.val("fAddress"),
　　　　　　　　　　"fSum" : cartData.sum("calcMoney") + ""
　　　　　　　　　　//"fPayState" : 0
　　　　　　　　　　} ]
　　　　　　　　});

　　　　　　　　

　　　　　　baasData组件（与data组件不同不是本地的绑定数据库Action）　　　　　

　　　　　　　　//保存数据到服务器
　　　　　　　　　　orderData.saveData({
　　　　　　　　　　　　"onSuccess" : success,
　　　　　　　　　　　　　　"onError" : error});

 

　　　　　　　TableName 同时可以设置绑定数据库Action 即save与 query

　　　　　　设置了autoLoad = false时，需要找到组件去 orderData.refreshData(); 手动加载

 

 

　　　　Baas：

　　　　　　　1. 通过baas服务器进行请求的转发

 

　　　　 　　 2.  绑定数据源，设置数据库动作。

　　　　　　　3。 通过js向baas发送请求：　　　　　　　　　

　　　　　　　　justep.Baas.sendRequest({
　　　　　　　　　　"url" : "/czworks/loginService",
　　　　　　　　　　"action" : "doWxLogin",
　　　　　　　　　　"async" : true,
　　　　　　　　　　"params" : {
　　　　　　　　　　　　　　　　code : weixinCode,
　　　　　　　　　　　　　　　　language : language,
　　　　　　　　　　　　　　　　sysname : "crm"
　　　　　　　　　　　　　　　　},
　　　　　　　　　　"success" : function(data) {
　　　　　　　　　　　　　　if (data.IsSucess) {
　　　　　　　　　　　　　　　　localStorage.setItem(LOCALSTORAGE_KEY_USERNO, data.userno.toLowerCase());
　　　　　　　　　　　　　　　　localStorage.setItem(LOCALSTORAGE_KEY_ORGNO, data.orgno);
　　　　　　　　　　　　　　　　localStorage.setItem(LOCALSTORAGE_KEY_SESSIONID, data.sessionId)
　　　　　　　　　　　　　　　　var userInfoBean = data.ParamModel;
　　　　　　　　　　　　　　　　localStorage.setItem(LOCALSTORAGE_KEY_USERNAME, userInfoBean.DB_USER_NAME);
　　　　　　　　　　　　　　　　var params = {userInfo : data.ParamModel,functionList : data.Datas.functionLis};

　　　　　　　　　　　　　　　　justep.Shell.showPage("main", params);
　　　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　justep.Util.hint(loginfailed + data.ErrorMessage);
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}

 

　　　　　　Native：

　　　　　　　　　　　　进行移动端app的编辑与编译。

 

 

　　　　　PS：　　　　

　　　　　　1 .页面的整体架构（pages）

　　　　　　　　this.shellImpl = new ShellImpl(this, {
　　　　　　　　"contentsXid" : "pages",
　　　　　　　　"pageMappings" : {
　　　　　　　　　　　　"main" : {url : require.toUrl('./main.w')},
　　　　　　　　　　　　"login" : {url : require.toUrl('./login.w')}}
　　　　　　　　　});

　　　　　　　// 页面的替换
　　　　　　　　justep.Shell.setIsSinglePage(true);
　　　　　　　　justep.Shell.showPage("login");

　　　　　　//也可以作用于没有写过映射的URl
　　　　　　　　var completeListUrl = require.toUrl('$UI/czworks/crm/base/customerList.w');
　　　　　　　　justep.Shell.showPage(completeListUrl);

　　　　　　//将相对路径转化为绝对路径
　　　　　　　　require.toUrl('./main.w');

　　　　　　//本地的存储与读取
　　　　　　　　localStorage.setItem(LOCALSTORAGE_KEY_USERNO, data.userno.toLowerCase());
　　　　　　　　localStorage.getItem("LOCALSTORAGE_KEY_USERNO");

　　　　　　//获取这个model中的对象
　　　　　　　　model.getElementByXid("functionCol" + index);
　　　　　　　　this.comp("functionCol1")

　　　　　　//获取和设置model中对象的属性
　　　　　　　　checkbox.get("checked")
　　　　　　　　this.comp('mainBtn').set({icon : "img:$UI/czworks/mes/img/icon_main_1.png|$UI/czworks/mes/img/icon_main_0.png"});

　　　　　　//图表对象的处理（百度echarts）
　　　　　　　　1，只需要在相应的位置设置一个div来占据位置，设置宽和高

　　　　　　　　2，myChart = echarts.init(this.getElementByXid('chartReportDiv2'));ss
　　　　　　　　　　myChart.setOption(option); //option是用于配置的json数据，参考 http://echarts.baidu.com/index.html

　　　　　　//整个浏览器URL重定向
　　　　　　　　window.location.href = "./index.w";

　　　　　　//从row上面取数据 和 设置数据
　　　　　　　　row.val("num"); row.val("num",row.val("num")+1);