移动端 kintone 演示环境

cnDevNet发表于:2021年07月26日 11:21:44更新于:2022年08月16日 16:28:17

Index

概述

还记得我们之前制作的PC版的kintone demo环境吗?通过首页自定义的api,让kintone的PC端彻底改头换面。

在大家的呼声和期待中,我们又在移动端通过自定义开发,制作了kintone手机版,整个程序通过vue框架实现,得到了一致好评。

虽然是万众期待,但时间有限,尚未完善的部分在将来会陆续更新。


演示地址

https://kintonedemo.cybozu.cn/k/m/

用户名:demo

密码:cybozusales

建议使用kintone手机客户端访问

※在登录之前,请先同意使用许可协议


移动端demo说明

这次我们推出了5大功能。通过底部的菜单即可切换不同的页面。

门户

效果图

00160ffc743997347629c4b5eb4148d         00160ffc74322a660129181133e2ed6

功能说明

  • kintone内搜索

    • 实现kintone内的用户,应用,空间,主题等的全文检索。

  • 图表BI

    • 通过echarts来绘制图表,数据全部来自于内部应用,实时展示关注的数据。

    • 通过轮播可以展示多个图表。

  • 常用应用

    • 将常用的应用展示在门户页。

    • 通过点击“全部应用”,可以自定义想展示的应用。通过拖拽,排序来调整展示的应用。

    • 各个用户的收藏设置将保存在一个后端的kintone应用中。

    • 拖拽后首页无需刷新即可更新常用应用列表。

  • 数据分析

    • 将后台应用中的数据进行合并,汇总,然后展示在门户上。

通讯录

效果图

00160ffc74392981fccb06f4327452c

功能说明

  • 展示kintone的用户列表。

  • 用户以首字母排序并展示。

  • 关注的用户会以星标模式展示在最前端。

  • 当用户“启用用户和私信功能”时(kintone中进行设置),还能直接和用户私信聊天。

空间

效果图

00160ffc743b89d095db7de4e03addb

功能说明

  • 展示你所参加的空间,及空间中包含的应用。

  • 空间和应用都可以直接点击进入。

收藏

效果图

00160ffc743bc32e6c12f2d2d434171

功能说明

  • 通过读取后台kintone应用的设置,就能在手机前台以瀑布流的方式展示你的应用。

    注意:我们的初衷是通过这个瀑布流布局,来提供一个设计思路,当你觉得应用列表页在移动端展示不够优雅的时候,不妨试下这种方式,将你的应用列表页重排下,是不是会打破沉闷的感觉?

待办

效果图

00160ffcd92dadf400a0e3c142bb7b5        00160ffc743138b50b0608ad630727c

功能说明

  • 日程

    • 和kintone的日历模式紧密结合。通过读取后端日历列表的设置来展示用户的日程安排。

    • 可以切换年份,月份,日期,定位到需要查询的日期。

    • 默认展示当天的日程。

  • 未处理

    • 展示办公、业务流程中的产生的未处理通知,点击后进行流程处理。

    • 统计所有的未处理条数以徽标方式显示在右上角。

百度统计

  • 因为vue,react这些框架创造出来的spa应用,在百度统计中往往只能统计到挂载页面整体的流量。却无法定位到那些通过改变浏览器hash地址的流量。所以我们也通过技术处理,调用baidu统计js的底层api来实现定位每个路由的流量。

整体技术相关

  • 整体ui使用了vant ui, 使用了v-calendar来展示日程。

  • 使用better-scroll做了一个联系人页面,同时用它来解决ios端滚动条等问题。

  • 通过vuedraggable实现了应用拖拽,排序等功能,同时使用vuex来解决跨组件数据共享。

发散

其实通过kintone.proxy等api,你还可以绕开跨域问题,直接在kintone上展示其他系统上的数据。

源码

kintone-samples/sample-kintone-mobile-customize-CN (github.com)

总结

如果你用过原版的移动端,两者对比,是不是发现整个kintone完全变样了?

你完全可以通过kintone强大的自定义能力,来创造出个性化的应用。而这些只需要通过js就能实现。

还不了解kintone的小伙伴赶紧去申请一个免费环境试试吧。相信你能做得更好!