也就是上個(gè)月開(kāi)始，臨時(shí)受命使用WEX5來(lái)開(kāi)發(fā)一個(gè)APP。在此之前我也是聽(tīng)說(shuō)過(guò)這個(gè)軟件的消息的，據(jù)說(shuō)是開(kāi)發(fā)速度特別快，只要會(huì)一點(diǎn)點(diǎn)開(kāi)發(fā)的人都會(huì)用。

屁話那么多，說(shuō)干就開(kāi)始干，一口氣把官方提供的視頻全看完了，然后得出一個(gè)結(jié)論“懵逼”。

這個(gè)軟件是個(gè)啥玩樣兒？

疑惑之處在于這個(gè)軟件N不像，前端UI用拖拽，可編程部分用JS面向?qū)ο?#xff0c;后端代碼又是靠拖拽，那我要是自定義一個(gè)方法該腫么辦？？？

我想上面的這些個(gè)東西是很多初次使用wex5的朋友所疑惑的。

作為管理學(xué)院的硬件技術(shù)人員出身的程序員，我這次用幾個(gè)小步驟教一下正在嘗試用WEX5的朋友。以下用銅梁視窗APP開(kāi)發(fā)為例：

步驟1 ?新建一個(gè)應(yīng)用，默認(rèn)的就好

步驟2 ?確定你這個(gè)應(yīng)用應(yīng)該包含哪些功能并新建目錄

步驟3 ?做個(gè)萌萌噠首頁(yè)

這三部呢大概做完了就是下面這張圖的樣子，大概花得到幾分鐘時(shí)間去新建各種東西吧

?

步驟4 ?給首頁(yè)拖各種布局上去

拖放布局的時(shí)候請(qǐng)注意下方圖片，需要分為以下幾個(gè)小步驟

① 我們底部的那個(gè)導(dǎo)航欄什么的要用X-CARD樣式去做，別想著自己花個(gè)幾天做個(gè)自覺(jué)高大上的導(dǎo)航出來(lái)，其實(shí)做出來(lái)都或多或少差強(qiáng)人意的，還不如直接用他們的，自己寫(xiě)好CSS就好

②看到左邊的那些個(gè)content沒(méi)有，還是需要去看看官方視頻的解釋

③注意一下的幾個(gè)row，表示的是每個(gè)功能由他們分別涵括，就跟html里面的div一樣的，之后要填充的數(shù)據(jù)也都直接放進(jìn)去就行啦

④那個(gè)windocontainner什么的其實(shí)就是引用了某個(gè)程序頁(yè)面，跟php里面的include是一個(gè)意思

步驟5 ?給各種布局填充數(shù)據(jù)

填充數(shù)據(jù)什么的基本課還是需要花10分鐘看一下官方視頻，但是我這里用來(lái)綁定數(shù)據(jù)的方法不是用的官方默認(rèn)方法，是用的API動(dòng)態(tài)獲取并加載的

?

大概就是下面的這兩段代碼，一段是說(shuō)如何給那個(gè)輪播控件綁定數(shù)據(jù)，一段是給上圖list插件綁定數(shù)據(jù)，本段代碼都是沒(méi)有緩存的，自己需要就自己想把

?

// 加載頁(yè)面的時(shí)候加載輪播圖Model.prototype.dt_scrollCustomRefresh = function(event) {/** 1、加載輪換圖片數(shù)據(jù) 2、根據(jù)data數(shù)據(jù)動(dòng)態(tài)添加carouse組件中的content頁(yè)面 3、如果img已經(jīng)創(chuàng)建了，只修改屬性* 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 ?從列表跳轉(zhuǎn)到詳情頁(yè)

記住，這個(gè)toNeed方法一定是綁定在<li>標(biāo)簽上的，就一個(gè)事兒，方便

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

?

?

大致來(lái)說(shuō)就這幾個(gè)步驟吧，因?yàn)槲业腁PP也還在開(kāi)發(fā)之中，開(kāi)發(fā)了大概有12個(gè)小時(shí)了吧···

心得有限，或許還有些錯(cuò)誤，開(kāi)噴前請(qǐng)注意咯

往后陸續(xù)補(bǔ)足一些小新的，目前的大致效果如下

?

轉(zhuǎn)載于:https://www.cnblogs.com/daneas/p/6207512.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。