背景

在开发微信网页时，可能公众号这些还没申请好或后端接口还没写好，这时就可以自行先用测试号进行开发

申请测试号

申请链接

申请后登录

填写域名

自己电脑的ip地址

关注测试号二维码

获取access_token

接口调试工具

填写测试号的appid和secret点击‘检查问题’

获取jsapi_ticket

用上一步获取的access_token浏览器访问https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

获取签名

获取签名链接

依次填入

• 上一步获取的ticket
• 随机字符串 Wm3WZYTPz0wzccnN
• 时间戳 秒
• url http://192.168.3.22/ 注意直接访问根路径的需要加斜线

然后点击生成签名

微信网页开发（vue）

pnpm add weixin-js-sdk -S

<script setup lang="ts">
import { ref } from 'vue';
import wx from 'weixin-js-sdk'
wx.config({
  debug: false,
  appId: 'wx116287e30604106a',
  timestamp: 169828532, // 注意这里要和上一步相同
  nonceStr: 'Wm3WZYTPz0wzccnN', // 注意这里要和上一步相同
  signature: '93161a943ca17d3d78e97aadaa1045421a56a8a7',
  jsApiList: ["openLocation", "getLocation", 'openAddress'],
})
const log = ref('')
const openMap = () => {
  (wx as any).openAddress({
    success(res:any){
      console.log(res)
      log.value = JSON.stringify(res)
    }
  })
  // wx.getLocation({
  // type: "gcj02", // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
  // success: function (res) {
  //   //打开指定位置
  //   console.log(res)
  //   wx.openLocation({
  //     latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
  //     longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
  //     name: "我的位置", // 位置名
  //     address: "", // 地址详情说明
  //     scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
  //     infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
  //   });
  // },
// });
}
</script>

<template>
  <main>
    <h1>微信demo</h1>
    <button @click="openMap">打开地图</button>
    {{ log }}
  </main>
</template>

注意事项

1. access_token 获取时，需要公众号配置ip地址白名单

2. 内网穿透，公众号网页一直刷新

   // vite.config.js
   {
     server: {
       hmr: {
         clientPort: 443 // 不是本地的端口号而是穿透的端口号
       }
     }
   }