《手機簽到應用的設計與手機定位方法淺析》這篇文章主要介紹了手機定位的幾種方法，下面介紹一下如何通過紅貝應用開發架構，快速實現配置式應用開發。

為了方便講解，采用頁面實際效果圖和JSON配置代碼對照的方式進行介紹，即先給出頁面運行的實際效果，再給出對應的JSON配置代碼。

1、首頁組成要素及功能介紹

愛簽到應用包含的展示要素和功能如下：

（1）背景圖：該圖片每日動態更新，即每天1副新圖，可以用于展示公司的品牌、產品或服務項目；

（2）Logo：可用于展示公司的標志；

（3）分享：該圖標按鈕位于頂部右側，可以向其它應用分享該APP；

（4）菜單：該圖標按鈕也位于頂部右側，點擊后將顯示該應用的各個功能菜單；

（5）簽到：該圖標按鈕位于頁面的右下方，用于進行簽到或簽退操作。

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

圖1 首頁

2、首頁實現的配置代碼

實現如圖1所示的首頁，傳統的WebApp開發方式，首先是采用某個APP開發架構，比如ionic、Framework7、Mobile Angular UI等，但無論是采用哪個架構，都離不開html和JavaScript的編碼，今天給大家介紹的紅貝應用架構，與以上架構的相比，最顯著的特點就是基本不需要html和JavaScript的編碼，整個開發基本都是通過JSON文件配置即可實現，就像搭積木一樣的方便。下面給出首頁的全部配置代碼：

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": "愛簽到" 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 }

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

?

3、功能菜單頁介紹

該頁面列出了愛簽到APP的所有功能菜單，如下圖所示：

圖2 功能菜單頁

?

4、功能菜單頁配置代碼

如圖2所示的功能菜單頁，其實現的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": "愛簽到"}]},{"type": "card-menu","title": "應用貝，讓應用更簡單！","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": "我的請假記錄","click": "app.check-in.my-leave?push=0"}]},{"type": "list","subtype": "icon","list": [{"icoIos": "edit","icoMat": "edit","icoColor": "color-blue","title": "請假申請","click": "app.check-in.leave-add"},{"icoIos": "edit","icoMat": "edit","icoColor": "color-blue","title": "請假審批","click": "app.check-in.leave-audit?push=0"},{"icoIos": "edit","icoMat": "edit","icoColor": "color-blue","title": "發布通知公告","click": "app.check-in.notice-issue"}]},{"type": "list","subtype": "icon","list": [{"icoIos": "gear","icoMat": "settings","icoColor": "color-blue","title": "個性化定制","click": "app.check-in.customize?push=0"}]}] }

　　功能菜單所列的各個頁面，其實現方法類似，全部都可以通過JSON文件進行配置實現。因篇幅所限，就不再一一列舉，感興趣的朋友可以直接瀏覽該應用，查看全部配置代碼。

轉載于:https://www.cnblogs.com/appbe/p/10890151.html

總結

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

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