微信充值页面开发总结

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

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').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,两种方法目前都可以使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

Ubuntu14.04下使用fcitx安装搜狗及双拼输入法

之前Ubuntu打不开了,重新装了一遍,顺便把一些东西直接记录下来,省得日后再四处爪哇。。。

51430
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

27350
来自专栏阮一峰的网络日志

文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 ? 网...

37260
来自专栏从零开始学 Web 前端

Sublime Text3 一些实用设置

当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光标呢?然后你可能会花点小功夫找到他,就像你平时找鼠标的时候。这个设置会让让光标所处在的那一行高亮,只是稍微亮...

36920
来自专栏非著名程序员

简单高效的实现 Android App 全局字体替换

Android O推出了一项新的功能「Fonts in XML」,借助这项功能,我们能够像使用其他资源文件一样使用字体,比较方便地实现App全局字体的替换。 为...

35590
来自专栏weixuqin 的专栏

sublime下让代码居中

400130
来自专栏Django中文社区

支持 Markdown 语法和代码高亮

为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言,只要遵循它...

40370
来自专栏PHP技术大全

使用PHP辅助 快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

16530
来自专栏王磊的博客

ReactNative开发工具有这一篇足矣

ReactNative系列文章: 1.《逻辑性最强的React Native环境搭建与调试》 2.《ReactNative开发工具有这一篇足矣》 正文 Rea...

383130
来自专栏君赏技术博客

推荐自用XCODE神器插件

自己爱好就是喜欢钻研有什么好的软件或者插件,之前很热衷于APPCode 但是自从最新版本修复了修改时间就无限制使用BUG 就废弃了,就一直用XCODE。自己因为...

39320

扫码关注云+社区

领取腾讯云代金券