微信公众号h5开发总结

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

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

1.页面跳转注意事项

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

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

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

2.登录状态的验证

• • h5产品有一个特征，登录流程容易被打乱。
    用户可能从任何一个页面的链接点击进入查看该页面。只要链接不是第一个页面的链接，就会打乱我们原来的登录流程。如果用户是从订单页面链接进入订单页面的，用户就跳过了原来的登录页面。意味着用户就没有登录然后进入了该页面，其实按正常逻辑是一定要登录才能进入该页面的。面对这个情况，有两个处理办法

• 1.进入该页面发现未登录直接跳转到活动页面(首页)，然后走正常流程

• 2.进入该页面发现未登录直接跳转到登录页面，登录成功后再跳转到订单页面，让一切回归正常流程。
  第1种方法，用户会损失一点便利性，但是会带来开发上的逻辑清晰感，避免逻辑错误带给用户的差体验。因为用户从哪个页面进入难以预测，登录后应该跳转哪个页面不好判断。例如如果用户直接从登录页面进来的，从支付完成页面进来的等等。这样可以把事情变得简单。
  第2种方法的好处也有，就是可以接着剩余的流程干活。流程很长，要填写的东西很多时，用户会特别想可以根据剩下的流程来做事情。用户会收藏未完成的步骤，准备好资料好进行剩下的步骤。特别是政府的报名系统。根据合适的情况来处理吧。

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

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

3.特殊情况考虑

• 1.断网， 服务器异常 要有统一的错误处理页面，点击后要刷新页面，尝试是否能够恢复正常
• 2.用户点击的链接或拼接出来的链接不对应任何页面，就要给一个页面不存在的提示。

4.要特别注意iphone x 刘海屏适配，

问题就是这种屏幕的底部有40左右像素不能被用户点击了，如果这个区域有需要点击的按钮，就可能失去功能。特别是固定在底部的按钮，最受这个影响。解决办法很容易，关键是要在开发时注意到这个问题。解决办法可以参考下面这个链接
https://blog.csdn.net/dx18520548758/article/details/80010358

5.ui适配问题
简单就是根据屏幕宽度，对一切进行等比例放大缩小。

6.支付要注意的问题

微信出了一个点金计划(https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/goldplan/chapter1_1.shtml)，如果不开通这个，就会遇到支付完成后不能顺利返回h5页面。解决办法就是开通这个功能，然后对接它的一些api，可以参考如下这个链接
https://blog.csdn.net/CrazBarry/article/details/108790227