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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
小程序关于请求同步的总结
May 05 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
详解jquery uploadify 上传文件
2013/11/09 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
python操作redis数据库的三种方法
2020/09/10 Python
python wsgiref源码解析
2021/02/06 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
出纳员的岗位职责
2014/02/22 职场文书
安全责任书范文
2014/03/12 职场文书
解除劳动合同协议书
2014/04/14 职场文书
向女朋友道歉的话
2015/01/20 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Win11查看设备管理器
2022/04/19 数码科技