微信公众号网页开发本地授权、开发

本文涉及的产品
.cn 域名,1个 12个月
简介: 在微信公众号进行网页开发时,有些授权操作和调用微信JSSDK的操作,通过微信开发工具和微信测试号,可以很方便的进行本地开发调试。相比于内网穿透工具进行真机调试就会方便很多

在微信公众号进行网页开发时,有些授权操作和调用微信JSSDK的操作,通过微信开发工具和微信测试号,可以很方便的进行本地开发调试。相比于内网穿透工具进行真机调试就会方便很多。

1. 下载微信web开发者工具

地址

2. 申请微信接口测试号,设置授权回调页面域名

回调页面域名在正式环境只支持域名,通过测试号可以填写IP地址,即可本地开发调试。

申请地址,依据教程申请就行。申请完成后,登陆微信接口测试号,扫描测试号提供二维码关注测试号。设置授权回调页面域名,在体验接口权限表中,找到 网页服务-网页帐号-网页授权 获取用户基本信息 ,点击右边的 修改,进行修改。

在弹出的窗口,填写你计算机的IP、端口(如果你计算机的IP经常变化,记得及时更改此设置,确保与你计算机的IP一致)。

3. 运行微信web开发者工具

用个人微信登陆web开发者工具(关注了微信接口测试号的个人微信)。

4. 调试微信网页

这里可以进行微信JSSDK的调试,以及网页授权接口的调试。

  1. 创建静默授权的链接(此链接一般配置在微信公众号菜单上的):

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

其中,

  • appid:微信接口测试号的appID,登录微信接口测试号可以查询到。
  • redirect_uri:微信网页授权后回调访问页面地址(此处需要更改,可以依据不同环境配置不同的路径),正式环境只支持域名
  • scope: snsapi_base为静默授权的固定值

将上述内容替换掉之后的链接如下(appid和redirect_uri替换成自己的):    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx16017a14e8c02212&redirect_uri=http://127.0.0.1:8080&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

2. 将创建好的链接拷贝到微信web开发者工具地址上访问

就可以进行微信的授权调试,调用JSSDK调试了。




目录
相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
498 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
582 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
114 7
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
196 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
66 5
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
61 5
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
568 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
29天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
326 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
504 0

相关实验场景

更多