admin管理员组文章数量:1532440
需要读者熟悉前端web开发，文章内会讲到电脑需要用到的工具软件
- 网站项目 用到的开发工具
- 带Chrome内核浏览器
- 微信开发者工具
-
用电脑浏览器访问查看公众号网页开发文档，找到测试号申请入口，JS接口安全域名处点击修改，填入自己的网站域名
-
在登录网页编程下，写好的逻辑需要一个微信客户端判断，
JavaScript代码如下
//判断是否是微信内置的浏览器
function isWechat() {
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
- 还有微信登录的相关逻辑，用到的
JavaScript方法代码如下，先判断有没有code，没有就访问获取code
//请求通过微信官方接口 获取code
function getWeChatCode() {
//获取当前页面地址作为回调地址
let local = encodeURIComponent(window.location.href);
let appid = '';//自己填入测试号信息
//访问设置的回调地址 redirect_uri，会重定向显示带code参数的地址
window.location.href = "https://open.weixin.qq/connect/oauth2/authorize?appid=" + appid +
"&redirect_uri=" + local +
"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
}
//提取地址中的参数值
function getUrlKeyVal(key) {
let r = new RegExp('[?|&]' + key + '=' + '([^&;]+?)(&|#|;|$)');
let arr = r.exec(location.href) || [, ''];
let s = arr[1].replace(/\+/g, '%20');
return decodeURIComponent(s) || null;
}
//检查地址栏中的code
function checkWeChatCode() {
let code = this.getUrlKeyVal('code')
if (code) {
//TODO: 接下来，调用请求后台接口 传参code...
}
},
- 获取到code后，访问后台接口，后台的业务逻辑，就用HTTP请求接口返回数据处理即可，以下是给出的访问接口，具体请看微信公众号开发文档
//自己填入测试号信息
let wxApp = {
appId: "",
appSecret: "",
};
//后台要HTTP请求url，获取openid，还有 access_token ...
let url = `https://api.weixin.qq/sns/oauth2/access_token?appid=${wxApp.appId}&secret=${wxApp.appSecret}&code=${code}&grant_type=authorization_code`;
let openid, access_token = "";
let url2 = `https://api.weixin.qq/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`;
//后台要HTTP请求url2, 获取用户信息
-
模拟微信客户端访问，请打开微信开发者工具，选择公众号网页开发，输入开发中的网页登录地址，然后访问，如下图
-
如果遇到错误，会出现如下图 redirect_uri 参数错误，
解决方法：找到 网页帐号 网页授权获取用户基本信息，点击修改，填入 自己的网站登录页面域名
-
刷新浏览，测试登录成功后，输出控制台打印日志如下图所示，对照user数据部分
-
开发过程非常顺利，完善一下登录功能，到此结束，收工！
版权声明：本文标题：微信公众号网页登录开发测试步骤详解 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725775685a1041856.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论