当前位置: 首页>编程语言>正文

微信开发者工具测试工具 微信开放平台测试

本地测试微信授权登录,首先要下载一个微信开发者工具,因为微信回调域名不支持IP地址,所以我们要获取到一个域名,映射到本地ip,目前我尝试成功的有两种方法:

1,使用natapp:

  1. 注册一个natapp账号,购买一个免费隧道,具体可参考教程NATAPP1分钟快速新手图文教程
  2. 下载客户端,下载完成后,新建一个config.ini文件,具体配置参考使用本地配置文件config.ini
  3. 配置隧道,修改本机地地址为项目运行的ip地址,修改端口号等
  4. 最后,运行成功后,就可以获得一个代理服务器的地址

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信开发者工具,第1张

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信开发者工具测试工具_02,第2张

  1. 得到一个可用的域名之后(可先在浏览器打开看是否成功)
  2. 申请一个接口测试号,微信公众平台接口测试帐号申请
  3. 把测试账号的网页授权域名修改为得到的域名,就可以用这个域名在微信开发者工具打开,开始测试啦

2,修改本地hosts:

首先在本地ip运行一个项目

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信授权_03,第3张

这里显示的是window的路径,打开hosts文件,添加映射: 本地ip->测试域名

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信_04,第4张

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_本地测试_05,第5张

得到一个可用的域名之后(可先在浏览器打开看是否成功)

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_本地测试_06,第6张

申请一个接口测试号,微信公众平台接口测试帐号申请 

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_本地测试_07,第7张

把测试账号的网页授权域名修改为得到的域名,就可以用这个域名在微信开发者工具打开,开始测试啦

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信授权_08,第8张

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信开发者工具_09,第9张

 

点击微信授权按钮,提示没有关注就去关注一下

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信_10,第10张

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信开发者工具_11,第11张

再次点击授权按钮,这里可以看到已经成功获取到code啦,顺便把测试的vue代码贴出来参考一下。

微信开发者工具测试工具 微信开放平台测试,微信开发者工具测试工具 微信开放平台测试_微信授权_12,第12张

<template>
  <div class="page">
    <button @click="getWxAuth">微信授权</button>
    {{ code }}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import Utils from '@/common/utils/utils'

@Component({})
export default class WxComponent extends Vue {
  code = ''
  getWxAuth() {
    // 回调链接
    const redirectURL =
      window.location.origin + window.location.pathname + '#/wx-test'
    const appId = 'wx82b9adeb92815aea'
    const url =
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
      appId +
      '&redirect_uri=' +
      encodeURIComponent(redirectURL) +
      '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
    window.location.href = url
  }
  created() {
    const code = Utils.getQueryString(window.location.href, 'code')
    console.log(code, 'wxcode')
    if (code) {
      this.code = code
    }
  }
}
</script>
  1. 这个ip映射的域名可以直接改成正式项目的域名,把这个域名配置到正式公众号,使用正式的appid,无缝对接上线
  2. 这种映射的方法只能在微信开发者工具测试哦

 

注意:本地的端口号要用80的,微信不支持别的端口


https://www.xamrdz.com/lan/5gs1960550.html

相关文章: