vue微信分享到朋友圈 vue微信发送给好友


Posted in Javascript onNovember 28, 2018

本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装,供大家参考,具体内容如下

1.新建share.js文件

import {shareSDK} from "../api/common";//分享api
import wx from 'weixin-js-sdk'
 
export const shareTitle = '测试';
export const shareUrl = '测试连接';
export const shareImg = '测试图片';
export const shareDesc = '测试详情';
 
/**
 *分享
 * @param _this
 * @param shareTitle 标题
 * @param shareUrl 链接
 * @param shareImg 图片
 * @param shareDesc 描述
 */
export const commonShare = (_this, shareTitle, shareUrl, shareImg, shareDesc) => {
 let url = window.location.href;
 let data = {
  url: url
 };
 shareSDK(data).then(res => {
  if (res.status == 1) {
   let data = res.data;
   wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: data.appId, // 必填,公众号的唯一标识
    timestamp: data.timestamp, // 必填,生成签名的时间戳
    nonceStr: data.nonceStr, // 必填,生成签名的随机串
    signature: data.signature, // 必填,签名,见附录1
    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
   });
   wx.ready(function () {
    wx.onMenuShareTimeline({
     title: shareTitle, // 分享标题
     link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: shareImg, // 分享图标
     success: function () {
      // 用户确认分享后执行的回调函数
      _this.$vux.toast.text('分享成功!!!');
     },
     cancel: function () {
      // 用户取消分享后执行的回调函数
      _this.$vux.toast.text('取消分享!!!');
     }
    });
    wx.onMenuShareAppMessage({
     title: shareTitle, // 分享标题
     desc: shareDesc, // 分享描述
     link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: shareImg, // 分享图标
     type: "", // 分享类型,music、video或link,不填默认为link
     dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
     success: function () {
      // 用户确认分享后执行的回调函数
      _this.$vux.toast.text('分享成功!!!');
     },
     cancel: function () {
      // 用户取消分享后执行的回调函数
      _this.$vux.toast.text('取消分享!!!');
     }
    });
   });
  }
 }).catch(err => {
  console.log(err)
 })
};

2.组件中引入

import {commonShare, shareTitle, shareUrl, shareImg, shareDesc} from "./utils/share";
commonShare(this, shareTitle, shareUrl, shareImg, shareDesc);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
JavaScript表单验证开发
Nov 23 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 #Javascript
微信小程序实现简单评论功能
Nov 28 #Javascript
微信小程序实现省市区三级地址选择
Jun 21 #Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 #Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 #Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 #Javascript
微信小程序实现评论功能
Nov 28 #Javascript
You might like
基于php iconv函数的使用详解
2013/06/09 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
python中对list去重的多种方法
2014/09/18 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
《尊严》教学反思
2014/02/11 职场文书
晨会主持词
2014/03/17 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Go 自定义package包设置与导入操作
2021/05/06 Golang
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA