vue 使用vux封装的微信分享

• Z时代
• 2024-01-10
• 分类：综合

main.js引入

import {WechatPlugin} from 'vux'

Vue.use(WechatPlugin)

公共的jswxShare.js

import Vue from 'vue'
import {
  vm
} from '@/main'
//微信分享
const wxShare = (obj, callback) => {
  // console.log(obj,callback);
  function getUrl() {
    var url = window.location.href;
    var locationurl = url.split('#')[0];
    //console.log(locationurl);
    return locationurl;
  }
  if (obj) {
    var title = obj.title == undefined || obj.title == null ? '集朵' : obj.title;
    var link = obj.link == undefined || obj.link == null ? window.location.href : obj.link;
    var desc = obj.desc == undefined || obj.desc == null ? '集朵' : obj.desc;
    var imgUrl = obj.imgUrl == undefined || obj.imgUrl == null ? 'src/assets/images/logo@3x.png' : obj.imgUrl;
    var debug = obj.debug == true ? true : false;
  } else {
    alert('请传分享参数');
  }
  //微信分享
  vm.$FormData.post(后台接口地址, {
    url: getUrl()
  }).then(res => {
    var data = res.data.data
    if (res.data.error_code == 0) {
      let wxdata = {
        debug: debug,
        appId: data.appid,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          // 所有要调用的 API 都要加到这个列表中
          'onMenuShareTimeline', //分享到朋友圈
          'onMenuShareAppMessage', //分享给朋友
          'onMenuShareQQ', //分享到QQ
          'onMenuShareQZone', //分享到QQ空间
          'onMenuShareWeibo' //分享到腾讯微博
        ]
      }
      vm.$wechat.config(wxdata);
      vm.$wechat.ready(function() {
        //分享到朋友圈
        vm.$wechat.onMenuShareTimeline({
          title: title, // 分享标题
          link: link, // 分享链接
          desc: desc, // 分享描述
          imgUrl: imgUrl, // 分享图标
          success: function() {
            callback && callback();
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
        //分享到朋友
        vm.$wechat.onMenuShareAppMessage({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
            // 用户确认分享后执行的回调函数
            callback && callback();
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
        //分享到QQ
        vm.$wechat.onMenuShareQQ({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
            callback && callback();
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
        //分享到QQ空间
        vm.$wechat.onMenuShareQZone({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
            callback && callback();
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
        //分享到腾讯微博
        vm.$wechat.onMenuShareWeibo({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function() {
            // 用户确认分享后执行的回调函数
            callback && callback();
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        });
      })
    }
  })
}
export {
  wxShare
}
　　　　

组件中的应用

import {
    wxShare
  } from "@/assets/js/wxShare.js"
 created() {
     wxShare({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: window.location.href, // 分享链接
          imgUrl: ‘’, // 分享图标
          debug: true
        }, function(res) { //分享成功后的回调函数
        });
   },

以上是 vue 使用vux封装的微信分享 的全部内容， 来源链接： utcz.com/z/379901.html