微信端html5页面调用分享接口示例

2020-04-24 19:13:46易采站长站整理

// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline(obj);

// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareQQ(obj);

// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareWeibo(obj);

// 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
wx.onMenuShareQZone(obj);
})

wx.ready是在wx.config之后自动运行的,我是定义了一个分享内容的通用对象,然后直接调用即可,也可以根据需要来分别定义分享朋友、朋友圈、微博等的不同内容,具体查看微信接口文档即可;
主要强调一下分享链接,该链接必须是你的公众号设置的JS安全域名下的,不然无法分享成功;

分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;

5、我这个项目是投票类的,所以需要每次点击进来之后获取用户code,如果你只是分享文章,不需要用户信息,直接将link更改为你的文章链接即可;

6、对于投票类,我这里特殊处理了,就是重定向了该链接,大家都知道H5获取微信用户信息有两种,一种是关注微信公众号;另一种提示用户需要获取用户公开信息,用户点击确定即可。但是这两种都需要是按照微信的要求来拼接成特殊的微信链接,因此该域名是微信自带的,就不是我们自己公众号的JS安全域名了;

7、所以,对于分享后的链接,如果还需要获取用户code,就要用其他方法实现,我用的是添加了一个空白页面,在该页面加载后跳转微信获取code的链接,http://dev.spbcn.org/wechat-vote-phone/redirect.html该链接是个空白页面,该页面代码如下;


window.onload = function () {
// 重定向链接,跟微信公众号中获取用户code是一样的链接
window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect"
}

8、该方法有弊端,就是多加了一个空白页面,暂时没想到好的办法,欢迎大家留言;

9、如果不加这一步,分享出来的链接显示正常,但是获取不到code,后端就无法判断用户,导致无法限制用户投票;