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

1.新建share.js文件

import {shareSDK} from \"../api/common\";//分享api
import wx from \'weixin-js-sdk\'
 
export const share  = \'测试\';
export const shareUrl = \'测试连接\';
export const shareImg = \'测试图片\';
export const shareDesc = \'测试详情\';
 
/**
 *分享
 * @param _this
 * @param share  标题
 * @param shareUrl 链接
 * @param shareImg 图片
 * @param shareDesc 描述
 */
export const commonShare = (_this, share , 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({
      : share , // 分享标题
      : shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: shareImg, // 分享图标
     success: function () {
      // 用户确认分享后执行的回调函数
      _this.$vux.toast.text(\'分享成功!!!\');
     },
     cancel: function () {
      // 用户取消分享后执行的回调函数
      _this.$vux.toast.text(\'取消分享!!!\');
     }
    });
    wx.onMenuShareAppMessage({
      : share , // 分享标题
     desc: shareDesc, // 分享描述
      : shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imgUrl: shareImg, // 分享图标
     type: \"\", // 分享类型,music、video或 ,不填默认为 
     dataUrl: \"\", // 如果type是music或video,则要提供数据链接,默认为空
     success: function () {
      // 用户确认分享后执行的回调函数
      _this.$vux.toast.text(\'分享成功!!!\');
     },
     cancel: function () {
      // 用户取消分享后执行的回调函数
      _this.$vux.toast.text(\'取消分享!!!\');
     }
    });
   });
  }
 }).catch(err => {
  console.log(err)
 })
};

2.组件中引入

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

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

收藏 打印