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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
canvas绘制多边形
Feb 24 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
浅谈js中的bind
2019/03/18 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python 内置模块详解
2019/01/01 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
驾驶员培训方案
2014/05/01 职场文书
骨干教师考核评语
2014/12/31 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Windows7下FTP搭建图文教程
2022/08/05 Servers