《手機(jī)簽到應(yīng)用的設(shè)計(jì)與手機(jī)定位方法淺析》這篇文章主要介紹了手機(jī)定位的幾種方法，下面介紹一下如何通過(guò)紅貝應(yīng)用開(kāi)發(fā)架構(gòu)，快速實(shí)現(xiàn)配置式應(yīng)用開(kāi)發(fā)。

為了方便講解，采用頁(yè)面實(shí)際效果圖和JSON配置代碼對(duì)照的方式進(jìn)行介紹，即先給出頁(yè)面運(yùn)行的實(shí)際效果，再給出對(duì)應(yīng)的JSON配置代碼。

1、首頁(yè)組成要素及功能介紹

愛(ài)簽到應(yīng)用包含的展示要素和功能如下：

（1）背景圖：該圖片每日動(dòng)態(tài)更新，即每天1副新圖，可以用于展示公司的品牌、產(chǎn)品或服務(wù)項(xiàng)目；

（2）Logo：可用于展示公司的標(biāo)志；

（3）分享：該圖標(biāo)按鈕位于頂部右側(cè)，可以向其它應(yīng)用分享該APP；

（4）菜單：該圖標(biāo)按鈕也位于頂部右側(cè)，點(diǎn)擊后將顯示該應(yīng)用的各個(gè)功能菜單；

（5）簽到：該圖標(biāo)按鈕位于頁(yè)面的右下方，用于進(jìn)行簽到或簽退操作。

以上要素及功能按鈕如下圖所示：

圖1 首頁(yè)

2、首頁(yè)實(shí)現(xiàn)的配置代碼

實(shí)現(xiàn)如圖1所示的首頁(yè)，傳統(tǒng)的WebApp開(kāi)發(fā)方式，首先是采用某個(gè)APP開(kāi)發(fā)架構(gòu)，比如ionic、Framework7、Mobile Angular UI等，但無(wú)論是采用哪個(gè)架構(gòu)，都離不開(kāi)html和JavaScript的編碼，今天給大家介紹的紅貝應(yīng)用架構(gòu)，與以上架構(gòu)的相比，最顯著的特點(diǎn)就是基本不需要html和JavaScript的編碼，整個(gè)開(kāi)發(fā)基本都是通過(guò)JSON文件配置即可實(shí)現(xiàn)，就像搭積木一樣的方便。下面給出首頁(yè)的全部配置代碼：

1 { 2 "id": "app.check-in", 3 "wallpaper": "http://cn.bing.com/th?id=OHR.BluebellBeech_ZH-CN8269343251_480x800.jpg&rf=LaDigue_480x800.jpg&pid=hp", 4 "component": [ 5 { 6 "type": "navbar", 7 "subtype": "transparent", 8 "colorCls": "color-white", 9 "list": [ 10 { 11 "type": "left", 12 "icoIos": "icon icon-back", 13 "icoMat": "icon icon-back", 14 "class": "back link", 15 "click": "Be.router.clear('app.check-in')" 16 }, 17 { 18 "type": "title", 19 "text": "愛(ài)簽到" 20 }, 21 { 22 "type": "right", 23 "icoIos": "share", 24 "icoMat": "share", 25 "class": "link icon-only", 26 "click": "doShareApp('app.check-in')" 27 }, 28 { 29 "type": "right", 30 "icoIos": "menu", 31 "icoMat": "menu", 32 "class": "link icon-only", 33 "click": "app.check-in.menu" 34 } 35 ] 36 }, 37 { 38 "type": "floating-action", 39 "list": [ 40 { 41 "subtype": "button", 42 "class": "fab fab-right-bottom color-red", 43 "icoIos": "add", 44 "icoMat": "add", 45 "click": "appCheckIn('1','100000','ip','ip1','')" 46 } 47 ] 48 }, 49 { 50 "type": "content", 51 "list": [ { "text": "<p style=\"margin:0 auto;width:120px;height:120px;\"><img style=\"width:120px;height:120px;border-radius:50%;opacity:0.8\" src=\"{url}/Assets/img/app-checkIn.gif\" /></p>" } ] 52 }, 53 { 54 "type": "content", 55 "list": [ { "text": "<div id=\"div-check-in-notify\" style=\"position:fixed;bottom:15px;width:75%;\"></div>" } ] 56 } 57 ] 58 }

以上代碼通俗易懂，大家對(duì)照首頁(yè)的圖示查看，基本就可以明白。

?

3、功能菜單頁(yè)介紹

該頁(yè)面列出了愛(ài)簽到APP的所有功能菜單，如下圖所示：

圖2 功能菜單頁(yè)

?

4、功能菜單頁(yè)配置代碼

如圖2所示的功能菜單頁(yè)，其實(shí)現(xiàn)的JSON配置代碼如下：

{"id": "app.check-in.menu","component": [{"type": "navbar","subtype": "cover","colorCls": "color-white","list": [{"type": "left","icoIos": "icon icon-back","icoMat": "icon icon-back","class": "back link","click": "app.check-in?reload=1"},{"type": "title","text": "愛(ài)簽到"}]},{"type": "card-menu","title": "應(yīng)用貝，讓應(yīng)用更簡(jiǎn)單！","image": "{url}/assets/img/cover-my.jpg"},{"type": "list","subtype": "icon","list": [{"icoIos": "bulb","icoMat": "lightbulb_outline","icoColor": "color-blue","title": "通知公告","click": "app.check-in.notice?push=0"}]},{"type": "list","subtype": "icon","list": [{"icoIos": "list","icoMat": "event_note","icoColor": "color-blue","title": "我的簽到記錄","click": "app.check-in.my?push=0"},{"icoIos": "list","icoMat": "event_note","icoColor": "color-blue","title": "我的請(qǐng)假記錄","click": "app.check-in.my-leave?push=0"}]},{"type": "list","subtype": "icon","list": [{"icoIos": "edit","icoMat": "edit","icoColor": "color-blue","title": "請(qǐng)假申請(qǐng)","click": "app.check-in.leave-add"},{"icoIos": "edit","icoMat": "edit","icoColor": "color-blue","title": "請(qǐng)假審批","click": "app.check-in.leave-audit?push=0"},{"icoIos": "edit","icoMat": "edit","icoColor": "color-blue","title": "發(fā)布通知公告","click": "app.check-in.notice-issue"}]},{"type": "list","subtype": "icon","list": [{"icoIos": "gear","icoMat": "settings","icoColor": "color-blue","title": "個(gè)性化定制","click": "app.check-in.customize?push=0"}]}] }

　　功能菜單所列的各個(gè)頁(yè)面，其實(shí)現(xiàn)方法類似，全部都可以通過(guò)JSON文件進(jìn)行配置實(shí)現(xiàn)。因篇幅所限，就不再一一列舉，感興趣的朋友可以直接瀏覽該應(yīng)用，查看全部配置代碼。

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

總結(jié)

以上是生活随笔為你收集整理的红贝应用架构配置式应用开发示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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