项目复盘梳理-03-公众号开发实战

老马啸西风2023年2月13日大约 5 分钟

整体架构

整体排期

【项目立项】：应用申请 + GITLAB + DevOps流水线 + 数据库资源 + 网关

【项目文档】：需求分析拆分 + 应用架构文档 + 接口文档 + 详细设计 + 微信技术调研

【开发实现】：UI 切图 + 前端实现 + 后端实现 

【联调】：后后端联调 + 前后端联调

【测试】：测试用例评审 + 接口测试 + 功能测试

【上线迭代】：微信域名等配置 + 微信菜单配置 + 关注回复等

技术调研

鉴权

微信的鉴权，初期前端逻辑存在缺陷，导致登录死循环。

解决方案：

帮助前端 REVIEW 代码，梳理流程图+实现验证。

后续对于前端复杂的流程，需要 CODE REVIEW 保证质量。

小程序跳转

openlink：可以通过这种方式优雅的打开

小程序编码：最简单的方式，一张小程序码，长按进入。

消息推送

消息模板样式审核周期长，样式和生产不一致。

菜单打开小程序

也需要跟进，不可大意。

前端

现象：并发请求时，如果接口间互相依赖，存在有时失败的情况。

解决方案：调整为串行，但是性能为下降。

反思：后续如果后端可以合并为一个接口的，尽量后端处理。

UI 切图问题

（1）素材缺失

对于无数据的场景缺失，比如绑卡列表为空。

全产品背景图等素材缺失，只提供了部分。

反思：后续素材出来之后，产品+技术一号位+前端研发都需要过一遍，确认没问题之后再让 UI 切图。

而不是后期返工，比较耗时间。

（2）页面样式

开发按照 UI 实现，但是页面不符合产品要求。

临时调整需求，无对应 UI 稿。

反思：后续时间紧急将不再受理此类样式优化需求。页面只有一个标准，那就是 UI 稿。同理需求的标准就是需求文档，要保证及时更新。

（3）图片加载性能问题

产品背景图较大，加载比较慢。

反思：获取素材切图以后，前端研发首先要进行一次图片压缩

微信公众号的一些问题

（1）JS 安全域名等问题。

因为以前项目踩过一次坑，直接移除剩下的域名，结果还是存在问题。

解决方案：已通过4级域名的方案解决。

反思：以后尽量先做确认，而不是思维定式。

（2）域名认证问题

微信的域名需要一个 xxx.txt 文件放在前端的根目录下

（3）微信页面缓存问题

经过实际认证，发现微信确实存在缓存问题。

需要前端打包添加指纹， nginx 添加 no cache 等

https://blog.csdn.net/woyidingshijingcheng/article/details/89926990

浅谈微信页面入口文件被缓存解决方案: https://www.jb51.net/article/148249.htm

代码接口调用问题

两个接口。

其中依赖另一个，有时候两个同时异步。

导致数据取不到，放在调用完成之后。

后续尽量改成让后端统一处理。

系统问题

问题描述：生产环境发现部分的手机无法访问，页面空白。

原因：IOS12 因为安全限制，禁止 header 配置为 *

解决方案：指定配置

https://blog.csdn.net/aloneiii/article/details/122122235

关于跨域请求无法在ios12中正常请求，并且返回状态码为0，后端日志未收到get/post请求，仅收到options请求。

如果你的请求是一个跨域请求，并且你手动添加了请求头，那么就是一个复杂请求，浏览器会先发送一个options请求进行预检（判断是否被服务器允许），预检失败则get/post请求不会正常发送，成功则继续。如果你后端在允许跨域时Access-Control-Allow-Headers: * ，使用了 * 通配符。

在ios12中，* 通配符被禁用，导致options预检时发现是通配符 *，禁止浏览器继续发送get/post请求，此时，请求结束，状态码为0。

解决办法：

1、后端Access-Control-Allow-Headers: * ，不使用通配符 * 。

2、前端不添加请求头，就不会发送options请求。

3、请求不跨域也不会发送options请求