菜鸟级WEX5开发之路【用B/S开发经验应用到WEX5的开发中来】

也就是上个月开始，临时受命使用WEX5来开发一个APP。在此之前我也是听说过这个软件的消息的，据说是开发速度特别快，只要会一点点开发的人都会用。

屁话那么多，说干就开始干，一口气把官方提供的视频全看完了，然后得出一个结论“懵逼”。

这个软件是个啥玩样儿？

疑惑之处在于这个软件N不像，前端UI用拖拽，可编程部分用JS面向对象，后端代码又是靠拖拽，那我要是自定义一个方法该肿么办？？？

我想上面的这些个东西是很多初次使用wex5的朋友所疑惑的。

作为管理学院的硬件技术人员出身的程序员，我这次用几个小步骤教一下正在尝试用WEX5的朋友。以下用铜梁视窗APP开发为例：

步骤1  新建一个应用，默认的就好

步骤2  确定你这个应用应该包含哪些功能并新建目录

步骤3  做个萌萌哒首页

这三部呢大概做完了就是下面这张图的样子，大概花得到几分钟时间去新建各种东西吧

 

步骤4  给首页拖各种布局上去

拖放布局的时候请注意下方图片，需要分为以下几个小步骤

① 我们底部的那个导航栏什么的要用X-CARD样式去做，别想着自己花个几天做个自觉高大上的导航出来，其实做出来都或多或少差强人意的，还不如直接用他们的，自己写好CSS就好

②看到左边的那些个content没有，还是需要去看看官方视频的解释

③注意一下的几个row，表示的是每个功能由他们分别涵括，就跟html里面的div一样的，之后要填充的数据也都直接放进去就行啦

④那个windocontainner什么的其实就是引用了某个程序页面，跟php里面的include是一个意思

步骤5  给各种布局填充数据

填充数据什么的基本课还是需要花10分钟看一下官方视频，但是我这里用来绑定数据的方法不是用的官方默认方法，是用的API动态获取并加载的

 

大概就是下面的这两段代码，一段是说如何给那个轮播控件绑定数据，一段是给上图list插件绑定数据，本段代码都是没有缓存的，自己需要就自己想把

 

    // 加载页面的时候加载轮播图
    Model.prototype.dt_scrollCustomRefresh = function(event) {
        /*
         * 1、加载轮换图片数据 2、根据data数据动态添加carouse组件中的content页面 3、如果img已经创建了，只修改属性
         * 4、第一张图片信息存入localStorage
         */
        var me = this;
        var callback = function(res) {
            if (res.code == 1) {
                me.comp("dt_scroll").loadData(res.data);
                var carousel = me.comp("carousel2");
                $.each(res.data, function(i, obj) {
                    var fImgUrl = me.getImageUrl(obj.showpic);
                    var fAid = obj.aid;
                    var fTitle = obj.title;
                    carousel.add('<span class="ftitle">' + fTitle + '</span><img src="' + fImgUrl + '" class="tb-img1" bind-click="openArticle" aid="' + fAid + '"/>');
                });
                carousel.next();
            }
        };

        Ajax.Api({
            "ctl" : "article",
            "act" : "list",
            "f_s" : "aid,title,showpic,createtime",
            "c_d" : 'channel=news,showpic-/static/images/default.jpg',
            "p_i" : 0,
            "p_s" : 5
        }, callback);
    };

    Model.prototype.dt_topnewsCustomRefresh = function(event) {
        var me = this;
        var callback = function(res) {
            if (res.code == 1) {
                me.comp("dt_topnews").loadData(res.data);
            }
        };
        Ajax.Api({
            "ctl" : "article",
            "act" : "list",
            "f_s" : "aid,title,showpic,createtime",
            "c_d" : "channel=news",
            "p_i" : 0,
            "p_s" : 15
        }, callback);
    };

 

 

步骤6  从列表跳转到详情页

记住，这个toNeed方法一定是绑定在<li>标签上的，就一个事儿，方便

    Model.prototype.toNeed = function(event) {
        var row = event.bindingContext.$object;
        var a = row.val("pid");

        justep.Shell.showPage(require.toUrl('./need/detail.w'), {
            "pid" : a,
        });
    };

 

 

大致来说就这几个步骤吧，因为我的APP也还在开发之中，开发了大概有12个小时了吧···

心得有限，或许还有些错误，开喷前请注意咯

往后陆续补足一些小新的，目前的大致效果如下