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 相关文章推荐
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
Vue渲染函数详解
Sep 15 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
Python中的闭包实例详解
2014/08/29 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python之web模板应用
2017/12/26 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
2014年小学国庆节活动方案
2014/09/16 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python