微信真坑，鼓捣了一天，眼睛都瞎了，最后发现个人微信公众账号没有权限，尼玛。。。
1. 注册微信公众平台
为了能够使用微信的接口，需要注册开发者账号身份， 这个自行百度
2.搭建一个服务器
我们需要一个服务器，来获取访问微信API的签名，这里使用NodeJS服务器：
const request = require('request')
var express = require('express');
var app = express();
const sha1 = require('sha1')
const waterfall = require('async/waterfall')
const NodeCache = require('node-cache')
const cache = new NodeCache({stdTTL: 3600, checkperiod: 3600})
// app.get('/wxJssdk', function (req, res) {
// let wx = req.query
// // 1）将token、timestamp、nonce三个参数进行字典序排序
// let token = 'jegfjaeghfuyawegfgjdbh'
// let timestamp = wx.timestamp
// let nonce = wx.nonce
// // 2）将三个参数字符串拼接成一个字符串进行sha1加密
// let list = [token, timestamp, nonce]
// let result = sha1(list.sort().join(''))
// // 3）开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
// if (result === wx.signature) {
// res.send(wx.echostr)
// } else {
// res.send(false)
// }
// })
app.get('/wxJssdk/getJssdk', function (req, res) {
let grant_type = 'client_credential'
let appid = 'xxxx'
let secret = 'xxxx' // appscret
let steps = []
// 第一步，获取access_token
steps.push((cb) => {
let steps1 = []
// 第1.1步，从缓存中读取access_token
steps1.push((cb1) => {
let access_token = cache.get('access_token', (err, access_token) => {
cb1(err, access_token)
})
})
// 第1.2步，缓存中有access_token则直接返回，如果没有，则从服务器中读取access_token
steps1.push((access_token, cb1) => {
if (access_token) {
cb1(null, access_token, 'from_cache')
} else {
request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
cb1(err, JSON.parse(body).access_token, 'from_server')
})
}
})
// 第1.3步，如果是新从服务器取的access_token，则缓存起来，否则直接返回
steps1.push((access_token, from_where, cb1) => {
if (from_where === 'from_cache') {
console.log(' === 成功从缓存中读取access_token: ' + access_token + ' ===')
cb1(null, access_token)
} else if (from_where === 'from_server') {
cache.set('access_token', access_token, (err, success) => {
if (!err && success) {
console.log(' === 缓存已过期，从服务器中读取access_token: ' + access_token + ' ===')
cb1(null, access_token)
} else {
cb1(err || 'cache设置access_token时，出现未知错误')
}
})
} else {
cb1('1.3获取from_where时，from_where值为空')
}
})
waterfall(steps1, (err, access_token) => {
cb(err, access_token)
})
})
// 第二步，获取ticket
steps.push((access_token, cb) => {
let steps1 = []
// 第2.1步，从缓存中读取ticket
steps1.push((cb1) => {
let ticket = cache.get('ticket', (err, ticket) => {
cb1(err, ticket)
})
})
// 第2.2步，缓存中有ticket则直接返回，如果没有，则从服务器中读取ticket
steps1.push((ticket, cb1) => {
if (ticket) {
cb1(null, ticket, 'from_cache')
} else {
request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
cb1(err, JSON.parse(body).ticket, 'from_server')
})
}
})
// 第2.3步，如果新从服务器取的ticket，则缓存起来，否则直接返回
steps1.push((ticket, from_where, cb1) => {
if (from_where === 'from_cache') {
console.log(' === 成功从缓存中读取ticket: ' + ticket + ' ===')
cb1(null, ticket)
} else if (from_where === 'from_server') {
cache.set('ticket', ticket, (err, success) => {
if (!err && success) {
console.log(' === 缓存已过期，从服务器中读取ticket: ' + ticket + ' ===');
cb1(null, ticket)
} else {
cb1(err || 'cache设置ticket时，出现未知错误')
}
})
} else {
cb1('2.3获取from_where时，from_where值为空')
}
})
waterfall(steps1, (err, ticket) => {
cb(err, ticket)
})
})
// 第三步，生成签名
steps.push((ticket, cb) => {
let jsapi_ticket = ticket
let nonce_str = '123456'
let timestamp = Math.floor((new Date().getTime())/1000)
let url = req.query.url
let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url
console.log('signature ' + str)
let signature = sha1(str)
console.log('==> ' + signature)
cb(null, {
appId: appid,
timestamp: timestamp,
nonceStr: nonce_str,
signature: signature,
ticket: ticket
})
})
waterfall(steps, (err, data) => {
res.setHeader("Content-Type", "text/json");
res.setHeader("Access-Control-Allow-Origin", "*");
if (err) {
res.send({status: 'error', data: err})
} else {
res.send({status: 'success', data: data})
}
})
})
app.use('/wxJssdk/public', express.static('public'))
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
})
出处是：https://www.jb51.net/article/118729.htm
一定要注意，生成签名的部分打log，然后和微信公众平台上的签名验证工具对比一下，比如时间戳位数，url对不对等
3. 在H5中导入
<script src="./js/jquery-1.11.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
var currentUrl = encodeURIComponent(location.href.split('#')[0])
$.get('http://xxxx.com/wxJssdk/getJssdk?url=' + currentUrl, function (data, status) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.data.appId, // 必填，公众号的唯一标识
timestamp: data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
signature: data.data.signature,// 必填，签名
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});
console.log('wx finish');
wx.ready(function(){
console.log('wx ready');
// alert('wx ready')
wx.error(function(res){
// config 信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的 debug 模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
console.log("errorMSG:"+res);
});
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
console.log('res'+ res);
}
});
var shareParam = {
title: '刘彦博李茜婷的结婚请柬', // 分享标题
// desc: '邀请您的参加', // 分享描述
link: 'http://www.realank.com/wedding/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://www.realank.com/wedding/headimgwx.jpg', // 分享图标
// type: 'link', // 分享类型,music、video或link，不填默认为link
// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
trigger: function (res) {
console.log('用户点击发送给朋友');
},
success: function (res) {
console.log('已分享');
},
cancel: function (res) {
console.log('已取消');
},
fail: function (res) {
console.log(JSON.stringify(res));
}
};
wx.onMenuShareTimeline(shareParam);
wx.onMenuShareAppMessage(shareParam);
});
})
</script>
这里使用的是ajax请求的，请求签名的时候，需要加上一个url参数，取当前url一定要使用encodeURIComponent(location.href.split('#')[0])方法啊，忘记从哪个网站上看到的了，试了好几个小时，因为这个大哥茅塞顿开，好人啊
然后在微信web开发者工具中测试就能通过，但是真机没法通过，因为个人微信公众号没有权限！！！
网友评论