微信充值页面开发总结

上周开发了公司项目的微信充值页面，下面对项目遇到的问题做一个总结。

1、下单流程

前端获取code---把code给后端去获取openID---将openID和订单信息发给后端获取微信支付所需参数（订单号、appid、微信签名等信息）---调起微信支付api---成功回调（失败回调）

2、需求实现

产品需求是用户输入id并查询出昵称，以确定id正确，然后点击金额进行充值。这里有个点，查询昵称的接口在什么时候调用最合适。

开始我是在input的keyup事件里调用，导致用户每输入一个字符就会查询一次，接口调用过多，然后我加了去抖函数，设置在keyup完成1.5s后再调用接口，但是对于复制粘贴的内容无法监听，且

如果使用输入框失去焦点事件，会出现用户点击充值金额昵称才展示，并被微信支付蒙层遮挡看不清楚问题，昵称出现过晚，所以这个方法也不行

 $('.input').keyup(debounce(function () {let id = $('.input').val()if(id.length > 7){getNick(id)}}, 1500))

最后决定监听软键盘的下一步按钮，苹果为send键。

找到了在input外加form标签，使用form的submit事件的方法，可以监听ios软键盘发送按钮，但是安卓不行

</form>

$('#form').submit(function (e) {getNick($('.input').val())
})

还找到一个监听软键盘隐藏的事件

$(document).on('focusout', function () {软键盘收起的事件处理alert('键盘收起')getNick($('.input').val())});

但是这个会导致查询昵称接口请求多次，也不合适

最后采用监听软键盘具体某个键的值的方式来处理，打印event.keyCode来实测各个键盘对应的值，取得ios和安卓回退键值 8 ，安卓下一步按键值9，ios前往按键值13，区分判断

/ 监听软键盘  keycode 回退8 安卓下一步9 ios前往13$(document).keydown(function (event) {if (event.keyCode == 8) {$('.nick').html('')}if (event.keyCode == 9) {getNick($('.input').val())}if(event.keyCode == 13) {getNick($('.input').val())}});

3、兼容性问题

当监听点击事件时，ios不支持click事件，针对此问题，有两种方法解决

方法1，对相应的dom节点添加cursor: pointer; css属性

    $(function(){$('.div').on("click", function(data){console.log("123");});}).div {     cursor: pointer; }

方法2，使用click代替on('click',function(){})

$('.close').click(function () {$('.modal').hide()$('.overlay').hide()})

另外，调用微信支付可以用WeixinJSBridge.invoke，也可以引入wxsjsdk，两种方法目前都可以使用。

转载于:https://www.cnblogs.com/wuyuchao/p/9946575.html

微信充值页面开发总结相关推荐

C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
PyQt模拟微信聊天页面开发
一.引述网上关于Qt模拟微信.QQ的页面开发的多如牛毛,但C++本身来说逻辑上难上手,对只会Python的小伙伴来说太痛苦了. 今天就为大家开个场(下节更精彩),众所周知,要想模拟微信.QQ等这种聊 ...
微信html5页面开发教程,微信网页开发，如何在H5页面中设置分享的标题，内容以及缩略图...
前言最近的需求是做一个移动端H5的长屏广告页,最后需要在微信分享的时候修改文案以及带上图片,这个实现起来也不是很复杂. 实现步骤先绑定域名,先登录微信公众平台进入"公众号设置" ...
php 开发微信h5,微信h5页面开发遇到那些坑
一.首先是ios对时间date()的支持不一样: var date =new Date("2016-05-31 00:00:00"); 这种写法在安卓和pc上都不正常的,唯独在io ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
关于微信H5页面开发中音乐不自动播放的解决方法
我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...
微信的充值页面为啥长这样？（多图）
PMCAFF(pmcaff.com)是中国"非常"in的产品经理社区.汇集160000+会员,8000+业界大咖,致力于为产品人提供专业的产品沙龙.课程培训.求职招聘等服务. 本文 ...
抓包抖音充值页面实现微信支付宝充值抖币,可提供api
抖币充值系统重写升级: 1.支持配置扫码配置多个CK 2.支持生成微信/支付宝支付二维码扫码充值 3.支持微信/支付宝 APP 直接唤醒充值体验如下: 需要的小伙伴可私信留言! 整个开发流 ...
微信公众号：微信H5页面JSAPI充值
微信公众号:微信H5页面JSAPI充值,遇到的一些坑,以及解决方式. 首先说一下微信充值分为很多种:目前我所涉及到的只是APP支付.H5支付.JSAPI支付. 区别: 1.根据不同场景 APP支付:是 ...

微信充值页面开发总结

微信充值页面开发总结相关推荐

最新文章

热门文章