为了快速帮大家理解,这次的demo就直接修改公众号官网的示例代码来给大家演示。如果大家不想听我啰嗦,可以直接移步官方文档——https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。
由于移动设备调试起来不是特别方便,建议大家先去官网下载微信的web开发者工具,直接在PC上测试。具体用法非常简单,我就不赘述了。需要注意的是必须得先在此页面(https://mp.weixin.qq.com/cgi-bin/safecenterstatus?action=devlist&token=711880374&lang=zh_CN)绑定开发者账号才能使用工具
上一篇教程咱们已经完成JS接口安全域名的绑定,首先,在项目根目录下创建html静态页面
test.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>微信JS-SDK Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> </head>
<body ontouchstart=""> <div class="wxapi_container"> <div class="lbox_close wxapi_form"> <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span> <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button> </div> </div> </body>
<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> </script> <script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
</html>
|
接下来
① 在需要调用JS接口的页面引入如下JS文件
http://res.wx.qq.com/open/js/jweixin-1.2.0.js(支持https),如果还不确定自己网站的协议将来是否支持https,可以直接省略协议(//res.wx.qq.com/open/js/jweixin-1.2.0.js)
② 后端实现签名生成算法
下面这段引用自官网:
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
1 2 3 4 5 6 7 8
| wx.config({ debug: true, appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: [] });
|
由于这些权限验证配置都是后端生成的,所以我们需要修改express.js文件,官网提供了生成签名的算法:
附录1-JS-SDK使用权限签名算法
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
- 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
- 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=ACCESS\_TOKEN&type=jsapi
成功返回如下JSON:
1 2 3 4 5 6
| { "errcode": 0, "errmsg": "ok", "ticket": "bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in": 7200 }
|
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
签名算法
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
即signature=sha1(string1)。 示例:
1 2 3 4
| noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value
|
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:
1
| jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
|
步骤2. 对string1进行sha1签名,得到signature:
1
| 0f9de62fce790f9a083d5c99e95740ceb90c27ed
|
注意事项
- 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
- 签名用的url必须是调用JS接口页面的完整URL。
- 出于安全考虑,开发者必须在服务器端实现签名的逻辑。
如出现invalid signature 等错误详见附录5常见错误及解决办法。
ps:我们这里使用是全局基础的access_token,要注意其与关于网页授权access_token的区别
复述了一堆,下面我们用node来实现上面的算法,因为是基础入门教程,我对代码做了些精简:
① 后端代码中不会使用数据库,通过直接将获取的access_token写到文件系统的方式作为缓存机制(当然你也可以把access_token放到一个全局变量里,不过一旦服务器重启变量就从内存里消失了,对于测试来说咱们还是珍惜一下有限的调用次数吧)。
② 后端代码不会涉及定时任务,由于access_token和jsapi_ticket的时效时间都是2小时,如果生成签名失败,需要手动清空缓存(这里是指删除文件),因为我会每次生成签名前会从缓存(这里是指文件系统)中取accessToken,如果不存在就会从微信服务器重新获取并刷新缓存(重新生成文件)
修改后的express.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
| const fs = require('fs') const http = require('http') const https = require('https') const crypto = require('crypto') const express = require('express') const bodyParser = require('body-parser') const app = express()
const APP_ID = '测试号的APP_ID' const APP_SECRET = '测试号的APP_SECRET' const TOKEN = '手动填写的TOKEN'
app.get('/verify', function (req, res) { const timestamp = req.query.timestamp const nonce = req.query.nonce const shasum = crypto.createHash('sha1') shasum.update([TOKEN, timestamp, nonce].sort().join('')) const generatedSignature = shasum.digest('hex') if (generatedSignature === req.query.signature) { res.send(req.query.echostr) } else { res.send('fail') } })
app.get('/file/:path', function (req, res, next) { res.sendFile(req.params.path, { root: __dirname }) })
function getAccessToken() { if (fs.existsSync('./access-token.txt')) { const accessToken = fs.readFileSync('./access-token.txt', { flag: 'r', encoding: 'utf8' }) console.log('get cached accessToken: ', accessToken) return Promise.resolve(accessToken) } else { return new Promise((resolve, reject) => { https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + APP_ID + '&secret=' + APP_SECRET, function (req, res) { let jsonStr = '' req.on('data', function (data) { jsonStr += data }) req.on('end', function () { const accessToken = JSON.parse(jsonStr)['access_token'] console.log('refresh access token: ', accessToken) fs.writeFileSync('./access-token.txt', accessToken, { flag: 'w', encoding: 'utf8' }) resolve(accessToken) }) }) }) } }
function getTicket(accessToken) { if (fs.existsSync('./ticket.txt')) { const ticket = fs.readFileSync('./ticket.txt', { flag: 'r', encoding: 'utf8' }) console.log('get cached ticket: ', ticket) return Promise.resolve(ticket) } else { return new Promise((resolve, reject) => { https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + accessToken + '&type=jsapi', function (req, res) { let jsonStr = '' req.on('data', function (data) { jsonStr += data }) req.on('end', function () { const ticket = JSON.parse(jsonStr)['ticket'] console.log('refresh ticket: ', ticket) fs.writeFileSync('./ticket.txt', ticket, { flag: 'w', encoding: 'utf8' }) resolve(ticket) }) }) }) } }
app.all('/getWXConfig', function (req, res) { const url = req.query.url getAccessToken() .then(accessToken => getTicket(accessToken)) .then(ticket => { const timestamp = new Date().getTime() const nonceStr = 'niu_bi'
const tempString = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + url const shasum = crypto.createHash('sha1') shasum.update(tempString) const signature = shasum.digest('hex') console.log('signature: ', signature) res.json({ appId: APP_ID, timestamp: timestamp, nonceStr: nonceStr, signature: signature }) }) })
const server = app.listen(3000, function () { const host = server.address().address const port = server.address().port console.log('server listening at %s:%s', host, port) })
|
③ 通过config接口注入权限验证配置
修改我们根目录下的test.html文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <script>
$.ajax({ type: 'get', url: '/getWXConfig', data: { url: window.location.href.split('#')[0] }, success: function (config) { console.log(config) initWechat(config) }, dataType: 'json' })
function initWechat(config) {
wx.config({ debug: true, appId: config.appId, timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); }
</script> <script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script> </html>
|
在微信web开发者中打开地址http://26s4ag.natappfree.cc/file/test.html(该域名上一个教程通过NATAPP获取的),如果弹出 { errMsg: config:ok },说明微信配置成功了。
④ 注册分享状态回调事件
通过ready接口处理成功验证
1 2 3 4 5 6 7 8
| wx.ready(function () {
});
|
通过error接口处理失败验证
1 2 3 4 5 6 7
| wx.error(function (res) {
});
|
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
1.success:接口调用成功时执行的回调函数。
2.fail:接口调用失败时执行的回调函数。
3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
(PS:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回)
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:
调用成功时:”xxx:ok” ,其中xxx为调用的接口名
用户取消时:”xxx:cancel”,其中xxx为调用的接口名
调用失败时:其值为具体错误信息
我这里只演示一个接口的使用,继续修改咱们的test.html中的 initWechat 函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
| function initWechat(config) {
wx.config({ debug: true, appId: config.appId, timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] })
wx.ready(function () {
document.querySelector('#onMenuShareAppMessage').onclick = function () { wx.onMenuShareAppMessage({ title: '我生平最佩服四种人', desc: '看黄片不快进的人,看黄片不打飞机的人,看完黄片还没打出来的人,打完了还能把黄片看完的人。 因为这代表了人类最珍贵的四种品质:踏实,正直,坚持,执着', link: window.location.origin + '/file/hentai.html', imgUrl: window.location.origin + '/file/huaji.png', type: 'link', dataUrl: '', trigger: function (res) { alert('用户点击发送给朋友') }, success: function (res) { alert('已分享') }, cancel: function (res) { alert('已取消') }, fail: function (res) { alert(JSON.stringify(res)) } })
alert('已注册获取“发送给朋友”状态事件') } })
wx.error(function (res) { alert(res.errMsg) }) }
|
⑤ 测试分享接口是否成功
首先点击右上角,选择“发送给朋友”,然后再点击页面上的“onMenuShareAppMessage”按钮,再次分享给朋友,如果两次的内容不同,那么恭喜你,微信自定义分享功能已经实现啦!
这里只介绍了“发送给朋友”的功能,其他同理,更多的接口请参阅微信JS-SDK说明文档
下一篇来讲解一下微信如何进行页面授权以及获取用户的openId。
完整代码戳这里
目录指引: