微信公众号h5开发总结

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

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

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

总结

1. 按需登录的页面流程里，一定要做到返回时不再进入登录页面 。

2. 流程完结后就不能再返回到过程页面 。

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

h5产品有一个特征，登录流程容易被打乱 。

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

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

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

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

第1种方法，用户会损失一点便利性

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

第2种方法的好处也有，就是可以接着剩余的流程干活

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

有些页面是不需要处于登录状态也可以进入查看的

例如活动页面(首页)，登录页面，错误报告页面(如断网，服务器错误，访问的链接页面不存在)

这里要做好判断

问题就是这种屏幕的底部有34左右像素不能被用户点击了，如果这个区域有需要点击的按钮，就可能失去功能。

如图

解决办法可以参考下面这个链接

https://blog.csdn.net/dx18520548758/article/details/80010358

5.ui适配问题

简单就是根据屏幕宽度，对一切进行等比例放大缩小。

采用微信公众号的支付方式时，支付完成后不能顺利返回h5页面。

原因就是 微信今年6月份出了一个点金计划，必须开通对接它才能顺利返回H5页面

点金计划是干什么，先看图

微信想收割支付的流量，在支付完成页面展示广告，幸好不是特别流氓，让你有选择不展示广告

特别说明

微信支付有四种商户，普通商户，服务商，渠道商，特约商户(服务商下的子商户)。

只有服务商能够开通点金计划，且是必须开通。所以 如果是服务商使用微信公众号支付 就必须开通点金计划。如果是普通商户使用微信公众号支付，就没有这个限制 。

具体看链接

( https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/goldplan/chapter1_1.shtml )

开发中的注意事项

1.微信用iframe托管了我们的支付完成页面，

2.对读写缓存，发送http请求，d框等做了限制，还做了哪些限制没有说，要自己去探索。

3.他会在链接中传递回来 out_trade_no 商户订单号，根据这个字段，方便我们去跳转详情。

具体开发对接参考链接

https://blog.csdn.net/CrazBarry/article/details/108790227

微信公众平台上做HTML5游戏，基本的有三个法子。

1 阅读原文中添加链接。但，如果这样坐引导的文章一定要做好来，不然转换率会很低的。千万要走心一点，不要平白无故的就放在阅读原文，谁看？反正俺是不会看的。

2 图片的形式，在图片中添加入h5的二维码。别人只要长按就可识别二维码跳转到你的h5去，什么图片你随意，例如植入到节日的场景啊、各种动漫图片均可。同样要做好引导，才能引发转化。

3 最直接的形式，你们大部分可能都实现不了，以前公众号有一种功能可以开通，叫直接跳转，也就是只要点击标题就可以直接看到h5，但据我所知现在这个功能申请不了，也就是大多数人都实现不了，原来申请通过的才可以。

另外需要了解HTML5用什么软件制作的，一般的有maka、易企秀、兔展。

选择毋庸赘述，可以都尝试一下，都是较为简单上手的，如果你觉得逼格不够，可以用互动大师。用这些软件如果自己有一定的设计能力做出简易的h5页面基本是没有问题啦。

但如果是很复杂炫技的h5，一些是可以在前面提及的平台的模板处购买，一些是找第三方公司做的。

制作的小贴士：

1 不要用原生字体、真的好hi丑，自己选好看的字体然后做成png格式，然后放进去。

2 如果你有设计能力，最好把图层分开放进去，才能设置每个不同的动态动画。也就是不要做整张图放进去，其实一页可能是好几张图甚至十来张图。

3 如果你自己没有设计能力，那还是在平台上找模板吧。。。然后配合自己的文案。尤其是节日类的h5，模板一搜一大堆，但即便是用模板，也请走走心，不要全特么照搬过来一句话不改。

4 如果不会用ps，去练习用美图秀秀，基础效果基本没多大问题。

5 如果你连png都不会做，艺术字体在线生成器 艺术字转换器 这个神器送给你，大把字体你挑。

6 如何插入报名表 免费制作报名网页 报名表设置后可在后台查看以及下载excel模式。

7 文字尽量少而美，没人愿意看你长篇大论，尤其是h5.

8 文字太多、页面太复杂要注意，很可能造成打开的时候回很卡。

---