直接上代码
//接口请求方法
import $ajax from '@/config/ajax';
//页面引入微信sdk文件
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "https://res2.wx.qq.com/open/js/jweixin-1.4.0.js");
document.body.appendChild(script);
window.onload = function () {
//获取当前页面地址
let url = window.location.href;
url = url.substring(0, url.indexOf("#"));
//获取签名、随机数、时间戳
$ajax.post("api/open/signature", {
url: url
}).then(res => {
// 微信SDK配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: config.weiXinAppId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.noncestr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: ["getLocation", "updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的JS接口列表
});
});
//配置校验失败后执行
wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log(res);
});
}
//获取地理位置
export const getLocation = (callback) => {
//配置校验成功后执行
wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
console.log(res);
callback && callback(res);
}
});
});
}
//设置分享信息
export const setShare = (data,callback) => {
//配置校验成功后执行
wx.ready(function () {
if (!data.link) {
data.link = window.location.href;
}
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.updateAppMessageShareData({
title: data.title, // 分享标题
desc: data.desc, // 分享描述
link: data.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.imgUrl, // 分享图标
success: function () {
// 设置成功
callback && callback();
}
});
wx.updateTimelineShareData({
title: data.title, // 分享标题
link: data.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.imgUrl, // 分享图标
success: function () {
// 设置成功
callback && callback();
}
})
});
}