You're never really done for, as long as you‘ve got a good story and someone to tell it to.

项目中遇到的问题和难点

  • rn 调试工具(react-native-debugger)开启 debugger 退登问题:经过查看研究,jlbSessionId 合并了,开启 debugger 后,会把 jlbSessionId 和 JLBSESSIONID 合并成一个,并且 value 字符串合并,逗号隔开('123, 123')。最后将其中一个 jlbSessionId 去掉

  • 多栈路由跳转问题:多个路由栈之间跳转,会出现 goback 回退问题,wilBlur 监听失效问题等。自行在 demo 中实验,得知多栈跳转是会有这些问题,goback 也会默认回退到本栈默认路由。最后将所有 rn 路由改为同栈处理

  • 安卓键盘获取键盘高度不准确问题:同事反映安卓键盘高度获取不准确,经过研究发现,获取的值是准确的,只不过封装的表情键盘切换组件在 safeAreaView 中使用,整体上移了一段。最终是要将该组件放置在 safeAreaView 外面使用即可

  • 数据响应式失效问题:ref 调用子组件外部传入数据 item,然后请求返回结果,在 item 上修改 teacherId,但是页面中不渲染最新结果。经过研究发现是 item 上本来没有 teacherId 属性。最后用 this.$set 添加响应式

  • 做公司内部的低代码开发平台的时候,做出码和 JSX <=> DSL 互转的时候,ATS 错误

  • React 组件未做错误边界处理,组件渲染错误,导致页面白屏

  • 使用 Puputeer 写爬虫的时候,自动化模拟点击表单提交,无法通过机器人验证测试

  • 开发一个活动,一进入页面就会去获取配置,某天这个接口失败告警数量增多,但是页面可以正常访问。查看错误日志,发现所有的错误信息都是来自同一个活动id,并且这个活动是被外投的,猜测可能是外投渠道的用户大多没有登录态,需要去登录,导致这个请求被中断引起的。解决方案:先判断是否登录,登录完成后再去拉取配置信息。修改完成,发布上线后再观察,失败次数明显降低

3D 地图可视化:

业务中需要做一个 3D 地图的数据可视化效果,需要在一个 3D 的中国板块地图上展示每个省份的数据,这个数据要以柱体呈现,并且柱体高度不一,对应省份的数据越大其版块背景色越深。由于当时公司里没有人有相关的经验,因此这能自己去查找资料研究。

  • 首先是进行任务的拆解,将任务分为如下步骤
    • 首先是将中国地图展示在页面上,这一步通过 ECharts 可直接实现
    • 然后就是根据不同省份的数据设置对应版块的背景色深浅,迫于 ECharts 中 3D WebGL 的文档不够详细,因此自己通过谷歌搜寻了大量资料与示例,定位到每个省份的数据都是独立的,因此可以尝试对每个省份数据进行区间划分并尝试形成对应的映射关系,最后通过 VisualMap 实现
    • 最后是省份版块上的柱体展示,发现要在地图上设置柱体的位置,必须根据地图的经纬度来设置;然后发现 ECharts 中 3D 柱体无法通过经纬度进行设置。

至此,发现 ECharts 的 3D WebGL 并无法满足业务需求,并且产品后续还加了一些特殊需求,要将部分省份根据电力负责区域进行划分,譬如河北省需要划分为冀北与冀南。

然后自己再次搜寻了部分资料,推出利用地图版块边缘的阴影效果来模拟 3D 效果,但需要砍掉 3D 中的可随意变换视角的功能;与产品经理沟通后确认使用该方案。

  • 再次进行任务的拆解:
    • 同样是将地图展示在页面上,由于前面提到的需要对部分省份进一步划分区域,因此无法直接使用 ECharts 内置的 chinaMap;查阅资料发现,地图实际是有国际标准的,使用的都是 GeoJSON。通过对应的文档工具顺利完成了业务需要的地图版块效果
    • 然后仍然是省份的背景色,这里可以复用之前的方案,用 VisualMap 完成
    • 最后的柱体展示也顺利通过 GeoJSON 提供的经纬度数据进行完美展示
    • 完成度达到 90% 时,发现有些细节,譬如柱体遮住了省份名称;南海诸岛的加入导致地图高度过大,无法在一屏展示等问题;这类问题都无法在官方文档、网络资料上找到解决方案,因此通过一些类似的示例来重复实验才完成整体的业务需求。

整个业务开发大概持续了一周的时间,并且在整个过程中,主要还是通过自身大量查询资料,积极与产品经理沟通来完成任务。最后上线后也与同事进行了分享,避免以后有类似的问题再次花费大量不必要的时间。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×