前端对接微信公众号网页开发流程,前期配置

微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传、图片预览、获取位置信息、微信扫一扫等功能。在没有对接正式公众号之前我们可以申请测试公众号来进行开发测试。下面会分三篇文章详细介绍对接公众号网页开发流程,本篇为公众号前期配置,另外两篇介绍 前端对接微信公众号网页开发流程,授权对接前端对接微信公众号网页开发流程,JSSDK使用,干货满满!

一.申请测试公众号

微信公众平台接口测试帐号申请地址,微信扫码登录即可
在这里插入图片描述

二.测试号相关配置

登录之后需要配置JS接口安全域名网页授权获取用户基本信息,并需要扫码关注测试公众号

1.JS接口安全域名配置
a.JS接口安全域名在未对接正式公众号之前我们可以配置本地测试域名,可以自定义域名,只要符合规则就行。
在这里插入图片描述

b.配置后将该域名指向本地开发环境,配置路径:C:\Windows\System32\drivers\etc下的hosts文件
在这里插入图片描述
c.配置完之后启动本地服务,需要下载http-server,全局执行命令,下面会讲到如何启动

npm install http-server -g

2.网页授权获取用户基本信息配置
网页授权获取用户基本信息此处的地址可配置和JS接口安全域名一致
在这里插入图片描述
在这里插入图片描述
3.扫码关注测试号
在配置完上面两处信息之后需扫码关注测试号,当然在配置之前关注也可以
在这里插入图片描述

三、运行本地文件到微信开发者工具

1.本地文件目录
在这里插入图片描述
2.启动本地服务
上面讲到全局安装了http-server,这里就会用到,在文件根目录执行命令,-p80意思是端口号为80

http-server -p80

在这里插入图片描述
在这里插入图片描述

3.在微信开发者工具访问
打开微信开发者工具,开发模式调整为公众号网页调试,路径:项目-更换开发模式-公众号网页调试,在地址栏输入配置的域名即可访问本地index.html
在这里插入图片描述

### 关于微信公众号前后端开发的信息 #### 微信公众号前端开发指南 对于微信公众号前端开发,主要涉及HTML5、CSS3和JavaScript等Web技术。为了确保页面能够在移动设备上良好显示,响应式设计是必不可少的一部分[^1]。 当涉及到特定功能如支付或地理位置服务时,则需调用微信JS-SDK所提供的API来实现这些特性。值得注意的是,在使用某些敏感权限之前可能还需要通过安全验证流程获得用户的同意[^2]。 ```html <!-- 引入微信 JS SDK --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` #### 后端服务器配置与接口处理 后端方面通常采用Java Spring Boot框架构建RESTful API以供前端调用。由于微信公众平台的安全机制要求回调URL必须为HTTPS协议下的有效网址,因此建议开发者利用内网穿透工具(例如Ngrok)来进行本地环境中的测试工作。 此外,还需设置好OAuth2.0授权登录过程中的重定向URI,并妥善保管应用密钥(appsecret),以便能够顺利换取access_token用于后续操作。 ```java // Java代码片段展示如何接收来自微信服务器的消息签名验证请求并返回echostr完成对接确认 @RequestMapping("/wechat") public String wechat(@RequestParam Map<String, String> params) { // 验证消息真实性... return params.get("echostr"); } ``` #### 开发资源链接推荐 官方提供了详细的[微信公众平台文档](https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html),其中涵盖了从基础概念介绍到高级特性的全面指导;而对于更具体的编程技巧和技术细节,则可以参考开源社区内的项目案例学习交流经验。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值