微信js-sdk分享功能和获取微信用户信息的实现

　　最近公司的项目中有要用到微信的分享功能，并要获取分享者的信息，第一次做这样的需求，自己看了下微信官方文档，尝试了几天，最终实现了需求，现将实现方法记录在此，方便以后自己查看。

　　首先要实现微信链接分享并自定义分享标题和描述及缩略图功能，必须要使用微信提供的js-sdk，首先在要分享的页面引入js-sdk的js文件，也就是在页面引入如下文件<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>，

　　然后要配置wx.config,配置信息如下：

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

wx.config中的appId是你微信公众号的唯一标识，也就是说微信的js-sdk依托于微信公众号，想要使用js-sdk，必须要有一个公众号，然后登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，然后将你要分享的页面放在js接口安全域名下，只有在js接口

安全域名下的文件才能调用微信提供的接口，timestamp,nonceStr,signature这几个参数都是根据appid和appsecret先通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential &appid= appid &secret= appsecret，计算出access_token,然后用得到的access_token通过https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=access_toekn &type=jsapi计算出jsapi_ticket，然后通过http://demo.open.weixin.qq.com/jssdk/sample.zip这个官方提供的demo实现签名，这里我使用的是nodeJS版本，这里通过sign(data, resUrl)方法实现签名,data表示得到的jsapi_ticket,resUrl,表示分享页面的链接，因为在微信中分享出去的页面可能url会改变或者页面的url会动态变化，所以这里的resUrl不能写死，要从前端传入，如果页面url与这里签名的resUrl不一样，分享功能就不会成功，计算出的签名传给前端，签名包括timestamp,nonceStr,signature等信息，前端将这些信息填入wx.config，jsApiList是需要使用的JS接口列表，填入需要的接口名就可以了，可以在https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115页面中的附录2查看所有JS接口列表，这样wx.config就完成了。然后通过以下配置来自定义分享功能

                            wx.ready(function() {
                                wx.onMenuShareAppMessage({//分享给好友
                                    title: '', // 分享标题
                                    desc: '', // 分享描述
                                    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: '', // 分享图标
                                    type: '', // 分享类型,music、video或link，不填默认为link
                                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                    success: function() {
                                        // 用户点击了分享后执行的回调函数
                                    }
                                });

                                wx.onMenuShareTimeline({//分享到朋友圈
                                    title: '', // 分享标题
                                    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: '', // 分享图标
                                    success: function() {
                                        // 用户点击了分享后执行的回调函数
                                    }
                                });

                            });

至此分享功能就完成了。

获取分享者的信息通过微信网页授权来实现，具体可查看https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842，

具体就是通过以下链接来实现

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
把以上链接中的appid换成你自己公众号的appid，redirect_uri写你要打开的页面，此项目中写的还是分享页面的链接，这样打开上面的链接，会得到一个code，然后会回调redirect_uri打开你的页面，这样你的页面后面就会跟一个code参数，这里的redirect_uri不能直接写，要先把链接用urlEncode进行处理，
处理后得到的字符串放入redirect_uri，这样打开这个链接并跳转到redirect_uri,些时我们就可以获取到code，得到code我们就能通过

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code得到 access_token和openid，
最后通过 https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
就可以得到用户信息，大致过程就是这样了。

微信js-sdk分享功能和获取微信用户信息的实现

猜你喜欢