红贝应用架构配置式应用开发示例-CSDN博客

《手机签到应用的设计与手机定位方法浅析》这篇文章主要介绍了手机定位的几种方法，下面介绍一下如何通过红贝应用开发架构，快速实现配置式应用开发。

为了方便讲解，采用页面实际效果图和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