微信公众号h5开发总结

author author     2023-04-16     764

关键词:

参考技术A

下面是一个公众号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请求,弹框等做了限制,还做了哪些限制没有说,要自己去探索。
3.他会在链接中传递回来 out_trade_no 商户订单号,根据这个字段,方便我们去跳转详情。

具体开发对接参考链接
https://blog.csdn.net/CrazBarry/article/details/108790227

微信支付之扫码支付公众号支付h5支付小程序支付相关业务流程分析总结

前言很久以来,一直想写一篇微信支付有关的总结文档;一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将一... 查看详情

微信公众号开发经验总结

1.               快捷访问1.1  测试公众号注册:​​http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login​​1.2  微 查看详情

微信公众号h5支付-java版

微信开发之微信公众号H5支付-JAVA版 引子 从事JAVA开发一年多了,一直都在看博客园,CSDN的博客,从很多前人哪里学习了很多,突然觉得自己也要尽一份力,写点博客自己给自己做做记录,也给要开发微信人提提醒少遇点... 查看详情

你所误解的微信公众号开发以及微信公众号开发遇到的问题及详解(代码片段)

...、项目赶进度就没把时间花在博客上;今天来说说所谓的微信公众号开发和填坑记录;微信公众号:运行在微信终端的应用(对于开发者来说比较爽的你只需考虑兼容微信浏览器,因为它是在微信浏览器环境下运行的)微信公众... 查看详情

怎么把h5放到微信公众号上

参考技术A  把h5页面放在微信公众号里其实很简单。  先在微信图文区域编写好自己的活动推荐图文  二维码,一般H5页面都有属于自己的一个唯一的二维码,你将二维码放到文章里面,群发出去。  编写好后,可以看... 查看详情

由php开发的h5微信支付接口

想做一个由浏览器打开的网站,点击支付按钮后唤醒手机微信APP支付的功能,网上找了很多资料,零零散散的试着做了下也没有成功,求各位做过这样接口的大神给予帮助。这个必须需要公众号,而且认证后的公众号。开通对应... 查看详情

微信app支付和h5支付的区别

APP支付,微信公众号支付,H5支付,三个是不一样的支付方式,H5支付是通过谷歌或者手机自带浏览器等调转调取支付宝APP或微信APP完成支付的一种方式(非微信内嵌浏览器),而APP支付是通过SDK,所以是有区别的.提供H5支付接... 查看详情

微信公众号怎样直接跳转h5页面?

点击公众号直接跳转目标链接的H5页面,是微信的商品信息功能(商品消息:是特殊类型的图文消息,用户打开后跳转到商户网站的商品详情页,不经过公众平台中间页 ),14年底已经取消了,之前开通这个功能的就可以实... 查看详情

微信公众号营销背后的技术

    微信公众号已成为很多公司/产品线上营销的主战场之一。本文试图分析在开发者模式下,微信公众号营销背后的几个常用技术方案。就目前接触的业务来看,基于微信公众号的营销主要有下面两条线。      其... 查看详情

微信公众号开发模式开启总结

一直没想过要开个微信公众号。想到经营公众号预计跟经营微博一样。像我这样的素养的,肯定没有这样的基因。师兄推荐了一个学经济的妹纸过来请教我微信公众号开发人员模式怎样开启,妹纸请教,那必须上刀山... 查看详情

企业号微信支付公众号支付h5调起支付api示例代码jssdkc#.net

 先看效果:1.本文演示的是微信【企业号】的H5页面微信支付2.本项目基于开源微信框架WeiXinMPSDK开发:https://github.com/JeffreySu/WeiXinMPSDK感谢作者苏志巍的开源精神 一、准备部分相关参数:AppId:公众号的唯一标识(登陆微... 查看详情

公众号h5中wx.config()踩坑

参考技术A微信公众号H5在配置微信参数的时候提示config:fail,Error:系统错误错误码63002,invalidsignature,表示签名有问题。签名的影响因素很多,但对于前端,最大的影响因素就是url参数要给对。url参数需要注意的两个点:1.需要公众... 查看详情

微信公众号开发总结(代码片段)

...个测试号点击进入“网页授权获取用户基本信息”,查看微信授权开发文档一、给测试号设置自定义菜单给测试号设置自定义菜单需要两步操作,这里采用postman工具来进行发送请求1.获取AccessToken请求方式:GET请求地址:https://ap... 查看详情

前端对接微信公众号网页开发流程,前期配置(代码片段)

微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传、图片预... 查看详情

h5如何跳转到微信公众号页面?

参考技术A搜一下:如何调用在h5页面中微信公众号客服功能 查看详情

vue项目使用微信公众号支付总结(代码片段)

微信公众号支付1.使用jssdk调用微信支付,具体查看开发文档;使用的vuex,在mutations中wechatPay(state,data)state.payObject=dataconsole.log(‘微信支付开始请求‘)if(wechat)wx.chooseWXPay(timestamp:state.payObject.timeStamp,//支付签名时间戳nonceStr:sta 查看详情

微信公众号开发入门(代码片段)

...,太难懂了。也太坑了。下面是这几天的,有关微信公众号的工作总结。算不上全面,只是我作为一个初哥的记录,仅以备忘。一、微信公众号开发,开发什么?公众号与小程序不同,小程序类似手机A... 查看详情

关于微信服务号开发的一些总结!

...来还要做成第三方平台。年末先做一波总结!日常使用的微信服务号点击菜单栏,跳转进入网页中心。第一步,在公众号的后台可以设置菜单的跳转链接。需要注意的是https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_u... 查看详情