菜鸟级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个小时了吧···
心得有限,或许还有些错误,开喷前请注意咯
往后陆续补足一些小新的,目前的大致效果如下