微信分享按钮触发事件怎么实现?

时间：2023-07-01 14:05 阅读数：75 人阅读分类：知识百科

　　不知道大家使用过这个功能没有，就是分享按钮引起相关的触发事件，其实是有办法可以做到的，下面小编就来给大家说说这个问题，看看这个功能要怎么才能醉倒，下面是具体的设置步骤，如果大家看不懂，可以随时咨询小编哦!

　　1、引入微信官方的js文件，将该js文件放到最前面引入：

　　2、初始化微信所需参数：

　　2.1 注意：wx.config必须在页面加载时完成执行，wx.ready可以放到方法内通过触发执行。

　　//初始化微信

　　var url = null;

　　var jsapi_ticket = null;

　　var nonceStr = null;

　　var timestamp = null;

　　var signature = null;

　　var showURL = null;

　　var appid = null;

　　$.ajax({

　　cache: false,

　　type: "GET",

　　url: "../oAuth/configParam",//此处的url是获取微信参数的后台方法，也可通过前端实现

　　dataType: "json",

　　data: {

　　currentPageUrl: window.location.href,//url指引方法的参数列表

　　error: function (error) {

　　window.location = "../oAuth/error?message" + error.toString()

　　success: function (map) {

　　//url = map["url"];

　　jsapi_ticket = map["jsapi_ticket"];

　　nonceStr = map["nonceStr"];

　　timestamp = map["timestamp"];

　　signature = map["signature"];

　　appid = map["appid"];

　　//shareUrl = map["redshareurl"];

　　alert(appid);

　　wx.config({

　　debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

　　appId: appid, // 必填，公众号的唯一标识

　　timestamp: timestamp, // 必填，生成签名的时间戳

　　nonceStr: nonceStr, // 必填，生成签名的随机串

　　signature: signature,// 必填，签名，见附录1

　　jsApiList: [//此处列表，用到哪些方法，必须要在此提前声明，我当时要用到hideMenuItems，但是因为没有在此出声明，一直不起作用，后来查资料才知道，并且这 //些方法必须放到wx.ready中

　　'checkJsApi',

　　'onMenuShareTimeline',

　　'onMenuShareAppMessage',

　　'hideMenuItems'

　　] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

　　});

　　wx.ready(function () {

　　//2.3 隐藏不用的按钮

　　alert("隐藏不用的按钮");

　　wx.hideMenuItems({

　　menuList: ['menuItem:share:qq',

　　'menuItem:share:weiboApp',

　　'menuItem:favorite',

　　'menuItem:share:facebook',

　　'/menuItem:share:QZone'], // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3

　　success:function(res){

　　//alert("隐藏");

　　}

　　});

　　wx.checkJsApi({

　　jsApiList: [

　　'getNetworkType',

　　'previewImage'

　　success: function (res) {

　　// alert(JSON.stringify(res));

　　}

　　});

　　/*wx.showMenuItems({

　　menuList: ['onMenuShareAppMessage',

　　'onMenuShareTimeline'] // 要显示的菜单项，所有menu项见附录3

　　});*/

　　// 2. 分享接口

　　// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口

　　wx.onMenuShareAppMessage({

　　title: '话费购',

　　desc: '话费红包，点击领取',

　　link: shareUrl,

　　imgUrl: 'wuming_ise.ngrok.cc/wcpay/images/tubiao.png',

　　trigger: function (res) {

　　// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回

　　//alert("点击分享朋友"+shareUrl);

　　success: function (res) {

　　dismiss();

　　cancel: function (res) {

　　dismiss();

　　fail: function (res) {

　　dismiss();

　　// alert(JSON.stringify(res));

　　}

　　});

　　//alert('已注册获取“发送给朋友”状态事件');

　　// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口

　　wx.onMenuShareTimeline({

　　title: '话费购',

　　link: shareUrl,

　　imgUrl: 'wuming_ise.ngrok.cc/wcpay/images/tubiao.png',

　　trigger: function (res) {

　　// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回

　　alert("分享到朋友圈"+shareUrl);

　　success: function (res) {

　　dismiss();

　　cancel: function (res) {

　　dismiss();

　　fail: function (res) {

　　dismiss();

　　alert(JSON.stringify(res));

　　}

　　});

　　}

　　});

　　这个教程是需要有一定基础的朋友才能清楚的，所以对于一般的用户来说，不是特别懂，但不要紧，大家看看就好，如果是专业的朋友应该就能看清楚，如果大家对于微微风小编所写的办法有异议，就请大家留言讨论吧!