分享Nodejs接入微信JS-SDK的全过程
这篇文章主要介绍了关于分享Nodejs接入微信JS-SDK的全过程，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
本以为接入微信JS-SDK是一件很简单的事情，结果掉坑里好几天，查阅了各种没用的资料，终于翻山倒海的倒腾出来了，我要记下来，希望后面的人看到的这个文章能帮助你早点爬出坑来
步骤一：设置JS接口安全域名
登录到你的微信公众平台后，左侧菜单选择设置-》公众号设置-》功能设置-》JS接口安全域名。它的上面给你列出了几个注意事项，比如要备案通过的域名，要将MP_verify_nnbEERhXNfbMC8Z0.txt上传到服务器，这一步按照操作即可，这时会像你所填写的这个地址发送一个请求里面，你接受到后还需要利用sha1加密进行比较
Nodejs代码：
var express = require('express');
var crypto = require('crypto'); //引入加密模块
var config = require('./config');//引入配置文件
var http = require('http');
var app = express();
app.get('/wx', function (req, res) {
//1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
var signature = req.query.signature,//微信加密签名
timestamp = req.query.timestamp,//时间戳
nonce = req.query.nonce,//随机数
echostr = req.query.echostr;//随机字符串
//2.将token、timestamp、nonce三个参数进行字典序排序
var array = [config.token, timestamp, nonce];
array.sort();
//3.将三个参数字符串拼接成一个字符串进行sha1加密
var tempStr = array.join('');
const hashCode = crypto.createHash('sha1'); //创建加密类型
var resultCode = hashCode.update(tempStr, 'utf8').digest('hex'); //对传入的字符串进行加密
console.log(signature)
//4.开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
if (resultCode === signature) {
res.send(echostr);
} else {
res.send('mismatch');
}
});
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);
});config文件代码：
{
"token":"test",
"appId":"wx1c9dedd4d06c8f14",
"appSecret":"07b365cb9e600b5ce04915f59623eb99"
}步骤二：前台的html怎么调用接口
官方提供的http://203.195.235.76/jssdk/ 这个还是很有帮助的，前台的配置都是从这里面复制过去的，首先创建html页面，用来调用接口实现功能，这里需要注意下，没有认证的订阅号有些接口无法调用（具体的权限看百度结果：https://jingyan.baidu.com/art...）
我这里调用图片拍照/手机选择这个功能，创建Image.html页面，Image.html代码如下：(这里面的代码大部分都是复制官方提供的那个页面的，这不是重点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择图像</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
<h3 id="menu-image">图像接口</h3>
<span class="desc">拍照或从手机相册中选图接口</span>
<button class="btn btn_primary" id="chooseImage">chooseImage</button>
</body>
<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$.get("http:/xx.xx.cn/getsign", function (res) {
console.log(res)
wx.config({
debug: true, // 开启调试模式
appId: "你的appid", // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.noncestr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名，见附录1
jsApiList: ['chooseImage',
'previewImage',
'uploadImage',
'downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
})
</script>
<script>
wx.error(function(res){
console.log(JSON.stringify(res))
})
wx.ready(function () {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已选择 ' + res.localIds.length + ' 张图片');
},
error:function(res){
alert("error")
alert("res")
}
});
};
})
</script>
</html>步骤三：后台生成签名认证
终于到了这几天一直卡在的点上，反反复复的config：invalid signature错误，后面终于发现问题，1个是生成时间戳要精确到秒 2.生成时所要求的URL其实是前台页面的url地址
下面一步一步来做，首先创建jssdk.js 在这个下面用来返回wx.config所需要的信息（具体每个都啥意思，这个你看官方文档写的很明白了https://mp.weixin.qq.com/wiki...），可以在开发的时候将生成token/ticket都打印出来，在官方提供的工具上面https://mp.weixin.qq.com/debu... 进行测试，比较signature是不是一致
完整jssdk.js代码如下：
var request = require('request'),
cache = require('memory-cache'),
sha1 = require('sha1')
var express = require('express');
var app = express();
app.use('/wx', express.static('static'));
app.get('/getsign', function (req, res) {
var url = "http://xx.xx.cn/wx/Image.html"
console.log(url)
var noncestr = "123456",
timestamp = Math.floor(Date.now() / 1000), //精确到秒
jsapi_ticket;
if (cache.get('ticket')) {
jsapi_ticket = cache.get('ticket');
// console.log('1' + 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url);
obj = {
noncestr: noncestr,
timestamp: timestamp,
url: url,
jsapi_ticket: jsapi_ticket,
signature: sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
};
res.send(obj)
} else {
request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret', function (error, response, body) {
if (!error && response.statusCode == 200) {
var tokenMap = JSON.parse(body);
request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + tokenMap.access_token + '&type=jsapi', function (error, resp, json) {
if (!error && response.statusCode == 200) {
var ticketMap = JSON.parse(json);
cache.put('ticket', ticketMap.ticket, (1000 * 60 * 60 * 24)); //加入缓存
// console.log('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url);
obj = {
noncestr: noncestr,
timestamp: timestamp,
url: url,
jsapi_ticket: ticketMap.ticket,
signature: sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
}
res.send(obj)
}
})
}
})
}
});
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);
});步骤四：怎么调试
1.都写完了以后，在浏览器上运行Image.html看不到效果，要在手机微信里面才有效果，这时候可以用草料二维码 https://cli.im/url 一直在用，很好用，你把地址贴过来（http://xx.xx.cn/wx/Image.html），生成一个二维码，手机微信扫一扫就可以了
2.Image.html上的wx.config中的debug一定要设置为true，在wx.ready的外面加上
wx.error(function(res){
console.log(JSON.stringify(res))
})以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是分享Nodejs接入微信JS-SDK的全过程的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
Python vs. JavaScript：比较用例和应用程序
Apr 21, 2025 am 12:01 AM
Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
