zoukankan      html  css  js  c++  java
  • vue 使用vux封装的微信分享

    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) { //分享成功后的回调函数
    
            });
       },
    

      

  • 相关阅读:
    被.net郁闷的一天
    使用批处理出现奇怪的现象
    我们应该更相信ghost
    asp.net设置默认按钮的一种方法(041217更新)
    asp中access到sql server导入升级后要做的工作。
    一种简单方便的权限控制方案
    为何我的本本不能打开休眠功能?
    祝贺自己的blog开张
    sql server中分页获取数据的存储过程
    httpcompress实际效果能有多少?
  • 原文地址:https://www.cnblogs.com/langqq/p/10270156.html
Copyright © 2011-2022 走看看