最近在用uni-app开发项目，也获得了一些感受，分享给大家。
选用背景
最初的期望是用vue去开发h5，后来的需求是可能需要开发app,领导为了节省成本，所以让我们去调研有没有这种混合开发的先例， 初始的调研结果时前端同学推了uni-app, 后端同学推了个flutter，可能是先入为主吧, 那时候并没有系统的去了解flutter,只是看到uni-app,对vue支持度较高,而且可以发布多端，所以就选定了这个框架,下面跟大家一起来聊一聊使用的过程。
搭建并没有采用cli的方式去创建项目 只是选用的默认模板去创建项目
定制菜单栏
如果开发过小程序的话，会发现，其实uni-app的定制菜单栏的配置和小程序是一样的
tabBar可以在page.json进行配置
配置项大致有以上几点 包括:
文字颜色 color字段 选中文字颜色, selectedColor字段
需要注意的是list选项 其类型是一个数组 数组里头的对象可以配置如下属性:
text:文本、 pagePath: 页面路径、 iconPath: icon的路径、 selecteIconPath:选中时icon的路径
特别提示 list的长度最小是2,最大是5
官方和一些文章都推荐使用默认的tabBar配置 一方面是体验较好，但是默认的tabBar无法限定权限 做着好像比较费劲 我的项目第一版完结的时候也是使用的默认tabBar， 权限的问题还没有解决。 还有一个缺点是默认的tabBar无法自定义样式 配置好的样式虽然规范 但是会引起设计同学的不满。 这也是比较头疼的一点 做这一块的时候 跟设计扯皮了好久。
附上最后的tabBar样式
附上原文tabBar的说明连接
uniapp.dcloud.io/api/ui/tabb…
http请求
这里我是将我们pc封装的axios直接拿来复用,目的是为了进行统一的拦截处理等。不做过多解释
uni-app本身也给出了一个类似于axios的api 无需过多封装 拿来即用 可以结合缓存使用
缓存api
缓存api我项目中也没有做二次处理 就是拿来即用 个人觉得如果不是很多人同时维护的话， 二次处理的意义不大
组件
uni-app官方提供了一套组件用来开发移动端业务,
另外插件市场也有一些质量比较高的组件，可以供大家选择或下载使用
文档api
基本与小程序类似
我项目中常用的api基本集中在 网络模块，数据缓存模块，路由与页面跳转模块，界面交互模块 等这是最常用的api的所属模块，其余用到的次数相对占比不多
图表
官方推荐的图表库是ucharts常用的图表类型基本都可以满足 如柱状图 环形图 混合图等等维护的态度也比较好 社区也比较活跃，可能无法满足一些定制化的需求，但是维护者也提倡手动去更改源码，达到效果
图表注意事项
适配问题 在不同的手机屏幕上 需要给出的图表比例是不一样的 需要手动计算出图表的占位大小 然后进行绘制 不然造成各个设备编译效果不同的差异
部分代码如下：
绘制出来的页面
ps:(如果大家在使用ucharts绘制图表的过程中 有什么问题 或者难点可以一起来探讨!)
生命周期
uni-app不仅支持vue的生命周期 还另外给出了一些钩子方便开发者使用，如下生命钩子并非所有平台都支持,
我常用的生命钩子 包括 onShow,onLoad,onBackPress
长列表页面与生命周期的结合
描述一个场景，b和c代表的tab内容，展示的都是长列表如新闻列表， 需求是当点击或者切换tab进入时需要重新调用服务端的接口，当从列表详情返回时，不需要重新调用服务端的接口 详情页是单独的一个页面，大家可以思考一下怎么实现
实现步骤如下：
最开始我的初始化方法都是写在onLoad函数中，发现在tab切换的时候,不会重新调用初始化的方法，当改成onShow时
虽然每次页面显示都会进行重新渲染，可是跟预期的实现还是有一些不同
这时解决的办法有两种，第一使用全局变量，第二使用缓存标记
思路是当进入详情页，或查看详情动作触发的时候，置入缓存中一个标记，在每个页面加载的时候将改缓存标记取反，当前列表页除外, 在当前列表页的onShow中判断缓存中的标记，根据状态决定是否调用初始化的方法，最后达到需求。
附图如下：
文末要说的话
第一次开发跨端的应用，感觉uni-app虽然无法达到原生的体验，但是同时发布到三端，h5, ios,android的页面效果还是挺好的。
还有一些安卓 和ios等平台编译的差异 有空也会整理出来。 大家如果也在采坑uni-app可以一起来交流。
