也就是上個月開始，臨時受命使用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個小時了吧···

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

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

?

轉載于:https://www.cnblogs.com/daneas/p/6207512.html

總結

以上是生活随笔為你收集整理的菜鸟级WEX5开发之路【用B/S开发经验应用到WEX5的开发中来】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。