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

2024-06-04 5871阅读

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

一.申请测试公众号

微信公众平台接口测试帐号申请地址,微信扫码登录即可

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

二.测试号相关配置

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

1.JS接口安全域名配置

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

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

b.配置后将该域名指向本地开发环境,配置路径:C:\Windows\System32\drivers\etc下的hosts文件

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

c.配置完之后启动本地服务,需要下载http-server,全局执行命令,下面会讲到如何启动

npm install http-server -g

2.网页授权获取用户基本信息配置

网页授权获取用户基本信息此处的地址可配置和JS接口安全域名一致

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

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

3.扫码关注测试号

在配置完上面两处信息之后需扫码关注测试号,当然在配置之前关注也可以

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

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

1.本地文件目录

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

2.启动本地服务

上面讲到全局安装了http-server,这里就会用到,在文件根目录执行命令,-p80意思是端口号为80

http-server -p80

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

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

3.在微信开发者工具访问

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

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


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]