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 回调函数中变量作用域的讨论
Sep 11 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
JS操作JSON常用方法(10w阅读)
Dec 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
js中时间格式化的几种方法
2018/07/22 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
python批量修改文件名的实现代码
2014/09/01 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python中rb含义理解
2020/06/18 Python
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
银行求职信
2014/05/31 职场文书
医院保洁服务方案
2014/06/11 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书