微信自定义分享流程
公众号配置与后台接口书写内容
-
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
微信自定义分享 -
后台开发人员书写验证接口,返回如下的验证信息
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
官方文档说明: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
前端调用
-
引用SDK文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
-
书写代码
其中browser.versions.mobile、md5Fn、getTimestamp、md5Key为自行书写的工具函数或参数,可忽略,以主体逻辑为主
//配置分享信息
var wxDIY_tit = 'xxxx本科生线上毕业展';
var wxDIY_desc = 'xxxx本科生线上毕业展';
var wxDIY_pic = 'http://www.xxxx.edu.cn/images/sharePic.jpg';
var wxDIY_link = window.location.href;
//公众号配置JS白名单的网址
var baseURL = 'https://www.xxxx.edu.cn'
//浏览器判断 移动端、微信环境下,初始化脚本
if(browser.versions.mobile && browser.versions.weixin){
initWXShareSDKFn();
};
//微信SDK自定义分享图文
function initWXShareSDKFn(){
//请求接口
var _link = baseURL+'/api/weixin/signature';
//未添加签名
var _postMes = {
"url": wxDIY_link,
"timestamp": getTimestamp()
};
var _md5Str = "timestamp=" +_postMes['timestamp'] + "&key=" + md5Key;
_postMes['sign'] = md5Fn(_md5Str);
myAjaxFn(_link,"POST",_postMes,function(res){
//处理请求的数据
if(res.errorcode==0 && res.weixin.appId){
// res.weixin
wx.config({
debug: false, // 开启调试模式
appId: res.weixin.appId, // 必填,公众号的唯一标识
timestamp: res.weixin.timestamp, // 必填,生成签名的时间戳
nonceStr: res.weixin.nonceStr, // 必填,生成签名的随机串
signature: res.weixin.signature, // 必填,签名,见附录1
jsApiList: ['checkJsApi','updateTimelineShareData','updateAppMessageShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
//判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: [
'getLocation',
'updateTimelineShareData',
'updateAppMessageShareData'
], // 需要检测的JS接口列表
success: function(res) {
console.log(res.errMsg)
}
});
wx.ready(function() {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
wx.updateAppMessageShareData({
title: wxDIY_tit, // 分享标题
desc: wxDIY_desc, // 分享描述
link: wxDIY_link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: wxDIY_pic, // 分享图标
success:function(res){}
});
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
wx.updateTimelineShareData({
title: wxDIY_tit, // 分享标题
desc: wxDIY_desc, // 分享描述
link: wxDIY_link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: wxDIY_pic, // 分享图标
success:function(){}
});
});
}
},function(err){
console.log(err);
});
}
网友评论