菜鳥級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個小時了吧···

心得有限，或許還有些錯誤，開噴前請注意咯

往后陸續補足一些小新的，目前的大致效果如下