微信分享相关参数配置
微信分享JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
步骤四:通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
步骤五:通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
1.success:接口调用成功时执行的回调函数。
2.fail:接口调用失败时执行的回调函数。
3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。
具体可参考
https://www.w3cschool.cn/weixinkaifawendang/h8ap1qe5.html
1、微信默认分享文案配置
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> // 设置为全局变量 var defautShareData = { title: "{$share_content.title}", desc: "{$share_content.desc}", link: "{$share_content.link}", imgUrl: "{$share_content.imgUrl}", success: function (res) { $.post("{:U('add_shareRecord')}",{}, function (e) { // window.location.href="{:U('index')}"; }); }, cancel: function (res) { } }; //全局的分享函数 function shareAll(defautShareData) { wx.onMenuShareTimeline(defautShareData); wx.onMenuShareAppMessage(defautShareData); wx.onMenuShareQQ(defautShareData); wx.onMenuShareQZone(defautShareData); wx.onMenuShareWeibo(defautShareData); } // 微信分享 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: "{$share_content.appId}", // 必填,公众号的唯一标识 timestamp: "{$share_content.timestamp}", // 必填,生成签名的时间戳 nonceStr: "{$share_content.nonceStr}", // 必填,生成签名的随机串 signature: "{$share_content.signature}", // 必填,签名,见附录1 jsApiList: ['onMenuShareTimeline', 'checkJsApi', 'showAllNonBaseMenuItem', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu', 'scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });
//初始化相关配置数据 wx.ready(function () { wx.checkJsApi({ jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo'] }); shareAll(defautShareData); }); </script>
2、微信动态分享文案配置(根据不同操作分享不同文 //分享
var sharedata={ event_key: "{$act_data.event_key}", type:'0', //用来标识不同类型的分享,0是默认,1是奖品页,类推 }; function share(saizhidata,award){ $(".alertShareBox").show(); sharedata.saizhidata=saizhidata; sharedata.type=1; sharedata.award = award; share(); sharedata.url = window.location.href; $.ajax({ url:"{:U('getMyShare')}", type:'post', data:sharedata, success:function (res) { defaultShareData = { title: res.data.title, desc: res.data.desc, link: res.data.link, imgUrl: res.data.imgUrl, }; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp:res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名,见附录1 jsApiList: ['onMenuShareTimeline', 'checkJsApi', 'showAllNonBaseMenuItem', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function () { wx.checkJsApi({ jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo' ] }); //判断朋友圈分享是否以描述做标题 if(sharedata.type!=0){ shareAll(defaultShareData, 1); }else{ shareAll(defaultShareData); } }); }, error:function () { $.dialog({content: '网络出问题了', time: 1000}); } }); }
//点击分享按钮
$(".share-btn").on("click",function(){
share();
$(".alertShareBox").show();
})
//关闭中奖弹窗,重置分享配置sharedata.type的值为0默认
$(".alertShareBox").on("click",function(){
sharedata.type=0;
$(".alertShareBox").hide();
});
2019/4/08补充
当h5嵌套在app里面时,分享成功后的回调是app自己调用的,可以让app自己请求接口或者是app直接调用页面里面的方法