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

image.png

微信公眾平臺開發(fā)文檔

TMWX文檔

了解清楚流程之后，可以著手開發(fā)了。里面有個要注意的地方辉阶，access_token和jsapi_ticket需要做緩存∥撕Γ可以自己純?nèi)戦_發(fā)，不想自己造輪子的話也可以用一些大佬們已經(jīng)做好的腳手架畦攘。這里直接用TMWX霸妹。

TMWX簡介

TypeScript + Node.js + WeiXin 微信系開發(fā)腳手架，支持微信公眾號知押、微信支付叹螟、微信小游戲、微信小程序台盯、企業(yè)號/企業(yè)微信首妖。最最最重要的是能快速的集成至任何 Node.js 框架(Express、Nest爷恳、Egg有缆、Koa 等)

一、安裝依賴

下面生成簽名的時候用到uuid，可以一起安裝棚壁，也可以自己寫個生成uuid的方法

$ npm install tnwx
$ npm install uuid

二杯矩、導(dǎo)入相關(guān)的模塊

這里現(xiàn)在只需要用到JS-SDK的功能，只導(dǎo)入需要用到的即可

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

三袖外、初始化

// ApiConfig 初始化的參數(shù)說明
// 第一個參數(shù)：appId史隆。 企業(yè)微信時 appId 對應(yīng)的值為 agentId
// 第二個參數(shù)：appScrect
// 第三個參數(shù)：令牌 Token 可以任意填寫
// 第四個參數(shù)：是否開啟加密 encryptMessage 默認(rèn)值為 false。測試號必須為 false曼验， 企業(yè)微信必須為 true
// 第五個參數(shù)：消息加解密密鑰 encodingAesKey 非必須泌射。 encryptMessage 為 true 時必須
// 第六個參數(shù)：企業(yè)ID 非必須。 企業(yè)微信時必須
// 第七個參數(shù)：企業(yè)微信開放平臺應(yīng)用的 Ticket 非必須鬓照。

const WxConfig = {
  appId: 'wxc074fff670b6c061',
  appScrect:'d9ae6a966851889c955001cc279548a5',
  token:'kapok'
}
const devApiConfig = new ApiConfig(
  WxConfig.appId,
  WxConfig.appScrect,
  WxConfig.token,
)
// 微信公眾號熔酷、微信小程序、微信小游戲 支持多應(yīng)用
ApiConfigKit.putApiConfig(devApiConfig)
// 開啟開發(fā)模式,方便調(diào)試
ApiConfigKit.devMode = true
// 設(shè)置當(dāng)前應(yīng)用
ApiConfigKit.setCurrentAppId(devApiConfig.getAppId)

四豺裆、把wx.config配置所需要的數(shù)據(jù)在接口返回出去

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包括參數(shù)
        // 生成簽名
        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ㄒ)/~~因為我的這個是個人公眾號，不支持分享類的接口調(diào)用臭猜，本來就是想做網(wǎng)站的鏈接轉(zhuǎn)發(fā)樣式別太丑的躺酒，結(jié)果還是不行∶锔瑁可以用獲取定位和掉用系統(tǒng)地圖來測試是否可以了