微信公众号开发之微信支付代码记录的实现

网络编程 2024/11/20 佚名

3 1 2

需求说明

这个需求说明是完全没有必要的，但是还是写一下吧，但凡是做公众号的，一般都是需要了解这个微信支付的，不然基本的业务都没办法走，所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的。记录的是jsapi支付，别的支付方式暂时没有记录，也就是拉起来付款界面的支付。

微信支付产品

https://pay.weixin.qq.com/static/product/product_index.shtml#payment_product

微信开发步骤

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php"color: #ff0000">支付接口

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php"htmlcode">

function onBridgeReady(){
 WeixinJSBridge.invoke(
  'getBrandWCPayRequest', {
   "appId":"wx2421b1c4370ec43b",  //公众号名称，由商户传入  
   "timeStamp":"1395712654",   //时间戳，自1970年以来的秒数  
   "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串  
   "package":"prepay_id=u802345jgfjsdfgsdg888",  
   "signType":"MD5",   //微信签名方式：  
   "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
  },
  function(res){
  if(res.err_msg == "get_brand_wcpay_request:ok" ){
  // 使用以上方式判断前端返回,微信团队郑重提示：
   //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
  } 
 }); 
}
if (typeof WeixinJSBridge == "undefined"){
 if( document.addEventListener ){
  document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
 }else if (document.attachEvent){
  document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
  document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
 }
}else{
 onBridgeReady();
}

这段是官方的源码，我们是可以直接拿来使用的，这里主要是展示一下腾讯的签名是怎么生成的：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php"color: #ff0000">看源码

废话不说了，既然是记录，就直接贴源码：

步骤很简单：
根据js拿到code
根据code获取openid
根据openid获取到预付id
根据预付id加上一些必要参数拉起支付
判断支付的成功与否进行相应的操作

  /**
  * @_fun_jsapi 拉起微信付款的界面
  */
  _fun_jsapi(order_no) {
  let that = this
  let openid = sessionStorage.getItem('openid')
  if (openid && that.timestamp && that.nonceStr) {
   request({
   method: 'post',
   url: Constants.host_jsapi + api.jsapi,
   data: {
    out_trade_no: order_no, //商家订单号
    total_fee: that.account_price * 100,
    product_id: '8501', //所含产品id
    body: '微信公众号订房-颐陆科技', //订单简述 128字符（中文32位）
    detail: '',  //订单详情 60000字符 （中文1500位）
    fee_type: '',  //币种 缺省值CNY
    attach: '',  //用户附加字串，原样返回
    limit_pay: '', //限制字串 例：no_credit 不收信用卡
    goods_tag: '', //订单优惠标记
    openid: openid, //仅在jsapi中会使用
   }
   }).then((res) => {
   //alert(JSON.stringify(res))
   if (res.data.result_code === 'SUCCESS') {
    that.prepay_id = res.data.prepay_id
    that.timestamp = res.data.time_stamp
    that.nonceStr = res.data.nonce_str
    that.paySign = res.data.pay_sign
    that.onBridgeReady()
   } else {
    instance('error')
   }
   }).catch((err) => {
   instance(err);
   //alert(err);
   })
   //instance(sessionStorage.getItem('openid'));
  } else {
   instance('参数获取失败')
  }
  },
  /**
  * @onBridgeReady
  */
  onBridgeReady() {
  let that = this
  WeixinJSBridge.invoke(
   'getBrandWCPayRequest', {
   "appId": "wx7eb8183de8a1311b",  //公众号名称，由商户传入
   "timeStamp": that.timestamp + "", //时间戳，自1970年以来的秒数
   "nonceStr": that.nonceStr, //随机串
   "package": "prepay_id=" + that.prepay_id, //预定单id
   "signType": "MD5", //微信签名方式：
   "paySign": that.paySign//微信签名
   },
   function (res) {
   if (res.err_msg == "get_brand_wcpay_request:ok") {
    //instance('支付成功')
    that.$router.push({path: '/Pay_success'})
   } else if (res.err_msg == "get_brand_wcpay_request:ok") {
    //that.$router.push({path:'/Pay_success'}) 取消支付
    instance('取消支付')
   } else {
    //instance('支付失败')
   }
   })
  },

需要注意的是：微信支付的金额是分为单位的，也就是我们正常的钱需要进行*100的操作

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

公众号微信支付,微信公众号支付,微信公众号微信支付

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“微信公众号开发之微信支付代码记录的实现”

暂无评论...

微信公众号开发之微信支付代码记录的实现

适合前端Vue开发童鞋的跨平台Weex的使用详解

JavaScript 实现同时选取多个时间段的方法

评论“微信公众号开发之微信支付代码记录的实现”

更新日志

友情链接