微信充值頁面開發總結

上週開發了公司項目的微信充值頁面，下面對項目遇到的問題做一個總結。

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，兩種方法目前都可以使用。