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

最近公司做了一个给学生投票的H5页面，主要是在微信端使用，需要添加微信分享功能；
本文章主要是记录调用微信分享接口需要注意的事项；
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接口列表});}})}

将当前url解析后，发给后端接口，后端需要将appId，时间戳，随机字符串和签名返回，然后接口列表（jsApiList）根据需要自己手动添加，注意是一个数组的形式，我这里只需要调用分享接口；
调试的时候，可以将debug更改为true，这样在就每次调用微信接口的时候就会有接口信息alert出来，方便查看接口调用是否正常了；
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);})

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

微信端H5页面调用分享接口相关推荐

h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
企业微信开发H5页面授权使用接口的问题
企业微信 h5踩坑指南企业微信开发H5页面授权使用接口的问题开发企业微信的时候 h5页面需要获取登录用户的信息,这个时候就需要jsdk里面的 [开发文档] (https://work.weixi ...
公众号开发-移动端h5页面调用微信扫一扫
前言: 大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例. 前不久,接到这么一个需求:在H5网页实现扫一扫功能. 要求:微信端以及浏览器均可以实现扫一扫功能,而且不能 ...
微信内 H5 页面自定义分享
起源: 最近公司在做一个活动的h5页面,在微信内打开时需要进行微信授权,然后后端会重定向到这个页面并且携带了一些参数(openid等).问题是点击微信的原生分享时,会把携带的这些参数一起分享出去,等于 ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
HTML——微信浏览器H5页面调用微信扫一扫
使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名.本文直接调用已封装好的接口来获取随机数(noncestr).时间戳(timestamp).签名(signatu ...
实现移动端H5页面调用摄像头
<h3>image图片</h3> <input type="file" accept="image/*" capture=&quo ...
html5 调用微信分享,HTML5教程之微信调用分享接口
1.前端用的angular1框架,首先需要在index页面引入微信接口文件: 2.在myApp.run文件中写微信分享函数,注意该函数需要将当前页面的url获取并解析,然后发给后端来生成对应签名,直接 ...
微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...

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

微信端H5页面调用分享接口相关推荐

最新文章

热门文章