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 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
js blob类型url的视频下载问题的解决
Nov 29 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 ctype函数中文翻译和示例
2014/03/21 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
python设计模式大全
2016/06/27 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python读取mysql数据绘制条形图
2020/03/25 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
shell程序中如何注释
2012/02/17 面试题
什么是GWT的Entry Point
2013/08/16 面试题
中专生自我鉴定范文
2014/02/02 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
博士导师推荐信
2015/03/25 职场文书
初中数学教学随笔
2015/08/15 职场文书
交通事故协议书范本
2016/03/19 职场文书