nodeJS微信JSDK 配置

更新日期: 2019-09-22阅读量: 1408标签: 微信

一、微信公众平台申请一个测试公众号


二、配置nodejs 使用express框架搭建服务器

微信生成签名步骤:

1.获取token

2.通过token,获取jsapi_ticket

3.生成随机字符串,获取当前时间戳

4.排序拼接生成签名

  • 在routes---->index.js
var express = require('express');
var router = express.Router();
var axios = require('axios');
var sha1 = require('sha1');
var fs = require('fs');

let accessTokenJson = require('../user_token');

const APP_ID = 'wx47159511d53720fb'
const APP_SECRET = 'e8be2675730af8b743769e34fc8a7267'
let config_nonceStr = '' //随机字符串
let config_timestamp = '' //时间戳

/* GET home page. */
router.get('/', function(req, res, next) {
    res.send('这是首页')
});

router.get('/getWxConfig', function (req, res, next) {
  let url = req.query.url;  // 获取url
  getToken().then(getTicket).then(ret=>{
    res.json({ // 返回前端需要的配置config
      success:true,
      code:200,
      config_appid: APP_ID,
      config_sign: signature(ret, url),
      config_timestamp,
      config_nonceStr
    })
  })
});

/*获取token*/
function getToken(){
  return new Promise((resolve,reject)=>{
    //获取当前时间 
    var currentTime = new Date().getTime();
    if (accessTokenJson.access_token === '' || accessTokenJson.expires_time < currentTime){
      axios.get('https://api.weixin.qq.com/cgi-bin/token',{
        params:{
          appid: APP_ID,
          secret: APP_SECRET,
          grant_type: 'client_credential'
        }
      }).then(res=>{
        accessTokenJson.access_token = res.data.access_token;
        accessTokenJson.expires_time = new Date().getTime() + (parseInt(res.data.expires_in) - 200) * 1000;
        //更新本地存储
        fs.writeFile('../user_token.json', JSON.stringify(accessTokenJson));
        resolve(accessTokenJson.access_token)
      }).catch(err => {
        return Promise.reject(err);
      })
    }else{
      resolve(accessTokenJson.access_token)
    }
  })
}

/* 通过token,获取jsapi_ticket */
function getTicket(accessToken){
  return new Promise((resolve,reject)=>{
    axios.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket', {
      params: {
        type: 'jsapi',
        access_token: accessToken
      }
    }).then(res => {
      resolve(res.data.ticket);
    }).catch(err=>{
      return Promise.reject(err);
    })
  })
}

/**
 * 签名算法
 * @param ticket 用于签名的 jsapi_ticket
 * @param url 用于签名的 url ,注意必须动态获取
 * @return sha1算法加密的字符串
 */
function signature(ticket, url){
  config_nonceStr = createNonceStr() // 生成随机字符串
  config_timestamp = createTimestamp() // 获取当前时间戳
  let ret ={
    jsapi_ticket: ticket,
    nonceStr:config_nonceStr,
    timestamp:config_timestamp,
    url: url,
  }
  var string = raw(ret) // 排序拼接为字符串
  console.log(string)
  return sha1(string) // 返回sha1加密的字符串
}

/* 生成随机字符串 */
function createNonceStr(){
  return Math.random().toString(36).substr(2,15);
}

/* 获取当前时间戳 */
function createTimestamp() {
  return parseInt(new Date().getTime() / 1000) + '';
}

/* 排序拼接 */
function raw(args){
  let keys = Object.keys(args).sort(); //获取args对象的键值数组,并对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)
  let newArgs ={}
  keys.forEach(key=>{
    newArgs[key.toLowerCase()] = args[key];
  })
  let string = '';
  for (let k in newArgs) {// 循环新对象,拼接为字符串
    string +=`&${k}=${newArgs[k]}`
  }
  string = string.substr(1)// 截取第一个字符以后的字符串(去掉第一个'&')
  return string;
}

module.exports = router;


三、使用内网穿透工具(例如:natapp)把本地服务器映射到公网上去

如果有服务器的可以跳过这一步


四、前端使用微信JSDK

使用步骤:

1、绑定域名

2、引入JS文件 http://res2.wx.qq.com/open/js/jweixin-1.4.0.js

vue 项目可以下载模块 npm i weixin-js-sdk -S

3、配置config

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

4、通过ready接口处理成功验证,通过error接口处理失败验证

5、调用微信接口APi

详情见开发文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/6091

H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法

当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底?

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

微信JS支付代码 前端调用微信支付接口

跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

先登录微信公众平台进入公众号设置的功能设置里填写JS接口域名,支持使用AMD/CMD标准加载方法,通过config接口注入权限验证配置,通过ready接口处理成功验证,通过error接口处理失败验证

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

微信已停止访问该网页解决方法分享

由于微信限制比较严格,域名一不小心就被判定是诱导分享的。所以,公司内部决定调研一套稳定、快速、正确率高的微信域名拦截检测查询接口。开发组尝试谷歌搜索了一段时间,发现很少把源码及原理分享出来的。后来我们摸索了几天

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!