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

微信公众平台开发文档

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

  <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <script>
    try {
      var formData = new FormData();
      formData.append('url', document.URL);
      $.ajax({
        url: 'https://xxx.xxx.com/v1/api/weChat/getWxConfig',
        method: 'POST',
        data: formData,
        contentType: false, // 注意这里应设为false
        processData: false,
        cache: false,
        success: function(res) {
          wx.config({
            debug: true,
            appId: res.data.appId,
            timestamp: res.data.timestamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: [
              'getLocation',
              'openLocation'
            ]
          })

          wx.ready(function () {
            document.querySelector('#updateAppMessageShareData').onclick = function () {
              wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                  console.log(res)
                  var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                  var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                  var speed = res.speed; // 速度，以米/每秒计
                  var accuracy = res.accuracy; // 位置精度

                  wx.openLocation({
                    latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
                    longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
                    name: '当前位置', // 位置名
                    address: '详细地址详细说明', // 地址详情说明
                    scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
                    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                  });

                }
              });
            };

          })
        },
        error: function (jqXHR) {
            console.log(JSON.stringify(jqXHR));
        }
      })
    } catch (error) {

    }
  </script>