vue微信分享插件使用方法详解


Posted in Javascript onFebruary 18, 2020

本文为大家分享了vue微信分享插件的使用方法,供大家参考,具体内容如下

1.安装weixin-js-sdk

npm install weixin-js-sdk

2.创建文件并引入

  • 在src下创建common目录
  • 在common目录下创建wxshare.js

3.在wxshare.js中编写插件

import wx from 'weixin-js-sdk'
import URL from '@/common/urlConfig'

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
 };
 _this.$axios.post(URL.vip.insertApplyRecord, 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 () {
   // 用户确认分享后执行的回调函数
   // alert('分享成功!!!');
  },
  cancel: function () {
   // 用户取消分享后执行的回调函数
   // alert('取消分享!!!');
  }
  });
  wx.onMenuShareAppMessage({
  title: shareTitle, // 分享标题
  desc: shareDesc, // 分享描述
  link: shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: shareImg, // 分享图标
  type: "", // 分享类型,music、video或link,不填默认为link
  dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
  success: function () {
   // 用户确认分享后执行的回调函数
   // alert('分享成功!!!');
  },
  cancel: function () {
   // 用户取消分享后执行的回调函数
   // alert('取消分享!!!');
  }
  });
 });
 }
 })
};

4.在需要分享页面编写

import {commonShare, shareTitle, shareUrl, shareImg, shareDesc} from "@/common/wxshare";
 commonShare(this, shareTitle, shareUrl, shareImg, shareDesc);

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

Javascript 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
AngularJS语法详解
Jan 23 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
jQuery实现大图轮播
Feb 13 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
javascript实现简易聊天室
Jul 12 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
vue+ts下对axios的封装实现
Feb 18 #Javascript
ES6中Promise的使用方法实例总结
Feb 18 #Javascript
React中获取数据的3种方法及优缺点
Feb 18 #Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 #Javascript
JavaScript canvas绘制折线图
Feb 18 #Javascript
node+multer实现图片上传的示例代码
Feb 18 #Javascript
You might like
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
上班打牌检讨书
2014/02/07 职场文书
小班幼儿评语大全
2014/04/30 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
承诺书格式
2014/06/03 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
元旦晚会活动总结
2014/07/09 职场文书
商务邀请函
2015/01/30 职场文书
Node.js实现断点续传
2021/06/23 Javascript