企业微信的分享/转发功能

最新推荐文章于 2024-10-10 10:29:28 发布

Caomeiguoguo

最新推荐文章于 2024-10-10 10:29:28 发布

阅读量6k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/caomeiguoguo/article/details/110187905

版权

一.首先呢肯定是要参考企业微信的客户端API

1.JS-SDK里面的使用说明

引入js文件<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

通过config接口注入权限验证配置

wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，企业微信的corpID
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录-JS-SDK使用权限签名算法
jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});

注：里面的appId，timestamp，nonceStr，signature都是通过后台接口返回的给后台传的参一定要传对不然签名拿到就是错的

sharecode.vue

//1、从微信分享中过来的，会携带工单ID等参数
    //2、截取短链中的参数，拼接oauth2URL参数
    //let that=this;
    //console.log('hhhh',window.location.href)
    let shareurl=window.location.href.split('=')[1];
    const urls = 'http%3a%2f%2ffstatic.deppon.com%2fdpm%2fbacklogsystem%2findex.html';  // 
                  生产
    let url= `https://open.weixin.qq.com/connect/oauth2/authorize? 
 appid=wx55b0c14412683cbb&redirect_uri=${urls}&response_type=code&scope=snsapi_base&agentid=0&state=share/${shareurl}&connect_redirect=1#wechat_redirect`;
  
    window.location.href=url;

二：前面的准备工作做好之后呢现在来说说我要做的功能，是企业微信里面嵌套H5页面，页面里有循环列表，每一个列表都有一个分享按钮，点击分享按钮可以把里面的内容分享出去，我也是初次接触企业微信分享功能，我原先想的方法是点击分享按钮直接调起企业微信的原生方法就是右上角的按钮弹出弹框，但这样想未免太天真了些，这样会诱导用户从而封号，虽然说企业微信也不是说会不会封号，但这样做不好，最后我是用点击分享按钮弹出弹框请手动点击右上角按钮让用户手动点击，那接下来如何做呢

1. 我要把分享的东西抽出来弄成一个页面因为要隐藏关键词 share.vue

2.在分享的方法里面

 toggle(item,index){
    let that=this;
    that.currentindexs = index;
    that.questionshare=item.question;//问题点
    Toast('请手动点击右上角按钮转发');
    wx.ready(function(){
      var shareUrl='';
      var shareimgurl='';
      console.log('路径啊',window.location.origin);
      shareUrl= window.location.origin + '你的路径
                gtaskMark=' + item.gtaskMark;//通过gtaskMark 可以在分享的页面拿到详情
      shareimgurl= window.location.origin + '图片的路径';
      wx.onMenuShareAppMessage({
         title:'****',
         desc:that.questionshare, // 分享描述
         link: shareUrl, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信 
                            域名一致
         imgUrl: shareimgurl, // 分享图标
         success: function () {
           // 用户确认分享后执行的回调函数
           alert('分享成功')
         },
      })
      wx.hideMenuItems({menuList:["menuItem:openWithSafari","menuItem:share:timeline","menuItem:favorite","menuItem:share:brand"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
          });
        })
    }

3.再来一个虚拟的vue文件，sharecode.vue用来转换一个把 share.vue里面的短链接转换成长链接

share.vue文件内容

let shareUrl= window.location.origin + '/#/sharecode?gtaskMark=' + that.gtaskMark;
   let shareimgurl= window.location.origin + '图片路径';
   wx.onMenuShareAppMessage({
     title:'****',
     desc:that.questionshare, // 分享描述
     link: shareUrl, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
     imgUrl: shareimgurl, // 分享图标
     success: function () {
       // 用户确认分享后执行的回调函数
       alert('分享成功')
     },
   })

4.这是第一次转发但还有第二次第三次~~~~，那我们应该怎么办呢

在登录的时候把这段代码加进去通过share来判断

 console.log('h',that.getQueryValue('state').indexOf('share')!=-1);
 if(that.getQueryValue('state').indexOf('share')!=-1){
    let shareId =that.getQueryValue('state').split('/')[1];
    that.$router.push({
       name: 'Share',
       params: {
         shareId: shareId
       }
    })
    }else{
       that.roleList();
    }