第二十七题：开发中有遇到过比较难定位的问题吗？

[KieSun]

开发中有遇到过比较难定位的问题吗？最终你是如何解决的。

去答题

新建了一个大厂真题每日打卡群，有意愿学习打卡的再进，请备注打卡。

[SunshineZJJ]

Ie11中vue项目页面较多的情况下，多开几个页面或者一个页面停留较长时间，websocket偷偷的挂了，导致页面白屏，但是控制台没报错什么的一片白，关闭浏览器，再次打开项目一切正常。
最后是连接后台，前端运行，后台一点点打断点，看到了抛出的异常，原因可能是心跳包有问题（网上找到的，改了点逻辑），最终弃用了它，换成定期检查消息不用websocket项目就正常了。
前期纯前端排查了很久没报错，正常能运行，等一会就全白了……

[52js]

接手别人做的项目，看不懂别人写的代码，又不敢问别人，生怕被公司知道，自己偷偷百度，Google，去群里问人几个小时都没人回复

[Chrisyjs]

rn 相关

• rn 调试工具（react-native-debugger）开启 debugger 退登问题：经过查看研究，jlbSessionId 合并了，开启 debugger 后，会把 jlbSessionId 和 JLBSESSIONID 合并成一个，并且 value 字符串合并，逗号隔开（'123, 123'）。最后将其中一个 jlbSessionId 去掉
• 多栈路由跳转问题：多个路由栈之间跳转，会出现 goback 回退问题，wilBlur 监听失效问题等。自行在 demo 中实验，得知多栈跳转是会有这些问题，goback 也会默认回退到本栈默认路由。最后将所有 rn 路由改为同栈处理
• 安卓键盘获取键盘高度不准确问题：同事反映安卓键盘高度获取不准确，经过研究发现，获取的值是准确的，只不过封装的表情键盘切换组件在 safeAreaView 中使用，整体上移了一段。最终是要将该组件放置在 safeAreaView 外面使用即可

vue 相关

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

[turkyden]

当然有，解决的思路一般是：报错 -> 调试工具 -> 网上搜索共性问题 -> 推演个性问题的形成原因 -> 着手解决

• 做公司内部的低代码开发平台的时候，做出码和 JSX <=> DSL 互转的时候，ATS 错误
• React 组件未做错误边界处理，组件渲染错误，导致页面白屏
• 使用 Puputeer 写爬虫的时候，自动化模拟点击表单提交，无法通过机器人验证测试

[Shinedi]

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

[makejun168]

mark

[zhangyingcai]

这个怎么回答？
有啊，debugger
之前遇到只有线上代码会出问题，本地开服务打开日志

[rookielzy]

3D 地图可视化：

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

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

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

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

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

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

[Red-xiaoshami]

小程序首页已登陆和未登录，要求展示的数据不一样；而小程序的app.js和index.js之间的生命周期没有必然联系，异步的。解决方案：封装一个page页面的js对象，然后每个页面单独引用。

[AbigaiL533]

react在从state里面拿一个数组对象，遍历修改里面每个值的某个属性，然后新的当做参数传走，当时用的是foreach，没有做setState也将state里面的值修改掉了，打了console发现console出来的全是最后的结果，打debugger慢慢前推发现在forEach的时候改变了原对象，后来改成了map方法，解决了这个问题

[1742284240]

这两天就遇到一个，微信小程序获取用户头像和昵称，使用

<button open-type="getUserInfo"  bindgetuserinfo="getUserInfo">获取头像昵称</button>

然后获取到的用户信息是这样的：

所有用户授权的微信昵称和头像都一样，检查了半天，才想起来前些天微信小程序官方说要修改用户授权方式，上官方社区一看，果然是因为小程序官方修改了api的问题，wx.getUserInfo改成了wx.getUserProfile了，正确方式为：

<button bindtap="getUserProfile"> 获取头像昵称 </button>

getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res.userInfo)
      }
    })
  },

现在就可以获取到正确的用户信息了

小程序登录、用户信息相关接口调整说明

[pengpeng9413]

3D 地图可视化：

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

• 首先是进行任务的拆解，将任务分为如下步骤

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

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

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

• 再次进行任务的拆解：

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

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

这个直接用arcgis 就能很好的解决