vue.js 微信支付前端代码分享

 更新时间:2018年02月10日 09:04:47   作者:呀呀呀耶  
下面小编就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧

实例如下所示:

onBridgeReady: function () {
  const openId = localStorage.getItem('openId')
  payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填
  this.message = rt.t
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
    'appId': this.message.appId,
    'timeStamp': this.message.timeStamp,
    'nonceStr': this.message.nonceStr,
    'package': this.message.package,
    'signType': this.message.signType,
    'paySign': this.message.paySign
    },
   function (res) {
   console.log(res)
   if (res.err_msg === 'get_brand_wcpay_request:ok') {
    Toast('微信支付成功')
    this.$router.push('/MineOrder')
   } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
    Toast('用户取消支付')
    // window.location.href = 'gift_failview.do?out_trade_no=' + this.orderId
   } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
    Toast('网络异常,请重试')
   }
   }
  )
  })
 },
 callpay: function () {
  if (typeof WeixinJSBridge === 'undefined') {
  if (document.addEventListener) {
   document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(), false)
  } else if (document.attachEvent) {
   document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady())
   document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady())
  }
  } else {
  this.onBridgeReady()
  }
 }

以上这篇vue.js 微信支付前端代码分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目index.html中使用环境变量的代码示例

    vue项目index.html中使用环境变量的代码示例

    在Vue3中使用环境变量的方式与Vue2基本相同,下面这篇文章主要给大家介绍了关于vue项目index.html中使用环境变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 一文教你vue3 watch如何停止监视

    一文教你vue3 watch如何停止监视

    这篇文章主要为大家详细介绍了vue3中watch如何停止监视,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • vue简单练习 桌面时钟的实现代码实例

    vue简单练习 桌面时钟的实现代码实例

    这篇文章主要介绍了vue简单练习 桌面时钟的实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值的相关资料,需要的朋友可以参考下
    2019-09-09
  • 深入详解Vue3 ref底层实现原理

    深入详解Vue3 ref底层实现原理

    随着现在vue3越来越普及,相应的面试题也多了起来。说到vue3的面试题,有一个最经典的就是对于实现ref和reactive这两个方法的底层原理,本文就来和大家简单讲讲吧
    2023-04-04
  • Vue实现表格合并与拆分的示例代码

    Vue实现表格合并与拆分的示例代码

    在Vue应用程序中,表格是一个非常常见的组件,在这篇文章中,我们将介绍如何在Vue中进行表格的合并和拆分,感兴趣的小伙伴可以了解一下
    2023-06-06
  • Vue3响应式高阶用法之shallowReadonly()使用

    Vue3响应式高阶用法之shallowReadonly()使用

    在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下
    2024-09-09
  • 使用proxy实现一个更优雅的vue【推荐】

    使用proxy实现一个更优雅的vue【推荐】

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”。这篇文章主要介绍了用proxy实现一个更优雅的vue,需要的朋友可以参考下
    2018-06-06
  • vue单页面如何通过prerender-spa-plugin插件进行SEO优化

    vue单页面如何通过prerender-spa-plugin插件进行SEO优化

    这篇文章主要介绍了vue单页面如何通过prerender-spa-plugin插件进行SEO优化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 浅析vue3项目中自定义指令的运用

    浅析vue3项目中自定义指令的运用

    自定义指令是一种在Vue应用程序中扩展HTML标签的能力,通过自定义指令,我们可以直接在模板中使用指令名,下面我们就来看看项目中具体如何使用自定义指令的吧
    2023-08-08
  • vue实现移动端图片上传功能

    vue实现移动端图片上传功能

    这篇文章主要为大家详细介绍了vue实现移动端图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12

最新评论