Node.js + TNWX接入微信JS-SDK

image.png

微信公众平台开发文档

TMWX文档

了解清楚流程之后，可以着手开发了。里面有个要注意的地方，access_token和jsapi_ticket需要做缓存。可以自己纯去写开发，不想自己造轮子的话也可以用一些大佬们已经做好的脚手架。这里直接用TMWX。

TMWX简介

TypeScript + Node.js + WeiXin 微信系开发脚手架，支持微信公众号、微信支付、微信小游戏、微信小程序、企业号/企业微信。最最最重要的是能快速的集成至任何 Node.js 框架(Express、Nest、Egg、Koa 等)

一、安装依赖

下面生成签名的时候用到uuid，可以一起安装，也可以自己写个生成uuid的方法

$ npm install tnwx
$ npm install uuid

二、导入相关的模块

这里现在只需要用到JS-SDK的功能，只导入需要用到的即可

import {
  WeChat,
  ApiConfigKit,
  ApiConfig,
} from 'tnwx'

三、初始化

// ApiConfig 初始化的参数说明
// 第一个参数：appId。 企业微信时 appId 对应的值为 agentId
// 第二个参数：appScrect
// 第三个参数：令牌 Token 可以任意填写
// 第四个参数：是否开启加密 encryptMessage 默认值为 false。测试号必须为 false， 企业微信必须为 true
// 第五个参数：消息加解密密钥 encodingAesKey 非必须。 encryptMessage 为 true 时必须
// 第六个参数：企业ID 非必须。 企业微信时必须
// 第七个参数：企业微信开放平台应用的 Ticket 非必须。

const WxConfig = {
  appId: 'wxc074fff670b6c061',
  appScrect:'d9ae6a966851889c955001cc279548a5',
  token:'kapok'
}
const devApiConfig = new ApiConfig(
  WxConfig.appId,
  WxConfig.appScrect,
  WxConfig.token,
)
// 微信公众号、微信小程序、微信小游戏 支持多应用
ApiConfigKit.putApiConfig(devApiConfig)
// 开启开发模式,方便调试
ApiConfigKit.devMode = true
// 设置当前应用
ApiConfigKit.setCurrentAppId(devApiConfig.getAppId)

四、把wx.config配置所需要的数据在接口返回出去

export default class wechatController {
  // 获取微信配置
  public static async getWxConfig(ctx: Context) {
    const request: any = ctx.request.body
    
    if (request.url) {
      try {
        let appId = ApiConfigKit.getApiConfig.getAppId;
        let timestamp = new Date().getTime() / 1000;
        let nonceStr = uuidv1();
        let url = request.url; //填写完整页面的URL包括参数
        // 生成签名
        let signature = await WeChat.jssdkSignature(nonceStr, String(timestamp), url);
        ctx.body = ctx.body = {
          code: 200,
          msg: '请求成功',
          data: {
            appId: appId,
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature
          }
        }
      } catch (error) {
        console.log(error)
        ctx.status = 200
        ctx.body = {
          code: -1,
          msg: error || '获取失败',
        }
      }
    } else {
      ctx.status = 200
      ctx.body = {
        code: -1,
        msg: 'url为空',
      }
    }

  }
}

五、前端使用wx.config配置和使用wx接口

/(ㄒoㄒ)/~~因为我的这个是个人公众号，不支持分享类的接口调用，本来就是想做网站的链接转发样式别太丑的，结果还是不行。可以用获取定位和掉用系统地图来测试是否可以了

image.png