vue 微信分享自定义

指定页面分享进入自己本页面,其他页面分享进入首页

App.vue

 created() {
    let source = parseQueryString(window.location.href).source || ''
    this.$store.dispatch('SetSource', source)
    let path = window.location.href 
    this.$store.dispatch('SetCurrentPath', path)
    let from = getQueryString('from')
    this.$store.dispatch('SetFrom', from)
},

router.js

router.beforeEach((to, from, next) => {
  if (to.name === '指定的页面名' || store.state.loaded) { //如果是指定的页面
    next()
   } else {    //否则分享是首页
     next('/')
   }
})

router.afterEach((to, from) => {
  if (store.state.wechatConfig === null) {  
     //请求后台接口获取分享的数据信息(把页面的当前路径传给后台)
     getWechatShare(store.state.from, store.state.currentPath).then(res => {
       let data = res.data
       console.log(data)
       store.dispatch('SetWechatConfig', { ...data, debug: false, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] })
       configWechat(to)
     })
  } else {
    configWechat(to)
  }
})

function configWechat(to) {
  let path = `${window.location.origin}${window.location.pathname}${window.location.search}#${to.path}`
  wx.config(store.state.wechatConfig)
  wx.ready(function () {
    console.log('wx.ready')
    // 分享到朋友圈
    wx.onMenuShareTimeline({
      title: '', // 分享标题
      link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      // link:store.state.wechatConfig.shareUrl,
      imgUrl: 'https://www.com/icon.jpg', // 分享图标
      success: function () {
        // 用户确认分享后执行的回调函数
      },
      fail: function (res) { }
    })
    //分享给朋友
    wx.onMenuShareAppMessage({
      title: '', // 分享标题
      desc: '描述。。。', // 分享描述
      // link:store.state.wechatConfig.shareUrl,
      link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致location.href
      imgUrl: 'https://www.com/icon.jpg', // 分享图标/images/wxshare.jpg
      type: 'link', // 分享类型,music、video或link,不填默认为link
      success: function () {
        // 用户确认分享后执行的回调函数
        // alert("分享成功")
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
        // alert("分享失败")
      },
      fail: function (res) {
        // alert(JSON.stringify(res));
      }
    })
  })
}

 

Vue 微信支付自定义键盘涉及到前端的技术和微信支付的开发文档。 首先,我们需要在Vue应用中创建一个自定义的键盘组件,可以使用Vue的组件特性来实现。这个组件可以包含一个数字键盘和其他带有特殊功能的按钮,比如删除按钮、确认按钮等。 在微信支付中,我们需要引入微信支付的SDK,并按照微信支付的开发文档进行配置和使用。首先,我们需要在Vue的入口文件中引入微信支付的SDK,并在Vue的生命周期钩子中初始化支付功能。 当用户需要进行支付时,我们可以通过调用微信支付的接口实现支付功能。这个接口可以传入一些必要的参数,比如支付金额、订单号等。在用户点击确认支付按钮之后,我们可以调用微信支付的接口,并在支付完成后进行相应的处理,比如跳转到支付成功页面或者支付失败页面等。 在支付过程中,我们需要监听用户在自定义键盘组件中输入的金额。可以通过自定义键盘组件中的事件来获取用户输入的金额,并将其传递给微信支付的接口。 最后,在Vue的模板中使用自定义键盘组件,并设置相应的事件监听器,来实现支付功能。可以使用v-model指令来绑定用户输入的金额。 总结起来,Vue 微信支付自定义键盘涉及到前端技术的运用和微信支付的开发文档的使用。我们需要创建一个自定义键盘组件,并在支付过程中监听用户输入的金额并传递给微信支付的接口。最后,在Vue的模板中使用自定义键盘组件来实现支付功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值