vue项目中实现的微信分享功能示例

 更新时间:2019年01月21日 10:47:19   作者:黎成诃月  
这篇文章主要介绍了vue项目中实现的微信分享功能,结合实例形式分析了基于vue.js实现的微信分享功能具体定义与使用方法,需要的朋友可以参考下

本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考,具体如下:

/* 微信分享 */
Vue.prototype.wechatShare = (shareData) => {
 let resource = {
  title: '随我心愿!',
  desc: '体验优质服务',
  link: 'https://www.abc.cn/',
  img: 'https://www.abc.cn/images/share_logo.jpg'
 }
 let obj = Object.assign({}, resource, shareData)
 let params = {url: window.location.href}
 $post('/vue/weixinjiekou', params).then(data => {
  // 分享标题等参数
  const shareTitle = obj.title
  const shareDesc = obj.desc
  const shareLink = obj.userShare ? obj.link + data.flag : obj.link
  const shareImgUrl = obj.img
  const config = {
   title: shareTitle, // 分享标题
   desc: shareDesc, // 分享描述
   link: shareLink, // 分享链接
   imgUrl: shareImgUrl, // 分享图标
   type: '', // 分享类型,music、video或link,不填默认为link
   dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
   success: function () {},
   cancel: function () {}
  }
  wechat.config({
   debug: false,
   appId: data.appid, // 和获取Ticke的必须一样------必填,公众号的唯一标识
   timestamp: data.timestamp, // 必填,生成签名的时间戳
   nonceStr: data.noncestr, // 必填,生成签名的随机串
   signature: data.signature, // 必填,签名,见附录1
   // 需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
   jsApiList: [
    'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo',
    'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice',
    'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice',
    'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice',
    'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu',
    'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
    'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard',
    'chooseCard', 'openCard'
   ]
  })
  // 处理验证失败的信息
  wechat.error(function (res) {
   console.log('验证失败返回的信息:', res)
  })
  // 处理验证成功的信息
  wechat.ready(function () {
   // 分享给朋友
   wechat.onMenuShareAppMessage(config)
   // 分享到朋友圈
   wechat.onMenuShareTimeline(config)
   // 分享到qq
   wechat.onMenuShareQZone(config)
   // 分享到微博
   wechat.onMenuShareWeibo(config)
   // 分享到qq空间
   wechat.onMenuShareQZone(config)
  })
 })
}

微信接口信息

{
 "result": {
  "appid": "appid",
  "noncestr": "随机串",
  "signature": "签名",
  "timestamp": 时间戳,
  "flag": 6
 },
 "status": "y"
}

希望本文所述对大家vue.js程序设计有所帮助。

相关文章

  • vue实现头像上传功能

    vue实现头像上传功能

    这篇文章主要为大家详细介绍了vue实现头像上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue.js鼠标悬浮更换图片功能

    Vue.js鼠标悬浮更换图片功能

    这篇文章主要为大家详细介绍了Vue.js实现鼠标悬浮更换图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue组件简易模拟实现购物车

    Vue组件简易模拟实现购物车

    这篇文章主要为大家详细介绍了Vue组件简易模拟实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue-router 2.0 跳转之router.push()用法说明

    vue-router 2.0 跳转之router.push()用法说明

    这篇文章主要介绍了vue-router 2.0 跳转之router.push()用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue中进行分布式鉴权与认证的过程

    Vue中进行分布式鉴权与认证的过程

    在Vue应用中,我们通常需要实现分布式鉴权和认证,以确保用户的安全性和数据的保密性,本文将介绍在Vue中如何进行分布式鉴权与认证,需要的朋友可以参考下
    2023-06-06
  • 使用vant-uploader上传照片无法删除的解决

    使用vant-uploader上传照片无法删除的解决

    这篇文章主要介绍了使用vant-uploader上传照片无法删除的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

    Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

    这篇文章主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 在Vue3项目中使用Jest配置生成测试报告的示例详解

    在Vue3项目中使用Jest配置生成测试报告的示例详解

    在Vue 3项目中使用Jest进行单元测试是一种常见的做法,它可以帮助我们验证代码的正确性和稳定性,本文将介绍如何在Vue 3项目中配置Jest,以生成测试报告,需要的朋友可以参考下
    2023-09-09
  • Vue2与Vue3如何利用install自定义全局确认框组件编写

    Vue2与Vue3如何利用install自定义全局确认框组件编写

    这篇文章主要介绍了Vue2与Vue3如何利用install自定义全局确认框组件编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解VUE中的Proxy代理

    详解VUE中的Proxy代理

    这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能,可以用来代理另一个对象,从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下
    2023-04-04

最新评论