微信公众号h5开发总结

2020-10-19 本文已影响0人前端人

下面是一个公众号h5页面流程，说一下流程的功能，用户看到一个营销活动，选人报名支付参加该活动。

123流程图.png

下面从8个点说明要注意的事情

1.页面跳转注意事项

h5页面运行在浏览器里(运行在微信里的情况也是微信里内嵌了一个浏览器)，浏览器默认提供了返回按钮，用户在操作返回按钮时，就有可能出现一些影响体验的事情，需要在开发是进行规避，如下。

从登录页面跳转到选人页面后，用户点击返回，不应该再返回登录页面。而应该是活动页面。因为已经登录了。
支付完成后返回不应该返回到订单页面了，应该是不能返回了，所有的过程页面应该销毁了。只能点击查看活动详情。

总结
1.按需登录的页面流程里，一定要做到返回时不再进入登录页面。
2.流程完结后就不能再返回到过程页面。
3.不是所有的情况都不能再返回上一步，因为用户有反悔的需要。所以又要容许用户返回上一步进行反悔。例如用户进入订单页面后，肯定有可能需要返回重新选择报名人员。所以开发产品时要注意分别对待，不能一律不能返回了。

2.登录状态的验证

h5产品有一个特征，登录流程容易被打乱。
用户可能从任何一个页面的链接点击进入h5程序。只要链接不是第一个页面的链接，就会打乱我们原来的登录流程。如果用户是从订单页面链接进入h5程序，用户就跳过了原来的登录页面。意味着用户就没有登录然后进入了该页面。

出现这个现象主要应该分享给别人造成的，难以预估用户从哪个页面分享出去

image.png

如图三种可能性。按正常逻辑是一定要登录才能进入该页面的。

面对这个情况，有两个处理办法

1.进入该页面发现未登录直接跳转到活动页面(首页)，然后走正常流程
2.进入该页面发现未登录直接跳转到登录页面，登录成功后再跳回用户想进入的页面，让一切回归正常流程。

第1种方法，用户会损失一点便利性
但是会带来开发上的逻辑清晰感，避免逻辑错误带给用户的差体验。因为用户从哪个页面进入难以预测，登录后应该跳转哪个页面不好判断。例如如果用户直接从登录页面进来的，从支付完成页面进来的等等。这样可以把事情变得简单。

第2种方法的好处也有，就是可以接着剩余的流程干活
流程很长，要填写的东西很多时，用户会特别想可以根据剩下的流程来做事情。用户会收藏未完成的步骤，准备好资料好进行剩下的步骤。特别是政府的报名系统。根据合适的情况来处理吧。

有些页面是不需要处于登录状态也可以进入查看的
例如活动页面(首页)，登录页面，错误报告页面(如断网，服务器错误，访问的链接页面不存在)
这里要做好判断

总结开发时哪些页面要验证登录状态哪些页面不要验证登录状态，需要分清楚。然后登录后应该往哪个页面跳要考虑清楚。

3.特殊情况考虑

1.统一的错误处理页面
断网，服务器异常要有点击后要刷新页面，尝试是否能够恢复正常
2.链接错误，就要给一个页面不存在的提示。
例如这个链接 https://huodong-h5.zzpxx.com/#/active_detail1?id=164
主体部分https://huodong-h5.zzpxx.com是对的，
就是#后的内容/active_detail1?id=164(正确的应该是/active_detail?id=164) 是错误的，就应该有个错误提示，如

image.png
这种错误概率不高，但是有可能。错误处理成本也低，所以可以重视一下。