微信开发公众号页面配置JS-SDK调用微信接口

一：前期准备，

1，首先你需要一台服务器,：阿里云或者腾讯云啥的，最便宜的可以选择类似阿里云这种轻量级服务器，和域名配置好A记录。

2，需要在服务器打架node环境：可以找客服帮忙基本配置环境搭好。

3，需要有一个自己的公众号：详见文档/s?id=1602809939178372942&wfr=spider&for=pc

二：配置

1，公众号配置：IP白名单：为服务器IP地址。

2，公众号配置：JS接口安全域名。

node后端JS代码：

var express = require('express'); //node的一个框架 就是相当于jqueryvar path = require('path');var request = require('request');var ejs = require('ejs'); // 后台模板库var wechat = require('wechat'); //第三方处理微信推送的库var https = require('https'); // node 端 请求别的服务的模块var sign = require('sign'); //微信提供的签名工具const stringRandom = require('string-random')const crypto = require('crypto')var app = express();app.use("*", function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");// if (req.method === 'OPTIONS') {// res.send(200)// } else {// next()// }next()});const getSha1 = function(str) {var sha1 = crypto.createHash("sha1"); //定义加密方式:md5不可逆,此处的md5可以换成任意hash加密的方法名称；sha1.update(str);var res = sha1.digest("hex"); //加密后的值dreturn res;};const getSignature = function(nowUrl,key){let noncestr = stringRandom(16,{numbers:false})let timestamp = new Date().getTime()let jsapi_ticket = `jsapi_ticket=${key}&noncestr=${noncestr}&timestamp=${timestamp}&url=${nowUrl}`;let signature = getSha1(jsapi_ticket)return {noncestr,timestamp,signature}}app.set('views', './views');app.engine('.html', ejs.__express);app.set('view engine', 'html');app.use(express.static('./'));//发送请求app.get('/index', function(req, res) {console.log('this is index')res.render('index');});//处理URL 验证的 微信服务器要通过get请求来测试的app.get('/weixin', wechat('wechat', function(req, res, next) {console.log('true');}));//处理后台获取签名的请求app.post('/getSignature', function(req, res) {let nowurl = req.headers['referer']console.log(nowurl)console.log('this is getSignature')var token = 'wechat',appsecret = '', //你申请的APPID = '', //你申请的idurl = '' //JS接口安全域名 参与签名用的Res = res;//发送https get请求 获取 access_token;lhttps.get("https://api./cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + appsecret, function(res) {var datas = [];var size = 0;res.on('data', function(data) {datas.push(data); size += data.length;});res.on("end", function() {var buff = Buffer.concat(datas, size);var result = buff.toString();//console.log(JSON.parse(result).access_token);// 获取 jsapi_ticket //异步嵌套是不合理的 不推荐这样 使用promisehttps.get('https://api./cgi-bin/ticket/getticket?access_token=' + JSON.parse(result).access_token + '&type=jsapi', function(res) {var datas = [];var size = 0;res.on('data', function(data) {datas.push(data);size += data.length;});res.on('end', function() {var buff = Buffer.concat(datas, size);var rlt = buff.toString();let resultData = getSignature(nowurl,JSON.parse(rlt).ticket)rlt = Object.assign(JSON.parse(rlt),resultData)// var config = sign(JSON.parse(rlt).ticket, url);// console.log(111,config)Res.json(rlt);});}).on('error', function(e) {console.log("Got error: " + e.message);})});}).on('error', function(e) {console.log("Got error: " + e.message);});});var server = app.listen(80, function() {var host = server.address().address;var port = server.address().port;console.log('Example app listening at http://%s:%s', host, port);});

前端代码：

1,先设置wx.config

this.$post("/getSignature", {}).then(config => {console.log(config)// config = JSON.parse(config);if (config != undefined && config != null) {wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，appID公众号的唯一标识timestamp: config.timestamp, // 必填，生成签名的时间戳nonceStr: config.noncestr, // 必填，生成签名的随机串signature: config.signature,// 必填，签名，见附录1jsApiList: ['getLocation', 'scanQRCode', 'closeWindow', 'checkJsApi', 'startRecord', 'stopRecord', 'translateVoice', 'openCard','chooseImage']// 必填，需要使用的JS接口列表，所有JS接口列表见附录2});// alert('配置成功！');}});

2,在调取微信接口

wx.ready(function () {wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度console.log(latitude,longitude,speed,accuracy)alert(latitude,longitude,speed,accuracy)}});wx.scanQRCode({needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果alert(result);}});})