ホームページ > 記事 > ウェブフロントエンド > Nodejs を WeChat JS-SDK に接続するプロセス全体を共有する
この記事では、主に WeChat JS-SDK に接続するための Nodejs を共有するプロセス全体を紹介します。これで、必要な友達と共有できるようになりました。とても単純なことですが、数日間泥沼にはまり、いろいろと役に立たない情報を調べて、悩んだ末に思いついたことを書いていきたいと思います。将来この記事を読む人があなたを助けることができるように、できるだけ早くピットから抜け出します
ステップ 1: JS インターフェイスの安全なドメイン名を設定します
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" }
ステップ 2: フロントエンド html でインターフェイスを呼び出す方法
携帯電話で写真を撮る/この機能を選択して、Image.html ページを作成します。 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>
ステップ 3: バックグラウンドで署名認証を生成する
段階的に実行してみましょう。まず、jssdk.js を作成し、それを使用して wx を返します。設定に必要な情報 (具体的にはそれぞれが何を意味するかについては、公式ドキュメント https://mp.weixin.qq を読むと明確に理解できます)。 .com/wiki...)、開発中に token/ を生成できます チケットを印刷し、公式ツール https://mp.weixin.qq.com/debu... でテストして、署名が一貫しているかどうかを比較します
完全な 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); });
ステップ 4: デバッグ方法
2.Image .html の wx.config のデバッグを true に設定し、追加する必要がありますwx.ready の外の
wx.error(function(res){ console.log(JSON.stringify(res)) })
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連おすすめ:
Node非同期I/O入門vue.jsベースのダイアログプラグインart-dialog-vue2.0のリリース内容以上がNodejs を WeChat JS-SDK に接続するプロセス全体を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。