微信端html5页面如何调用分享接口

1、前端用的angular1框架，首先需要在index页面引入微信接口文件；

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2、在myApp.run文件中写微信分享函数，注意该函数需要将当前页面的url获取并解析，然后发给后端来生成对应签名，直接上代码；

// 微信分享函数      function wxShare() {          var url = $location.absUrl().split('#')[0];              wxServices.postWxShare(url).then(function (res) {              if (res.data.code == 0) {                  var respanse = res.data.data;                  wx.config({                      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。                      appId: respanse.appId,                      timestamp: respanse.timestamp, // 必填，生成签名的时间戳                      nonceStr: respanse.nonceStr, // 必填，生成签名的随机串                      signature: respanse.signature,// 必填，签名                      jsApiList: ['onMenuShareTimeline',                          'onMenuShareAppMessage',                          'onMenuShareQQ',                          'onMenuShareWeibo',                          'onMenuShareQZone']// 必填，需要使用的JS接口列表                  });              }          })      }

3、在该函数后，自定义分享内容，代码如下；

wx.ready(function () {          var obj = {              title: 'SPBCN团体赛开始投票啦！', // 分享标题              desc: 'SPBCN团体赛开始投票了，快来为我们加油吧！', // 分享描述              link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致              // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，              // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；              imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享图标              fail: function (res) {                  alert(JSON.stringify(res));              }          };          // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口          wx.onMenuShareAppMessage(obj);            // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口          wx.onMenuShareTimeline(obj);            // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口          wx.onMenuShareQQ(obj);            // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口          wx.onMenuShareWeibo(obj);            // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口          wx.onMenuShareQZone(obj);      })

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

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，后端就无法判断用户，导致无法限制用户投票；

以上就是微信端html5页面如何调用分享接口的详细内容，更多内容请关注技术你好其它相关文章！