vue java 微信分享 vue项目实现微信分享页面

转载

mob64ca13fd163c 2023-12-05 14:48:39

文章标签 vue java 微信分享微信分享朋友圈配置项 文章分类 Java 后端开发

实现微信分享功能。

1 、基于vue去实现在微信里去分享给你的微信好友，或者去分享到你的朋友圈里。如果是react 等等一样用法。
2、目前实现微信分享功能是通过点击微信控件触发的，代码拿走直接用，因为分享出来的是一个有标题，有描述，有图标的一个类似连接，所以灵活使用，分享地址，分享图片，分享的话术等等根据各自的需求去写。
3、使用到微信官网的api
通过 npm i weixin-js-sdk 安装。
最好在项目的main.js里暴露出来。

html部分

<div class="box">
   <button @click="shareFriend">分享好友</button>
   <button @click="shareGroup">分享朋友圈</button>
  </div>

简单粗暴，样式不细写。
注意：尽量要在页面创建时去拿到配置项，然后注入配置信息。

js部分

export default {
  data(){
    return{
      //必须配置项，从接口获取
      appId:"",
      timestamp:"",
      noncstr:"",
      signatureInfo:"",
      // 自配项
      imgurl:"",//分享图片（如分享出来链接上显示的小图标）
      url:"",//分享地址（如分享出来一个链接，点链接要跳的页面地址）
    }
  },
  created(){
    //指的是要做分享的页面的url送过去，请求成功才能拿到
    let url = location.href.split('#')[0];
    this.$axios({
       url:'/use/shareurl',//请求微信分享的接口地址
       method:'post',
       data:url,
    }).then(res=>{
      if(res.data.success){
        //这些配置参数必填项，后面去调微信的pai是需要传的。
        this.appId = res.data.appId;
        this.timestamp = res.data.timestamp;
        this.noncstr = res.data.noncstr;
        this.signatureInfo = res.data.signatureInfo;
      }
    }).catch(err=>{console.log(err)})
  },
  methods:{
    shareFriend(){//当点击分享好友按钮时
      //怎么取图片的地址取决于你放图片的路径，你也可以用线上图片，也可以放在你们的服务器上。
       this.imgurl = location.href.split('/index')[0] + "/static/shareimg.jpg";
       this.url = "这里是你要分享出来的页面的地址";
       this.title="这是一个王哈哈";
       this.desc="小绵羊呀小绵羊呀小绵羊呀小绵羊呀小绵羊呀分享好友呀呀哎呀呀啊";
       this.goshare()
    },
    goshare(){
      let that = this;
      //开始注入配置项
      wx.config({
        debug:false,//是否打开debug调试模式。
        appId:this.appId,	//必填，公众号唯一标识
        timestamp:this.timestamp,	//必填，生成签名的时间戳
        nonceStr:this.noncstr,	//必填，生成签名的随机串
        signature:this.signatureInfo,	//必填，生成的签名
        jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']	//必填，允许分享好友，分享朋友圈
      })
      wx.error((res)=>{//配置成功
        for(var msg in res){
          let obj = {
            showAlert:true,
            errTitle:"错误提示",
            errMsg:JSON.stringify(res[msg]),
            errCode:""  
          }
        } 
      })
      //以上是配置项注入成功
      wx.ready(()=>{//点击要去分享
        wx.onMenuShareTimeline({//配置去分享朋友圈的选项
          title :this.share.title,//分享标题
          link : this.share.url, //分享链接
          imgUrl : this.share.imgurl, //分享图标
          success : function(res){//分享成功 
            console.log("已分享朋友圈成功")
            //如分享成功后想做一些其他的业务处理，可以在这里做
          },
          cancel:function(){
            //that.alert="失败弹框话术等等(注意 这里拿不到this实例的)"
            console.log("已分享失败")
          }
        })
        wx.onMenuShareAppMessage({//配置去分享好友的选项
          title :  this.share.title,  
          link :  this.share.url,    		
          desc : this.share.desc,             
          imgUrl : this.share.imgurl ,                            
          success : function(res){
            console.log("分享好友成功")
          },
          cancel:function(res){
            console.log("分享失败") 
          }
        });
      })
    },
  }
  
}

如果想给分享连接带参也是可以。
注意：到目前为止，是不能自动去调微信的分享控件按钮（指右上角的…）直接分享的，建议最好做个页面引导去手动通过控件按钮分享。

效果图：

vue java 微信分享 vue项目实现微信分享页面_vue java 微信分享