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

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

//判断是否是微信浏览器的函数
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);
            })
        },