纯前端实现微信自定义分享
一、引入sha1.js、jwexin1.6.0.js文件
二、wx.config()配置
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });
三、拿到timestamp、nonceStr、signature、access_token、jsapi_ticket。
完整代码:
var AppId = ""; var Appsecret = ""; ////转发去代码 function getToken2(){ if(window.localStorage.getItem('token2_time')){ var token2_time = window.localStorage.getItem('token2_time'); var currentTime = (new Date()).getTime(); if(currentTime - token2_time>120000){ // alert("时间过期重新获取token") getNewToken2(); }else{ // alert("使用缓存中的数据") var jsapi_ticket = window.localStorage.getItem('jsapi_ticket'); var nonce_str = createNonceStr().toString(); var timestamp = createTimeStamp().toString(); var url = location.href.split('#')[0]; var string1 = getString1(nonce_str,timestamp,jsapi_ticket,url); var signature = sha1(string1); // alert("signature:"+signature) wx.config({ debug: false, appId: AppId, timestamp: timestamp, nonceStr: nonce_str, signature: signature, jsApiList: [ 'checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage'] }); } }else{ // alert("第一次进入,保存数据") getNewToken2(); } } function getNewToken2(){ $.ajax({ type: "get", url: "/proxy_all/api.weixin.qq.com/cgi-bin/token", async: true, dataType:"json", data: { "grant_type":"client_credential", "appid": AppId, "secret":Appsecret }, success: function(data) { var token = data.access_token; // alert("token",token) console.log("转发的token:"+data.access_token) getTicket(token); } }); } function getTicket(token){ $.ajax({ type:'get', url:"/proxy_all/api.weixin.qq.com/cgi-bin/ticket/getticket", async: true, dataType:'json', data:{ "access_token":token, "type":"jsapi" }, success:function(response){ if(response.errcode=="0"){ produceSign(response.ticket); } } }) } function produceSign(ticket) { var nonce_str = createNonceStr().toString(); var timestamp = createTimeStamp().toString(); var jsapi_ticket = ticket; var url = location.href.split('#')[0]; var string1 = getString1(nonce_str, timestamp, jsapi_ticket, url); var signature = sha1(string1); console.log("signature:" + signature); // alert(""+ticket); window.localStorage.setItem("jsapi_ticket", jsapi_ticket); var currentTime = (new Date()).getTime(); window.localStorage.setItem('token2_time', currentTime); wx.config({ debug:false, appId: AppId, timestamp: timestamp, nonceStr: nonce_str, signature: signature, jsApiList: [ 'checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage' ] }); //"main.html?main_params="+Authorization_Str; wx.ready(function () { // 在这里调用 API //发送朋友 wx.updateAppMessageShareData({ title: "迎新春,阖家欢", //分享标题 desc: "2021牛年大吉,感恩有你。", // 分享描述 link: "", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "", // 分享图标 success: function (res) { }, cancel: function () { } }); //朋友圈 wx.updateTimelineShareData({ title: "迎新春,阖家欢", //分享标题 desc: "2021牛年大吉,感恩有你。", // 分享描述 link: "", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "", // 分享图标 success: function (res) { }, cancel: function () { } }); wx.error(function (res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 console.log(res); }); }); } wx.ready(function(){ // alert("微信验证OK"); // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 wx.updateAppMessageShareData({ title: "迎新春,阖家欢", //分享标题 desc: "2021牛年大吉,感恩有你。", // 分享描述 link: "", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "", // 分享图标 success: function (res) { // 设置成功 // alert("分享成功") }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.updateTimelineShareData({ title: "迎新春,阖家欢", //分享标题 desc: "2021牛年大吉,感恩有你。", // 分享描述 link: "", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "", // 分享图标 success: function (res) { }, cancel: function () { } }); }); wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 alert("微信验证失败"); });
/** * 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string1 * @param nonce_str * @param timestamp * @param jsapi_ticket * @param url * @return */ function getString1(nonce_str,timestamp,jsapi_ticket,url){ var arr = ["noncestr="+nonce_str,"timestamp="+timestamp,"jsapi_ticket="+jsapi_ticket,"url="+url]; arr.sort(); var sb = arr.join("&"); return sb; } function getSha1(str){ return hex_sha1(str); } function createNonceStr(){ return (new Date()).getTime(); } function createTimeStamp(){ var time = (new Date()).getTime().toString(); return time.substr(0,9); }