test.html
<!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>
// 微信配置
$.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) {
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
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', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: window.location.origin + '/file/huaji.png', // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
trigger: function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
alert('用户点击发送给朋友')
},
success: function (res) {
// 用户确认分享后执行的回调函数
alert('已分享')
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
alert('已取消')
},
fail: function (res) {
// 分享失败时执行的回调函数
alert(JSON.stringify(res))
}
})
alert('已注册获取“发送给朋友”状态事件')
}
})
wx.error(function (res) {
alert(res.errMsg)
})
}
</script>
<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
</html>
express.js
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'
/**
* 加密/校验流程如下：
* 1）将token、timestamp、nonce三个参数进行字典序排序
* 2）将三个参数字符串拼接成一个字符串进行sha1加密
* 3）开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
*/
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 })
})
/**
* 获取缓存中的accessToken
* @returns {Promise}
*/
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)
})
})
})
}
}
/**
* 获取缓存中的ticket
* @param {boolean} accessToken
* @returns {Promise}
*/
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)
})
})
})
}
}
/**
* H5客户端 获取分享的信息
*/
app.all('/getWXConfig', function (req, res) {
const url = req.query.url
// 获取jsapi_ticket
getAccessToken()
.then(accessToken => getTicket(accessToken))
.then(ticket => {
// 生成签名
const timestamp = new Date().getTime() // 时间戳
const nonceStr = 'niu_bi' // 随机字符串
const tempString = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '&timestamp=' + 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)
})
