介绍
微信端h5页面怎么调用分享页面的接口?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
最近公司做了一个给学生投票的h5页面,主要是在微信端使用,需要添加微信分享功能,
记录调用微信分享接口需要注意的事项;
1,前端用的angular1框架,首先需要在索引页面引入微信接口文件;
& lt;脚本https://www.yisu.com/zixun/src=" http://res.wx.qq.com/open/js/jweixin-1.2.0.js "> 2,在myApp.run文件中写微信分享函数,注意该函数需要将当前页面的url获取并解析,然后发给后端来生成对应签名,直接上代码;
//微信分享函数
函数wxShare () {
url=$ var location.absUrl () .split (& # 39; # & # 39;) [0];
wxServices.postWxShare (url)。然后(函数(res) {
如果(res.data。代码==0){
var respanse=res.data.data;
wx.config ({
调试:假的,//开启调试模式,调用的所有api的返回值会在客户端提醒出来,若要查看传入的参数,可以在pc端打开,参数信息会通过日志打出,仅在pc端时才会打印。
appId: respanse.appId,
时间戳:respanse。时间戳,//必填,生成签名的时间戳
nonceStr: respanse。nonceStr,//必填,生成签名的随机串
签名:respanse。签名,//必填,签名
jsApiList: [& # 39; onMenuShareTimeline& # 39;
& # 39;onMenuShareAppMessage& # 39;
& # 39;onMenuShareQQ& # 39;
& # 39;onMenuShareWeibo& # 39;
& # 39;onMenuShareQZone& # 39;]//必填,需要使用的JS接口列表
});
}
}）
} 将当前url解析后,发给后端接口,后端需要将appId,时间戳,随机字符串和签名返回,然后接口列表(jsApiList)根据需要自己手动添加,注意是一个数组的形式,我这里只需要调用分享接口。
调试的时候,可以将调试更改为真,这样在就每次调用微信接口的时候就会有接口信息提醒出来,方便查看接口调用是否正常了,
3,在该函数后,自定义分享内容,代码如下;
wx。准备好(函数(){
var obj={
标题:& # 39;SPBCN团体赛开始投票啦! & # 39;//分享标题
描述:& # 39;SPBCN团体赛开始投票了,快来为我们加油吧! & # 39;//分享描述
链接:& # 39;http://dev.spbcn.org/wechat-vote-phone/redirect.html& # 39;//分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致//该链接是重定向链接,因为需要获取用户代码,但是该链接又无法直接写微信获取代码的链接,//所以需要点击后重新加载新的页面,来实现重定向,重新打开获取代码的微信链接,实现获取用户信息的功能。
imgUrl: & # 39; https://cache.yisu.com/upload/information/20200318/91/14478.jpg& # 39;//分享图标
失败:函数(res) {
警报(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监听“分享到qq空间”按钮点击,自定义分享内容及分享接口
wx.onMenuShareQZone (obj);
}) wx.ready是在wx。配置之后自动运行的,我是定义了一个分享内容的通用对象,然后直接调用即可,也可以根据需要来分别定义分享朋友,朋友圈,微博等的不同内容,具体查看微信接口文档即可。
主要强调一下分享链接,该链接必须是你的公众号设置的JS安全域名下的,不然无法分享成功;
分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;
5,我这个项目是投票类的,所以需要每次点击进来之后获取用户代码,如果你只是分享文章,不需要用户信息,直接将链接更改为你的文章链接即可。
6,对于投票类,我这里特殊处理了,就是重定向了该链接,大家都知道H5获取微信用户信息有两种,一种是关注微信公众号;另一种提示用户需要获取用户公开信息,用户点击确定即可。但是这两种都需要是按照微信的要求来拼接成特殊的微信链接,因此该域名是微信自带的,就不是我们自己公众号的JS安全域名了,
7,所以,对于分享后的链接,如果还需要获取用户代码,就要用其他方法实现,我用的是添加了一个空白页面,在该页面加载后跳转微信获取代码的链接,http://dev.spbcn.org/wechat-vote-phone/redirect.html该链接是个空白页面,该页面代码如下;
