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


Posted in Javascript onOctober 16, 2019

需求说明

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

微信支付产品

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

微信开发步骤

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

这里简单的说一下,我们打开这哥链接以后其实是官方截图的配置,有一个支付配置和设置授权域名
首先是支付配置:最简单的办法是我们打开需要支付的公众号,右上角有三个点,直接复制url,这个url就是这里需要配置的url
至于下面的授权域名,我自己当时是没有进行配置的,这里可能是我疏忽了,但是我没有配置也没有影响我使用,所以这里我不确定要不要配置。

支付接口

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

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?chapter=4_3

上面的五个参数其实appid是我们可以拿到的,时间戳是我们直接可以生成的,注意这里是秒数,不是毫秒,随机串这个可以直接自己写一个函数,生成一个32位以内的随机数,prepay_id这是后端提供接口,返回一个预付id,signType是md5加密,无可争议的,最后一个是签名,签名的规则是:

  • 参数名ASCII码从小到大排序(字典序);
  • 如果参数的值为空不参与签名;
  • 参数名区分大小写;
  • 验证调用返回或微信主动通知签名时,传送的sign参数不参与签名,将生成的签名与该sign值作校验。
  • 微信接口可能增加字段,验证签名时必须支持增加的扩展字段

这个就比较有意思了,我做的时候直接用后端生成好的签名进行的,但是理论上我前端也是可以生成的,但是我失败了,可能是我顺序的问题或者是别的什么问题吧,这个不得而知了。

看源码

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

  • 步骤很简单:
  • 根据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的操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
关于JS模块化的知识点分享
Oct 16 #Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 #Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 #Javascript
微信小程序如何实现在线客服功能
Oct 16 #Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 #Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 #Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
python八大排序算法速度实例对比
2017/12/06 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python实现视频读取和转化图片
2019/12/10 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
一个C/C++编程面试题
2013/11/10 面试题
Linux机考试题
2015/10/16 面试题
零件设计自荐信范文
2013/11/27 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
出租房屋协议书
2014/09/14 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Golang 对es的操作实例
2022/04/20 Golang