微信小程序 支付功能开发错误总结


Posted in Javascript onFebruary 21, 2017

微信小程序 支付功能开发错误总结

微信小程序支付终于踩完坑了,发现里面坑挺大的,现在发个贴,希望以后入坑的同学可以看一下 :

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=2

业务流程在这里大家看文档的时候可以看到。第一个坑,获取用户的openid,参数一定要拼在url连接上,否则会报{"errcode":40013,"errmsg":"invalid appid, hints: [ req_id: iil1ba0504ns86 ]"}错误

onLoad: function () {
  var that = this
  wx.login({
   success: function (res) {
    if (res.code) {
     //发起网络请求
     wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxaacf22345345cfc7162fe3&secret=83ebd41c3e6f34a49b3a34578063434548ff3f71&js_code=' + res.code + '&grant_type=authorization_code',
      method: "POST",
      success: function (res) {
       that.setData({
        openid: res.data.openid
       })
      }
     })
    } else {
     console.log('获取用户登录态失败!' + res.errMsg)
    }
   }
  });
 }

第二个坑,支付统一下单接口,签名这个坑是比较多人遇到问题的这个是MD5加密经常和签名工具里面的加密签名不一样

签名加密工具地址:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1

签名加密的时候要转成utf-8,加密我用自己的接口进行加密的 digest.update(data.getBytes("utf-8"));

// 统一下单接口获取sign(签名)
 paysignjsapi: function (appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type, key) {
  var self = this;
  //加密签名
  wx.request({
   url: 'http://localhost:8080/XinXingWXApi/wxXcxApi/Md5Encrypt.do',
   method: 'GET',
   data: {
    appid: appid,
    attach: attach,
    body: body,
    mch_id: mch_id,
    nonce_str: nonce_str,
    notify_url: notify_url,
    openid: openid,
    out_trade_no: out_trade_no,
    spbill_create_ip: spbill_create_ip,
    total_fee: total_fee,
    trade_type: trade_type,
    key: key
   },
   //统一下单
   success: function (res) {
    var sign = res.data.strMd5
    var formData = "<xml>"
    formData += "<appid>" + appid + "</appid>" //appid 
    formData += "<attach>" + attach + "</attach>" //附加数据 
    formData += "<body>" + body + "</body>"    //标题
    formData += "<mch_id>" + mch_id + "</mch_id>" //商户号 
    formData += "<nonce_str>" + nonce_str + "</nonce_str>" //随机字符串,不长于32位。 
    formData += "<notify_url>" + notify_url + "</notify_url>" //异步接收微信支付结果通知的回调地址
    formData += "<openid>" + openid + "</openid>"  //用户Id
    formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>" //商户订单号
    formData += "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>"
    formData += "<total_fee>" + total_fee + "</total_fee>" //金额
    formData += "<trade_type>" + trade_type + "</trade_type>"  //公共号支付
    formData += "<sign>" + sign + "</sign>"//签名
    formData += "</xml>"

返回数据解析xml

//请求统一下单接口
    wx.request({
     url: "https://api.mch.weixin.qq.com/pay/unifiedorder",
     method: 'POST',
     data: formData,
     success: function (data) {
      wx.request({
       url: "http://localhost:8080/XinXingWXApi/wxXcxApi/xmlAnalyze.do?strXml=" + data.data,
       method: 'POST',
       success: function (res) {
        var pk = 'prepay_id=' + res.data.prepayId;
        var timeStamp = self.createTimeStamp();
        //获取支付签名,并支付
        self.getsignType(appid, timeStamp, nonce_str, pk, "MD5", key);
       }
      })
     }
    })
   }
  });
 }

第三就是调用支付了,这里也有几个小坑,第一就是appId很多写成appid就不行了,第二个就是preoatid 的参数格式要写对prepay_id=wx2017011711060194dccf725232155886323 第三个就是调用支付的时候报支付签名错误,也需要到签名接口查看签名是否一致,查看参数是否是对的,调用微信支付的时候必须加上appId

getsignType: function (appid, timeStamp, nonce_str, pk, signType, key) {
  var that = this;
  wx.request({
   url: "http://localhost:8080/XinXingWXApi/wxXcxApi/getSignType.hn",
   method: 'GET',
   data: {
    appId: appid,
    timeStamp: timeStamp,
    nonceStr: nonce_str,
    pk: pk,
    signType: signType,
    key: key
   },
   success: function (res) {
    console.log(res.data.paySign)
    var paySign = res.data.paySign
    //调用微信支付
    wx.requestPayment({
     'appId': appid,
     'timeStamp': timeStamp,
     'nonceStr': nonce_str,
     'package': pk,
     'signType': 'MD5',
     'paySign': paySign,
     'success': function (res) {
      console.log(res);
      console.log('success');
     },
     'fail': function (res) {
      console.log(res);
      console.log('fail');
     },
     'complete': function (res) {
      // console.log(res);
      console.log('complete');
     }
    });
   }
  })
 }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
javascript 数组的方法集合
Jun 05 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 #Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
You might like
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
js module大战
2019/04/19 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python map比for循环快在哪
2020/09/21 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
保密工作承诺书
2014/08/29 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
Fluentd搭建日志收集服务
2022/09/23 Servers