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


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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
React父子组件间的传值的方法
Nov 13 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
thinkphp分页实现效果
2016/10/13 PHP
JavaScript 的继承
2011/10/01 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
python检测是文件还是目录的方法
2015/07/03 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
详解Python的三种拷贝方式
2020/02/11 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
简历上的自我评价怎么写
2014/01/28 职场文书
超市采购员岗位职责
2014/02/01 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
外贸专业求职信
2014/03/09 职场文书
委托公证书范本
2014/04/03 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技