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


Posted in Javascript onJanuary 21, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 #Javascript
js的对象与函数详解
Jan 21 #Javascript
JS实现求5的阶乘示例
Jan 21 #Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 #Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 #Javascript
Vue 表情包输入组件的实现代码
Jan 21 #Javascript
JS实现将对象转化为数组的方法分析
Jan 21 #Javascript
You might like
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
JS定义回车事件(实现代码)
2013/07/08 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
pycharm安装图文教程
2017/05/02 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
城市精细化管理实施方案
2014/03/04 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
演讲稿格式范文
2014/05/19 职场文书
测绘工程专业求职信
2014/07/15 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
js实现自动锁屏功能
2021/06/02 Javascript
Golang Web 框架Iris安装部署
2022/08/14 Python