最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

微信端H5页面调用分享接口

IT培训 admin 1浏览 0评论

微信端H5页面调用分享接口

最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能;
本文章主要是记录调用微信分享接口需要注意的事项;
1、前端用的angular1框架,首先需要在index页面引入微信接口文件;

<script src=".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接口列表});}})}

将当前url解析后,发给后端接口,后端需要将appId,时间戳,随机字符串和签名返回,然后接口列表(jsApiList)根据需要自己手动添加,注意是一个数组的形式,我这里只需要调用分享接口;
调试的时候,可以将debug更改为true,这样在就每次调用微信接口的时候就会有接口信息alert出来,方便查看接口调用是否正常了;
3、在该函数后,自定义分享内容,代码如下;

wx.ready(function () {var obj = {title: 'SPBCN团体赛开始投票啦!', // 分享标题desc: 'SPBCN团体赛开始投票了,快来为我们加油吧!', // 分享描述link: '.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致// 该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,// 所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;imgUrl: '.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);})

wx.ready是在wx.config之后自动运行的,我是定义了一个分享内容的通用对象,然后直接调用即可,也可以根据需要来分别定义分享朋友、朋友圈、微博等的不同内容,具体查看微信接口文档即可;
主要强调一下分享链接,该链接必须是你的公众号设置的JS安全域名下的,不然无法分享成功;
分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;
5、我这个项目是投票类的,所以需要每次点击进来之后获取用户code,如果你只是分享文章,不需要用户信息,直接将link更改为你的文章链接即可;
6、对于投票类,我这里特殊处理了,就是重定向了该链接,大家都知道H5获取微信用户信息有两种,一种是关注微信公众号;另一种提示用户需要获取用户公开信息,用户点击确定即可。但是这两种都需要是按照微信的要求来拼接成特殊的微信链接,因此该域名是微信自带的,就不是我们自己公众号的JS安全域名了;
7、所以,对于分享后的链接,如果还需要获取用户code,就要用其他方法实现,我用的是添加了一个空白页面,在该页面加载后跳转微信获取code的链接,.html该链接是个空白页面,该页面代码如下;

window.onload = function () {// 重定向链接,跟微信公众号中获取用户code是一样的链接window.location.href="=公众号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,后端就无法判断用户,导致无法限制用户投票;

微信端H5页面调用分享接口

最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能;
本文章主要是记录调用微信分享接口需要注意的事项;
1、前端用的angular1框架,首先需要在index页面引入微信接口文件;

<script src=".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接口列表});}})}

将当前url解析后,发给后端接口,后端需要将appId,时间戳,随机字符串和签名返回,然后接口列表(jsApiList)根据需要自己手动添加,注意是一个数组的形式,我这里只需要调用分享接口;
调试的时候,可以将debug更改为true,这样在就每次调用微信接口的时候就会有接口信息alert出来,方便查看接口调用是否正常了;
3、在该函数后,自定义分享内容,代码如下;

wx.ready(function () {var obj = {title: 'SPBCN团体赛开始投票啦!', // 分享标题desc: 'SPBCN团体赛开始投票了,快来为我们加油吧!', // 分享描述link: '.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致// 该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,// 所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;imgUrl: '.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);})

wx.ready是在wx.config之后自动运行的,我是定义了一个分享内容的通用对象,然后直接调用即可,也可以根据需要来分别定义分享朋友、朋友圈、微博等的不同内容,具体查看微信接口文档即可;
主要强调一下分享链接,该链接必须是你的公众号设置的JS安全域名下的,不然无法分享成功;
分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;
5、我这个项目是投票类的,所以需要每次点击进来之后获取用户code,如果你只是分享文章,不需要用户信息,直接将link更改为你的文章链接即可;
6、对于投票类,我这里特殊处理了,就是重定向了该链接,大家都知道H5获取微信用户信息有两种,一种是关注微信公众号;另一种提示用户需要获取用户公开信息,用户点击确定即可。但是这两种都需要是按照微信的要求来拼接成特殊的微信链接,因此该域名是微信自带的,就不是我们自己公众号的JS安全域名了;
7、所以,对于分享后的链接,如果还需要获取用户code,就要用其他方法实现,我用的是添加了一个空白页面,在该页面加载后跳转微信获取code的链接,.html该链接是个空白页面,该页面代码如下;

window.onload = function () {// 重定向链接,跟微信公众号中获取用户code是一样的链接window.location.href="=公众号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,后端就无法判断用户,导致无法限制用户投票;

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论