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


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 相关文章推荐
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
JS验证不重复验证码
Feb 10 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
实用的Vue开发技巧
May 30 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 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
php cout<<的一点看法
2010/01/24 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
在Python中定义和使用抽象类的方法
2016/06/30 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python使用opencv进行人脸识别
2017/04/07 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
幼儿园教师请假制度
2014/01/16 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
学校少先队工作总结
2015/08/12 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
python缺失值的解决方法总结
2021/06/09 Python