当前位置: 首页 > 工具软件 > Wux Weapp > 使用案例 >

WEX5工具进行webapp的开发

林冥夜
2023-12-01

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);

   

 

  

 

转载于:https://www.cnblogs.com/android-er/p/5712929.html

 类似资料: