自定义微信分享链接
判断是否是微信的方法
//判断是否是微信浏览器的函数
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);
})
},