微信公众号的自定义分享和朋友圈分享

拼搏现实的明天。 2024-04-18 21:47 63阅读 0赞

自定义微信分享链接  
判断是否是微信的方法

//判断是否是微信浏览器的函数
    export function isWeiXin() {
    	var ua = window.navigator.userAgent.toLowerCase();
    	if (
    		ua.match(/MicroMessenger/i) == 'micromessenger'
    		&& ua.match(/miniProgram/i)
    		&& ua.match(/miniProgram/i)[0] == 'miniprogram'
    	) {
    		return 'xcx'
    	}
    	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    		return true;
    	} else {
    		return false;
    	}
    }

vue混合开发

import Vue from "vue";
    import debounce from "lodash/debounce";
    import store from "@/store/index";
    import wx from "weixin-js-sdk";//引入微信
    import { isWeiXin, GetQueryByString } from "./tool";//isWeiXin 判断是否是微信浏览器的函数 GetQueryByString自己封装的获取地址栏的查询字符串
    
    Vue.mixin({
      data() {
        return { 
          },
        };
      },
      methods: {
       setShareLink(link,desc,title,imgUrl,path,host,param) {//使用vue混合开发 在全局main.js引用  调用此方法 传递参数
        if (isWeiXin() === false) return;
          getJsPrepare().then(res => {//获取微信签名
    
            wx.config({
              debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.appid, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.noncestr, // 必填，生成签名的随机串
              signature: res.data.sign, // 必填，签名
              jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表  微信好友分享 朋友圈分享
            });
            wx.error(function(res) {
              //console.log(res, "config信息验证失败会执行error函数");
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
            wx.ready(() => {
    
              //如果没有link或者title，则不需要设置分享。
              if(!link || !title){
                return;
              }
    
              wx.updateAppMessageShareData({
                title,//分享标题
                desc,//分享描述
                link,//分享链接
                imgUrl,//分享图片
                success() {//成功回调函数
                  // console.log('成功')
                  //alert('分享成功')
                },
                cancel() {//失败回调函数
                  // console.log('取消了')
                  // alert('取消了')
                }
              });
              wx.updateTimelineShareData({
                title, // 分享标题
                link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl, // 分享图标
                success: function() {
                  // alert('分享成功')
                },
                cancel() {
                  // alert('取消了')
                }
              });
    
              if(isWeiXin()==='xcx'){//小程序分享
                //let host = 'https://wap.qd101.net'
                //host = host.replace('https','http')
    
                //这根据自己的需要封装吧，记住别少了问好
                //let param = '?aid=1&from_id=2&id=1&&sid=10,12,11,9,8'
                //let path='/#/classify/topicDetail'
                //注意路由模式，需要加上#号
                wx.miniProgram.postMessage({ data: {title,imgUrl,host,path,param} })
              }
            });
          }).catch(e=>{});
    
        }
      }

在main.js引用

import "@/assets/js/pageCommon";

在组件中直接使用

init(){
                let id=this.$route.query.id;
                planProjectLogShow(id).then(res=>{
                    this.data=res;
                    //分享  我是把当前获取的标题  分享语  图片  赋值给setShareLink方法
                    let aid=this.$route.query.aid;
                    let id=this.$route.query.id;
                    let link=window.location.origin + window.location.pathname+"#/member/plan/inviteNow?id="+id+"&aid="+aid;
                    let title = res.share_title;
                    let desc=res.share_message;
                    let imgUrl =res.project.cover_path;
                    let path='/#'+this.$route.path;
                    let host=window.location.origin;
                    let param=getParam(this.$route.query);
                    this.setShareLink(link,desc,title,imgUrl,path,host,param);
                })
            },