回顾基于MUI开发的APP

    第一个基于MUI开发的APP,前端后端都是自己一个人开发的,界面虽然中规中矩,但是还是有所搜获。

MUI为何物?性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。mui(https://github.com/dcloudio/mui/)框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。选一个好的框架,还要配一个好的开发工具,HBuilder-飞速编码的极客工具,手指爽,眼睛爽。这个是开发混合app首推的一款开发利器。

    我开发设计的是怎么样的一款APP?这款app是一个小区业委会订制的,用于业委会发布通知,投票,业主在线交流的一个移动端‘平台’,类似一个小的bbs,有讨论吧,通知公告,投票专栏。当时是Android和ios都要提供,最终为了节约成本,便于维护,选用了混合模式。写一套网页,通过转换,即可拥有Android和iOS版本,甚至是公众号都是可以的。

    这款app前端界面后端都服务是自己一个人开发的,界面虽然中规中矩,但是还是有所搜获。整个后台数据都是json格式返回的,加深了对json以及APP后台数据结构的认识,对薄弱的html也有所加强,整体来说受益很深。


  • 对于app的开发,需要先明确前后端交互的数据格式
  • 动手前先要有简单的原型设计
  • 需求和原则问题要妥善处理(比如说需求让你能作弊,我当时是坚决反对,最终由于其他原因还是妥协了)

部分接口返回数据以及界面展示,界面很丑,大神不要喷啊


--帖子列表

{
    "resultData": [
        {
            "list": [
                {
                    "cntent": "?输入框里面有没有?输入框里面有没有?输入框里面有没有?输入框里面有没有?",
                    "title": "帖子地址了!",
                    "uids": "0e1673d35e8b459da75a2e822de5a50a",
                    "imgpath": "http://placehold.it/40x30",
                    "fbr": "系统管理员",
                    "ydcs": 1,
                    "fbsj": "2016-12-23 10:51:34"
                },
                {
                    "cntent": "哈",
                    "title": "喔",
                    "uids": "7d8867035daf458390d20b646ba3c6b0",
                    "imgpath": "http://12.254.135.96:8088/mycoast/updload/87f95454d6624b9fb80086241cdb11f2.jpg",
                    "fbr": "系统管理员",
                    "ydcs": 2,
                    "fbsj": "2016-12-23 10:39:49"
                },
                {
                    "cntent": "佛教史诗般若经",
                    "title": "米粉店",
                    "uids": "12ea4bed9ff042a5bd36f477f2538cb1",
                    "imgpath": "http://12.254.135.96:8088/mycoast/updload/2f4b47261fca49719815470ec2ad5565.jpg",
                    "fbr": "系统管理员",
                    "ydcs": 1,
                    "fbsj": "2016-12-23 10:35:49"
                },
                {
                    "cntent": "哈哈哈哈哈",
                    "title": "大家好你们",
                    "uids": "710f9a89ebf64e68a579a223768927e4",
                    "imgpath": "http://12.254.135.96:8088/mycoast/updload/0572e4364090474db1ed2f1a1337fefb.jpg",
                    "fbr": "系统管理员",
                    "ydcs": 1,
                    "fbsj": "2016-12-23 10:33:40"
                },
                {
                    "cntent": "大家好啊好啊呢吗呀你这样说我的错误号线索赔率真正的财富",
                    "title": "我来自手机上发的帖子",
                    "uids": "a96f681b7c364e16a51f2f33b2cf5a74",
                    "imgpath": "http://12.254.135.96:8088/mycoast/updload/5acb6cf11ec84ab2af9efefd0830155b.jpg",
                    "fbr": "系统管理员",
                    "ydcs": 6,
                    "fbsj": "2016-12-23 09:55:37"
                },
                {
                    "cntent": "来势汹汹的雾霾横扫全国多重要。",
                    "title": "雾霾来袭",
                    "uids": "1482292867615",
                    "imgpath": "http://placehold.it/40x30",
                    "fbr": "系统管理员",
                    "ydcs": 9,
                    "fbsj": "2016-12-21 12:01:39"
                },
                {
                    "cntent": "去闺蜜家玩,闺蜜去卫生间了,她八岁大的小孩跑到我身边问我:“阿姨,你见过新版的100元钱吗”?我说:“当然见过了,我这里还有呢”!小孩:“能给我看看吗”?我将100元钱递给他,这时闺蜜从卫生间出来,小孩笑着对闺蜜说:“妈妈,阿姨给了我一百块钱”!闺蜜:“有没有谢谢阿姨啊”?小孩:“谢谢阿姨……",
                    "title": "阿姨给了我一百块钱",
                    "uids": "1482291785985",
                    "imgpath": "http://placehold.it/40x30",
                    "fbr": "系统管理员",
                    "ydcs": 8,
                    "fbsj": "2016-12-21 11:43:43"
                },
                {
                    "cntent": "说说啊啊",
                    "title": "说说你对物业管理的看法吧",
                    "uids": "1481853084760",
                    "imgpath": "http://placehold.it/40x30",
                    "fbr": "系统管理员",
                    "ydcs": 88,
                    "fbsj": "2016-12-16 09:51:18"
                }
            ]
        }
    ],
    "msg": "true"
}

-- 评论

{
    "resultData": [
        {
            "list": [
                {
                    "objHtml": "<div class='story' id='story'> <div class='opbtn'></div><p class='story_t'>云</p><p class='story_m'>农村路太滑,人心也复杂</p><p class='story_hf'>@大王叫我来巡山:城市套路深!我要回农村</p><p class='story_time' style='float: left;'>2016-12-21 13:58:06</p><a class='story_a' id='1791b7510c3b43739f9eca7a6a54adc2' name='1482224302524' style='float: right;'>回复</a><p class='story_time'></p><p class='story_time'></p></div>"
                },
                {
                    "objHtml": "<div class='story' id='story'> <div class='opbtn'></div><p class='story_t'>大王叫我来巡山</p><p class='story_m'>城市套路深!我要回农村</p><p class='story_hf'></p><p class='story_time' style='float: left;'>2016-12-21 13:37:10</p><a class='story_a' id='78l' name='3' style='float: right;'>回复</a><p class='story_time'></p><p class='story_time'></p></div>"
                },
                {
                    "objHtml": "<div class='story' id='story'> <div class='opbtn'></div><p class='story_t'>阿萨德</p><p class='story_m'>这种孩子还是直接打死算了</p><p class='story_hf'></p><p class='story_time' style='float: left;'>2016-12-21 12:37:10</p><a class='story_a' id='454' name='2' style='float: right;'>回复</a><p class='story_time'></p><p class='story_time'></p></div>"
                },
                {
                    "objHtml": "<div class='story' id='story'> <div class='opbtn'></div><p class='story_t'>看不见</p><p class='story_m'>......</p><p class='story_hf'></p><p class='story_time' style='float: left;'>2016-12-21 11:57:15</p><a class='story_a' id='kl' name='4' style='float: right;'>回复</a><p class='story_time'></p><p class='story_time'></p></div>"
                },
                {
                    "objHtml": "<div class='story' id='story'> <div class='opbtn'></div><p class='story_t'>路过的</p><p class='story_m'>这么可爱的孩子,打死算了</p><p class='story_hf'></p><p class='story_time' style='float: left;'>2016-12-21 11:37:10</p><a class='story_a' id='0524a2ddba7a40f4a7ff897d965fd' name='1' style='float: right;'>回复</a><p class='story_time'></p><p class='story_time'></p></div>"
                }
            ]
        }
    ],
    "msg": "true"
}

--帖子详情(图文混合)

{"resultData":[{"list":[{"objHtml":"<img class='guide-img' src='http://12.254.135.96:8088/mycoast/updload/5acb6cf11ec84ab2af9efefd0830155b.jpg' /><img class='guide-img' src='http://12.254.135.96:8088/mycoast/updload/9214dfac27144fcf8a57996adef46cd7.jpg' /><img class='guide-img' src='http://12.254.135.96:8088/mycoast/updload/50473ed93b084a8b80c32fdef7d72030.jpg' /><img class='guide-img' src='http://12.254.135.96:8088/mycoast/updload/b599a9b65dd643969d01a40af44da52b.jpg' /><p class='content' id='detail' style='text-align: left;font-size: 16px;color: #222;line-height: 32px;word-wrap: break-word;'>大家好啊好啊呢吗呀你这样说我的错误号线索赔率真正的财富<\/p>"}]}],"msg":"true"}

-- 投票结果

{
    "resultData": [
        {
            "list2": [
                {
                    "tplx2": "投票结果(按票数)",
                    "obj": "<p><span style='width:135px;'>2</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>票数:0 |</span><span class='skill-bar-percent'>0%</span></p>"
                },
                {
                    "tplx2": "投票结果(按票数)",
                    "obj": "<p><span style='width:135px;'>121212</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>票数:null |</span><span class='skill-bar-percent'>0%</span></p>"
                }
            ],
            "list": [
                {
                    "bfb1": 0,
                    "zps": 0,
                    "bfb2": 0,
                    "zhs": 291,
                    "tplx": "投票结果(按面积)",
                    "obj": "<p><span style='width:135px;'>2</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>面积:0㎡ |</span><span class='skill-bar-percent'>0%</span></p>",
                    "fwzmj": 59917.15,
                    "zmj": 0
                },
                {
                    "bfb1": 0,
                    "zps": 0,
                    "bfb2": 0,
                    "zhs": 291,
                    "tplx": "投票结果(按面积)",
                    "obj": "<p><span style='width:135px;'>121212</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>面积:0㎡ |</span><span class='skill-bar-percent'>0%</span></p>",
                    "fwzmj": 59917.15,
                    "zmj": 0
                }
            ]
        },
        {
            "list2": [
                {
                    "tplx2": "投票结果(按票数)",
                    "obj": "<p><span style='width:135px;'>2</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>票数:0 |</span><span class='skill-bar-percent'>0%</span></p>"
                },
                {
                    "tplx2": "投票结果(按票数)",
                    "obj": "<p><span style='width:135px;'>121212</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>票数:null |</span><span class='skill-bar-percent'>0%</span></p>"
                }
            ],
            "list": [
                {
                    "bfb1": 0,
                    "zps": 0,
                    "bfb2": 0,
                    "zhs": 291,
                    "tplx": "投票结果(按面积)",
                    "obj": "<p><span style='width:135px;'>2</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>面积:0㎡ |</span><span class='skill-bar-percent'>0%</span></p>",
                    "fwzmj": 59917.15,
                    "zmj": 0
                },
                {
                    "bfb1": 0,
                    "zps": 0,
                    "bfb2": 0,
                    "zhs": 291,
                    "tplx": "投票结果(按面积)",
                    "obj": "<p><span style='width:135px;'>121212</span><i class='skillbar clearfix ' data-percent='100%'><span class='skillbar-bar' style='width:0%; background: rgb(198, 1, 15);'></span></i><span class='skill-bar-percent'>面积:0㎡ |</span><span class='skill-bar-percent'>0%</span></p>",
                    "fwzmj": 59917.15,
                    "zmj": 0
                }
            ]
        }
    ],
    "msg": "true"
}

界面





0

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

点击更换