Index
概述
还记得我们之前制作的PC版的kintone demo环境吗?通过首页自定义的api,让kintone的PC端彻底改头换面。
在大家的呼声和期待中,我们又在移动端通过自定义开发,制作了kintone手机版,整个程序通过vue框架实现,得到了一致好评。
虽然是万众期待,但时间有限,尚未完善的部分在将来会陆续更新。
演示地址
https://kintonedemo.cybozu.cn/k/m/
用户名:demo
密码:cybozusales
建议使用kintone手机客户端访问
※在登录之前,请先同意使用许可协议。
移动端demo说明
这次我们推出了5大功能。通过底部的菜单即可切换不同的页面。
门户
效果图
功能说明
kintone内搜索
实现kintone内的用户,应用,空间,主题等的全文检索。
图表BI
通过echarts来绘制图表,数据全部来自于内部应用,实时展示关注的数据。
通过轮播可以展示多个图表。
常用应用
将常用的应用展示在门户页。
通过点击“全部应用”,可以自定义想展示的应用。通过拖拽,排序来调整展示的应用。
各个用户的收藏设置将保存在一个后端的kintone应用中。
拖拽后首页无需刷新即可更新常用应用列表。
数据分析
将后台应用中的数据进行合并,汇总,然后展示在门户上。
通讯录
效果图
功能说明
展示kintone的用户列表。
用户以首字母排序并展示。
关注的用户会以星标模式展示在最前端。
当用户“启用用户和私信功能”时(kintone中进行设置),还能直接和用户私信聊天。
空间
效果图
功能说明
展示你所参加的空间,及空间中包含的应用。
空间和应用都可以直接点击进入。
收藏
效果图
功能说明
通过读取后台kintone应用的设置,就能在手机前台以瀑布流的方式展示你的应用。
注意:我们的初衷是通过这个瀑布流布局,来提供一个设计思路,当你觉得应用列表页在移动端展示不够优雅的时候,不妨试下这种方式,将你的应用列表页重排下,是不是会打破沉闷的感觉?
待办
效果图
功能说明
日程
和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的小伙伴赶紧去申请一个免费环境试试吧。相信你能做得更好!