我是使用了cpolar内网穿透来调试的,本地不好操作,
第一部分:
1.下载安装cpolar
打开cpolar创建一个隧道
8080为你启动的端口,改成你自己的,点击创建
2.然后再状态里面找到你刚刚创建的
红色框为你的地址
3当你把这个地址复制打开的时候会提示invalid host header
vue项目到
vue.config.js 文件下 devServer加入 disableHostCheck: true, 就可以了
devServer: {
disableHostCheck: true, //正式环境要注释掉
}
本人是uniapp项目要到manifest.json里面
配置好之后关闭项目重新启动编译器就好了
第二部分:
百度搜索微信公众号测试号
扫码登录后看到下面的页面,下翻找到下图所示点击修改
这里的域名填写第一步内网穿透的地址不要前面的http,只要域名部分比如baidu.com就可以了
完成这一步之后你就可以去项目中调用了
第三步:
下面是简单的个人源码可以直接使用但是要替换appid和回调地址
<template>
<button class="wechat-logo" @click="getWeChatCode">微信授权登录</button>
</template>
<script>
export default {
onShow() {
const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null;
if(hasWechatLogin) {
this.checkWeChatCode();
}
},
methods: {
// 重定向回来本页面检查有没有code
checkWeChatCode() {
let code = this.getUrlCode('code');
console.log('我的code',code)
if(code) {
this.handleToLogin(code)
}
},
// 正则匹配请求地址中的参数函数
getUrlCode(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
},
// 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
getWeChatCode() {
//用于退出登录回来不会再调一次授权登录
uni.setStorageSync('wechat_login_tag', 'true');
const appID = ''; //公众号appID
const callBack = ''; //回调地址 就是你的完整地址登录页
//通过微信官方接口获取code之后,会重新刷新设置的回调地址【redirect_uri】
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
appID + '&redirect_uri=' + encodeURIComponent(callBack) +
'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
},
// 把后端需要的code以及其他信息调用接口传过去
//比如调用接口loginIn
handleToLogin(code) {
loginIn({
code,
}).then(res => {
console.log('登录成功')
uni.redirectTo({
url: '/pages/index/details'
})
})
}
}
}
</script>
appid用刚刚测试号的appid
回调地址填写你刚刚第二步修改配置的那个
最后一步:
你在微信开发者工具,打开公众号网页
在上方把你的第一步得到的穿透地址复制打开(这里有一个慢打开速度很慢)
点击按钮你就能在线调试微信授权登录获取code了,
恭喜你,我花了几天才明白的东西,你只看一篇文章就会了,很保姆把!!!!!
哈哈哈哈哈哈哈哈哈