小程序fail 调用支付JSAPI缺少参数: total_fee,小程序web-view支付

小程序fail 调用支付JSAPI缺少参数: total_fee;小程序web-view支付

场景:原先在公众号内做的支付,想通过web-view的方式放到小程序里面,但是发现公众号的支付在小程序中不能用了,所以尝试着小程序与web-view交互着来搞,首先在H5中拿到支付的签名,然后再把这个签名传递到小程序中,用小程序的API进行吊起,吊起后有回调函数,注意原先在公众号内的open_id和app_id都不能用了,要根据小程序的环境重新来拿

在H5中引入小程序sdk  https://res.wx.qq.com/open/js/jweixin-1.3.2.js

首先判断一下是不是小程序环境

    let k;
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') { //判断是否是微信环境
      //微信环境
      wx.miniProgram.getEnv(function (resData) {
        if (resData.miniprogram) {
          // 小程序环境下逻辑 
          k = "true_mini";
        } else {
          //非小程序环境下逻辑
          k = "false_mini";
        }
      })
    } else {
      //非微信环境逻辑
      k = "false_wx";
    }
    console.log("运行环境为"+k);
    return k;


//如果是在小程序中的处理逻辑此处要注意一定要确保签名信息在H5中是无误的,特别要注意package这个字段

 //小程序内发起支付 
 //不知道为什么,拼接的package字符串到了小程序总是会丢失半截,所以用id单独处理
 //比如package传递的时候值是 prepay_id=wx***********************;到了小程序中就变为prepay_id,后面的就没了。。。。所以我做了一下处理
 let u = res.data.data.package;
 let id = u.substr((u.indexOf("prepay_id=")+10),u.length); 
 var params = 'timestamp='+res.data.data.timeStamp+'&nonceStr='+res.data.data.nonceStr+
                           '&paySign='+res.data.data.paySign+'&package='+res.data.data.package+'&id='+id;
  console.log("签名为"+params);
  console.log(id);
  var path = '/pages/wxpay/wxpay?'+params;    //小程序页面的路径
  wx.miniProgram.navigateTo({url: path}); 

//小程序中

onLoad: function (options) {
    console.log(options);
    console.log('prepay_id=' + options.id);
    //这个地方单独传了一个id,这个id就是package的值
    wx.requestPayment({
      timeStamp: options.timestamp,
      nonceStr: options.nonceStr,
      package: 'prepay_id=' + options.id,
      signType: 'MD5',
      paySign: options.paySign,
      success(res) {    //支付成功
        console.log(res);
        wx.navigateBack();    //返回上一级
       },
      fail(err) {    
        if (err.errMsg == "requestPayment:fail cancel"){    
          console.log("支付取消");
          wx.navigateBack();
        }else{
          console.log("支付失败");
          wx.navigateBack();
        }
 
       }
    })
  },

 

你可能感兴趣的:(wx,前端,web前端)