红贝应用架构配置式应用开发示例

叁歲伎倆 2021-11-19 12:14 269阅读 0赞

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

为了方便讲解，采用页面实际效果图和JSON配置代码对照的方式进行介绍，即先给出页面运行的实际效果，再给出对应的JSON配置代码。

1、首页组成要素及功能介绍

爱签到应用包含的展示要素和功能如下：

（1）背景图：该图片每日动态更新，即每天1副新图，可以用于展示公司的品牌、产品或服务项目；

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

（3）分享：该图标按钮位于顶部右侧，可以向其它应用分享该APP；

（4）菜单：该图标按钮也位于顶部右侧，点击后将显示该应用的各个功能菜单；

（5）签到：该图标按钮位于页面的右下方，用于进行签到或签退操作。

以上要素及功能按钮如下图所示：

![1689901-20190519182029777-861001355.jpg][]

图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的所有功能菜单，如下图所示：

![1689901-20190519182156798-1798713054.jpg][]

图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

[Link 1]: https://www.cnblogs.com/appbe/p/10886590.html
[1689901-20190519182029777-861001355.jpg]: /images/20211119/a4de101f62d04a03b1a97ae2cdbad22d.png
[1689901-20190519182156798-1798713054.jpg]: /images/20211119/7fece94ce9f74d0985d06b05e3518960.png