VUE3+TS 微信公众测试号本地调试sdk

开发H5时候需要调用微信的一些功能，如上传图片、分享、支付等，需要调用微信JS-SDK才可完成，前端在前期做本地测试的时候，没有后端接口和正式的公众号，这篇文章告诉你怎么做。

申请微信测试号

去申请

文档上说所有需要使用JS-SDK的页面必须先注入配置信息，所以我们第一步先写配置信息

注意： config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

所以以下代码做了简单封装，基于Promise形式验证config，验证通过wx.ready则返回true，这样写的好处是不用再每个页面单独写方法的时候用wx.ready包起来，下面代码也会有示例展示。

先在项目里引入JS-SDK包

 npm i weixin-js-sdk-ts

//  hooks/useWxSDK.ts

export function initConfig() {
  return new Promise((resolve, reject) => {
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: 0, // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '', // 必填，签名
      jsApiList: [], // 必填，需要使用的JS接口列表
      openTagList: [], // TS不加这项会报错
    });
    wx.ready(() => {
      resolve(true);
    });
    wx.error(() => {
      reject(false);
    });
  });
}

因为是在本地调试,所以config里面的这些参数都得我们手动填进去

appId登录所申请的测试号就可以拿到

timestamp，nonceStr可以任意填写，jsApiList是你要使用到的微信api，可以去JS-SDK说明文档里面# 附录2-所有JS接口列表查找

接下来就是获取最后一个签名了；需要先获取access_token 和 jsapi_ticket，可以用postman获取以下信息。

获取access_token：https请求方式: GET api.weixin.qq.com/cgi-bin/tok… 其中APPID和APPSECRET就是上面图片中的测试号信息

获取jsapi_ticket：api.weixin.qq.com/cgi-bin/tic… ACCESS_TOKEN就是上一步获取到的

获取到以上信息后，就可以去 微信JS接口签名校验工具去生成签名

可以看到图里有个url，这也是非常重要的一个参数,并且必须和下面开发者工具里面的地址完全一致。

可以看到测试号登录以后有个JS接口安全域名，这个域名必须和生成签名时候的域名保持一致，不需要加http/https,如果有内网ip的话这里可以填写内网ip，没有的话可以使用ngork做一个内网穿透生成一个虚拟的域名，(不是很了解具体原理)，下载好ngork在本地运行起来ngork.exe终端以后

ngrok config add-authtoken your authtoken

ngork http 你要运行的端口

可以看到这个虚拟地址已经指向了我的8989端口，把这个虚拟地址填到上面所说的两个位置就可以了，到此，所有配置就结束了，接下来上使用微信方法的代码，这里只做了微信上传图片的示例，其他功能都是类似。

<template>
  <button @click="upload">上传图片</button>
</template>
<script setup lang="ts">
    import { initConfig } from '@/hooks/useWxSDK';
    import wx from 'weixin-js-sdk-ts';
    import { onMounted } from 'vue';
    const upload = () => {
     wx.chooseImage({
        count: 1,
        success: (res) => {
          console.log('res', res);
        },
        cancel: () => {
          console.log('cancel');
        },
      });
  };
  // 手动触发SDK的时候先初始化config就行
    onMounted(() => {
        initConfig(); 
    });
  // 如需一进入页面就触发的话这样写，可以省略掉wx.ready()，
    onMounted( async () => {
        const res = await initConfig(); 
        if (res) {
       wx.chooseImage({
        count: 1,
        success: (res) => {
          console.log('res', res);
        },
        cancel: () => {
          console.log('cancel');
        },
      });
    }
    });
</script>

再把上面获取到的虚拟url复制到开发者工具里面，如下图

config里面的debug为true的话就会有这样config:ok的弹框，如果验证成功，控制台也会有验证通过的提示,接下来就可以愉快的使用微信sdk开发了。

到此就全部结束了，如有错误，还请指正。