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

      

  • 相关阅读:
    MongoVUE 使用教程
    Mongo
    thinkPHP
    从关系型数据库到非关系型数据库
    boost 文件系统
    boost 随机数发生器
    CString/string 区别及其转化
    boost uuid
    使用命令行解析php文件
    Log4PHP日志库使用
  • 原文地址:https://www.cnblogs.com/langqq/p/10270156.html
Copyright © 2011-2022 走看看