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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
Javascript的无new构建实例详解
May 15 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
js实现烟花特效
Mar 02 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
javascript parseInt 大改造
2009/09/27 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Python中正则表达式详解
2017/05/17 Python
简单了解Python中的几种函数
2017/11/03 Python
Python内建模块struct实例详解
2018/02/02 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
深入解析神经网络从原理到实现
2019/07/26 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
测试工程师职业规划书
2014/02/06 职场文书
白血病募捐倡议书
2014/05/14 职场文书
财务管理专业求职信
2014/06/11 职场文书
运动会通讯稿100字
2015/07/20 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫