移动端开发(vue,vuex,vantui)

概述

如何用vue做移动端的自定义开发？下面这个例子希望能给到你帮助

移动端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的脚手架“create-kintone-app”，简化了kintone的自定义开发。感兴趣小伙伴的可以参考以下系列文章：“Webpack5+vscode搭建kintone开发环境”。

发散

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

具体demo和源码请参考

移动端 kintone 演示环境 - cybozu - cybozu开发者网站 (kf5.com)https://cybozudev.kf5.com/hc/kb/article/1520799?from=csdn