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

article/2025/9/19 12:40:30

微信公众号网页开发,其实就是我们开发的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
在这里插入图片描述


http://chatgpt.dhexx.cn/article/FxIu6Mbd.shtml

相关文章

微信网页开发(3)--微信网页授权

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载 本文目录 1. 什么是授权2. 两种授权方式3. 网页授权access_token和普通access_token4. 网页授权流程5. 网页授权代码开发5.1 项目搭建5.2 修改配置文件5.3 开发启动类5.4 开发公众号配置类5.5 开发…

微信网页开发:微信内h5使用wx-open-launch-weapp打开小程序,微信内h5使用wx-open-launch-app打开App的方案

需求场景: 当我们需要使用在微信客户端打开的h5页面,在页面上打开微信小程序或者唤起App时,我们需要使用微信js-sdk提供的开放标签能力。这其中:使用wx-open-launch-weapp标签打开微信小程序;使用wx-open-launch-app跳…

算法分析与设计 二分查找

算法分析与设计 二分查找 二分查找的基本概念 ​ 二分查找是一种在有序数组中查找某一特定元素的查找算法。这种查找方法将查找的时间复杂度从原本的线性时间提升到了对数时间范围,大大缩短了搜索时间。 ​ 二分查找的基本思想是:在查找过程从数组的中…

C语言二分查找

我们常常需要对数据进行查找,修改,查找数据有许多方法,我们先看看最简单的顺序查找 int main() {int i, k 0;scanf("%d", &k);int arr[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };int sz sizeof(arr) / sizeof(arr[0]);for (i…

二分查找【详解】

本期介绍🍖 主要介绍:二分查找的简单思路,为什么必须在有序的前提下才能使用二分查找,该怎么用C程序来实现二分查找,二分查找的局限性👀。 目录🍖 简单思路前提条件编写程序总结 简单思路&…

二分答案

二分答案 总所周知,二分法查找一个数的时间复杂度为O(log n),所以在int范围内找一个数最多只需要30余次,在longlong范围内最多也只需要60余次。因此,我们可以利用二分这一优势查找答案。即,每次二分后判断该数是不是满…

初探二分算法

又来算法了~~~~ 😃😃😆😆😃😃😃😆😆😆👀👀😆🤔 什么是二分算法? 在计算机科学中,二分…

二分(数学背景,边界问题,二分查找,二分答案)

二分法的数学背景 目的 关于二分法的目的,这里引用同济大学数学系出版的《高等数学》第七版上册中关于二分法的相关内容。(文段内容多,要有一点耐心~) 在科学技术问题中,经常会遇到 求解高次代数方程或其他类型的方程的…

二分模板介绍

以一个典型例题来介绍二分法的两个通用模板,熟练掌握这两个模板可以解决绝大部分二分的问题。 例题:ACWing 789.数的范围 给定一个按照升序排列的长度为n的整数数组,以及q个查询。 对于每个查询,返回一个元素k的起始位置和终止…

二分算法详细解析

二分 有单调性一定可以二分,可以二分不一定有单调性二分的本质是边界不是单调性(单调一定可以二分,不单调的有的也可以二分) 本质:在一个区间上,找到某种性质,每次可以将区间一分为二(存在边界)…

一篇文章带你搞懂二分

一篇文章教你搞懂二分 二分整数二分实数域上二分二分查找二分答案 二分 到底什么是二分呢?二分二分就是一分为二。简单来说二分就是在有序序列中,通过不断的二分,进而不断地缩小范围去寻找满足我们条件的解。这只是对二分一个狭义上的理解&a…

深入字节版atop: 线上系统的性能监控实践

背景 atop 是一款开源的单机性能监测工具,支持实时观测的同时、也支持读取历史文件排查问题。另外一个优点是除提供 CPU、MEM、DISK 等全局指标外,还提供进程、线程级别的各项指标监控数据。鉴于 atop 的这些优点,字节跳动基于社区的 atop 进…

atop备忘

atop 安装 sudo apt install atop atop 参数说明 监控界面字段说明 ATOP列:该列显示了主机名、信息采样日期和时间点 PRC列:该列显示进程整体运行情况 sys、usr字段分别指示进程在内核态和用户态的运行时间 #proc字段指示进程总数 #zombie字段指示僵…

atop linux,每天学一个 Linux 命令(117):atop

命令简介 atop 命令是一款监控 Linux 系统资源与进程的工具,非内部命令,需要安装。[rootcentos7 ~]# atop -bash: atop: command not found [rootcentos7 ~]# yum install atop -y #Debian && Ubuntu apt-get install atop #Fedora dnf install …

linux 系统性能 检测 命令 atop

atop 主要可以 监测 cpu,内存,硬盘,网络性能,以及 实时读写 日志。 基本用法 1.查看 atop , 实时刷新 按 a ,退出 按q 2.保存日志 atop -w log.txt 3.查看 输出日志 atop -r log.txt , 按 t 查看 下一个样本的性能数据 &a…

Atop使用场景

问题: 1、线上容器环境pod报错无法创建本地线程,如下图所示: 2、日志中出现报错信息 “fork:Cannot allocate memory”。如下图所示: 可能原因 1、内存不够 2、可能是进程数超限导致。系统内部的总进程数达到了 p…

atop工具使用

atop是linux系统下一款监控系统资源与进程的工具。atop以一定的频率记录系统的运行状态,通过它可以了解系统今生前世。atop采集系统资源「cpu、mem、disk、net」的使用情况及所有进程使用系统资源的情况,定期采集相关数据保存日志文件。可以通过atop.daily文件调整数据采集的…

atop安装和使用

atop就是一款用于监控Linux系统资源与进程的工具,它以一定的频率记录系统的运行状态,所采集的数据包含系统资源(CPU、内存、磁盘和网络)使用情况和进程运行情况,并能以日志文件的方式保存在磁盘中。atop是一款开源软件,目前最新版…

linux 之atop 系统监控工具

一、atop介绍 atop是一款用于监控Linux系统资源与进程的工具,它以一定的频率记录系统的运行状态,所采集的数据包含系统资源(CPU、内存、磁盘和网络)使用情况和进程运行情况,并能以日志文件的方式保存在磁盘中,服务器出现问题后&a…

Linux 使用 atop 监控工具

文章目录 应用场景操作步骤安装 atop配置并启动 atop编辑atop配置文件启动atop 分析atop停止atop 应用场景 atop 是一款用于监控 Linux 系统资源与进程的工具,以一定的频率记录系统的运行状态,采集系统资源(CPU、内存、磁盘和网络&#xff0…