前端实现微信分享,微信分享接口如何调用
最近公司做了一个H5页面给学生投票，主要用在微信上，需要添加微信分享功能；
本文主要记录调用微信分享接口时的注意事项；
1.对于前端使用的angular1框架，首先需要将微信接口文件引入索引页面；
script= http://res.wx.qq.com/open/js/jweixin-1.2.0.js/script2.在myApp.run文件中写微信分享功能。注意这个函数需要获取并解析当前页面的url，然后发送到后端生成相应的签名，直接编码；
//微信分享功能function wx share(){ var URL=$ location . absurl()。split( # )[0]；wxServices.postWxShare(url)。然后(function(RES){ if(RES . data . code==0){ var respanse=RES . data . data；Wx.config({ debug: false，//打开调试模式，所有api调用的返回值都会在客户端告警出来。要查看传入参数，可以在pc端打开，参数信息会通过log录入，只在pc端打印。appid:response . appid，timestamp:response . timestamp，//必选，timestamp non centr:response . non centr，//必选，随机字符串签名：respanse.signature，//必选，JSAPI的签名列表：[ onmenusharetime ， OnMenuShareAppMessage ， OnMenuShareQQ ， OnMenuShareWeibo ， OnMenuShareQZone ]//必选，要使用的JS接口列表})；}}}}解析完当前url后，发送到后端接口。后端需要返回appId、时间戳、随机字符串和签名，然后根据需要手动添加接口列表(jsApiList)。注意，它是以数组的形式出现的。这里我只需要调用共享接口；
调试时可以将debug改为true，这样每次调用微信接口都会有接口信息告警出来，方便检查接口调用是否正常；
3.此功能后，自定义分享内容。代码如下：
wx . ready(function(){ var obj={ title: SPBCN团体赛开始投票！，//分享标题desc:‘SPBCN团体赛已经开始投票了，快来为我们加油吧！’，//分享描述链接：‘http://dev.spbcn.org/wechat-vote-phone/redirect.html,//Share’链接，其域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。//这个链接是重定向链接，因为需要获取用户代码。但是这个链接不能直接写微信的链接来获取代码。//所以你需要点击重新加载一个新页面来重定向重新打开微信链接来获取代码获取用户信息。imgurl: http://cdn.spbcn.org/img/logo-image.png,//share图标失败：函数(RES){ alert(JSON . stringify(RES))；} };//2.1监控“与好友分享”，点击按钮，自定义界面wx.onMenuShareAppMessage(obj)用于分享内容和结果；//2.2监控“分享到朋友圈”按钮点击，自定义分享内容和分享结果的界面wx . onmenusharetime(obj)；//2.3监控“分享到QQ”按钮的点击，自定义分享内容和结果的界面wx . onmenushareqq(obj)；//2.4监控“分享到微博”按钮的点击，自定义分享内容和结果的接口wx . onmenusharewebo(obj)；//2.5监控“分享到QZone”按钮的点击，自定义分享内容和分享界面wx . onmenushareqzone(obj)；})wx.ready在wx.config我定义了一个共享内容的通用对象后自动运行，然后我就可以直接调用它了。还可以为分享好友、朋友圈、微博等定义不同的内容。根据你的需求。查一下微信界面文档就知道了。
主要强调分享链接，必须在你微信官方账号设置的JS安全域名下，否则无法成功分享；
分享失败的表现是分享链接图片无法加载你定制的图片，分享标题错误；
5.我的项目是投票，所以我需要在每次点击时获取用户代码。如果只是分享文章，不需要用户信息，只要把链接改成你的文章链接就可以了；
6.对于投票类，我在这里做了特殊处理，就是重定向链接。大家都知道H5可以通过两种方式获取微信用户信息，一种是关注微信微信官方账号；另一个提示用户获取用户的公开信息，用户点击确定即可。但是两者都需要按照微信的要求拼接成专门的微信链接，所以域名是微信自带的，所以在微信官方账号中并不是我们自己的JS安全域名；
7.所以，对于共享链接，如果还需要获取用户代码，就要使用其他方法。我加了一个空白页，页面加载后跳转到微信获取代码链接。http://dev.spbcn.org/wechat-vote-phone/redirect.html的链接是一个空白页，这个页面的代码如下；
Window.onload=function () {//重定向链接，与链接window . location . href= https://open.weixin.qq.com/connect/oauth2/authorize? Appid=微信官方账号Appid Redirect _ uri=http://dev.spbcn.org/wechat-vote-phone? Type=weixin scope=snsapi _ userinforesponse _ Type=codestate=state # we chat _ Redirect } 8 .这种方法有弊端，就是多加了一个空白页，暂时还没想好办法。欢迎留言；
9.如果不加这一步，共享链接正常显示，但是如果拿不到代码，后端无法判断用户，导致无法限制用户投票；
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。