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

2023-11-11

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端对接微信公众号网页开发流程,前期配置 的相关文章

随机推荐

  • 【实用工具】利用MyBatisX插件自动生成代码

    文章目录 1 概述 2 基本使用 2 1 插件安装 2 2 集成数据库 1 概述 MybatisX 是一款基于 IDEA 的快速开发插件 为效率而生 在开发过程中 相信大家都遇到过一个数据库内有着十几张或比之更多的数据表的情况 而面对这众多
  • PHP基础

    php语法初步 php是一种运行在服务器端的脚本语言 可以嵌入到html中 php代码标记 在PHP历史发展中 可以用多种标记来区分php脚本 asp标记 短标记 以上两种基本弃用 如果要使用那么需要在配置文件中开启 脚本标记
  • Jenkins 简介

    Jenkins 简介 为什么要使用 Jenkins 是 Jenkins 还是 Hudson 从 Hudson 到 Jenkins 一个简短的故事 应该使用 Jenkins 还是 Hudson Jenkins 简介 Jenkins 最开始被称
  • failed to accept an incoming connection: connection from 127.0.0.1

    一 报错详细信息 root host 47 98 97 124 tail f tmp zabbix agentd log 11822 20180707 094214 749 Starting Zabbix Agent host 47 98
  • [javascript] Box2D JS初探(一个控制小球的游戏例子)。学习用!

    Box2D 开源物理引擎 第一次接触 主要用途应该是做游戏 不过也可以作些简单的页面特性 比如切割粉碎 拖动带弹性系数 从写了个控制小球运动 可以方向键控制左右和弹跳 碰到障碍物就死掉的DEMO来试试 演示地址 null 这里注意的是 市面
  • 在树莓派和Ubuntu等Linux发行版平台上使用OpenCV原生API调用摄像头等设备时虚拟机崩溃的问题及解决方案

    在树莓派和Ubuntu等Linux发行版平台上使用OpenCV原生API调用摄像头等设备时虚拟机崩溃的问题及解决方案 摘要 本文讨论了在树莓派和Ubuntu等Linux发行版平台上使用OpenCV原生API调用摄像头等设备时可能导致虚拟机崩
  • Quartus II 13.1的安装及使用

    文章目录 一 下载安装注册 二 设计D触发器 2 1 新建工程 2 2 创建原理图和VWF文件 2 3 时序波形仿真 三 调用D触发器 3 1 新建工程 3 2 创建原理图和VWF文件 3 3 波形仿真 四 用Verilog语言写D触发器
  • vue预览tiff格式文件

    vue 预览tiff格式的文件 1 下载tiff js tiff js官网 npm 安装 npm i tiff js S yarn 安装 yarn add tiff js S 安装完成之后通过 img 标签使用即可 div fileInfo
  • 数据结构:手撕图解二叉树(含大量递归图解)

    文章目录 写在前面 二叉树的创建 二叉树的遍历 前序遍历 中序遍历 后序遍历 层序遍历 二叉树的销毁 二叉树节点个数 二叉树叶子节点的个数 二叉树查找值为x的节点 二叉树是否为完全二叉树 写在前面 二叉树的几乎所有实现都是依靠递归实现 递归
  • 51单片机:独立按键控制数码管计数

    按键动作的前沿和后沿会都有大约10ms的抖动 人在按下按键到松开至少需要50ms以上 待考证 此代码实现的功能为给按键计数 并给按键消抖 欢迎邮箱交流 bglei foxmail com 作者 CHNfisher include
  • JS压缩图片

    作者 wuwhs https segmentfault com a 1190000023486410 说明 js image compressor 是一个实现轻量级图片压缩的 javascript 库 压缩后仅有 5kb 在前端页面即可实现
  • 【数据挖掘】特征化分析(信息增益)

    目录 前言 数据预处理 导入库 读取样本数据 计算过程 计算每个属性的熵 计算给定的样本分类所需要的期望信息 计算所有属性的信息增益 结果可视化 信息增益较大的属性下的结果 信息增益较小的属性下的结果 写在后面 前言 这是一个数据挖掘选修课
  • ubuntu系统中新建文件的默认权限

    在ubuntu系统中 当我们使用touch 和 mkdir 新建文件和目录时 并没有指明要赋予它们的权限 在man的帮助手册中也没有找到相应选项 虽然后续我们可以使用chmod 修改文件的权限 但是清楚新建文件的默认权限的来源是十分有必要的
  • 根据采购订单IDN进行MIGO过账的BAPI逻辑

    客户需求 根据ALV上的采购订单IDN进行过账 如果有IDN 就根据IDN过账 如果没有 就根据采购订单过账 BAPI ITEM数据填充如下 DATA ls goodsmvt item TYPE bapi2017 gm item creat
  • 黑马程序员——多线程笔记

    a target blank href http www itheima com android培训 a a target blank href http www itheima com java培训 a 期待与您交流 多线程 一 概念 进
  • python数据分析-Pandas数据清洗

    数据的格式请参考前面Pandas常见操作中数据的格式 数据清洗 1 重复值的处理 重复值一般采取删除法来处理 但有些重复值不能删除 例如订单明细数据或交易明细数据等 data data duplicated 判断重复数据并取出 data d
  • 区块链技术体系,快捷学习路径?

    这两年 数字货币和区块链很火 年初写过一些区块链与比特币的文章 反响也很不错 不少网友催我继续写区块链 我在这个方向未曾深耕 也不敢造次 结合自己的经验 写写区块链涉及的技术体系 以及学习区块链的途径和方法 一 区块链技术体系 数据层 数据
  • JVM的内存区域

    JVM的内存区域 不知不觉都大三了 回头看看以前的Android开发过程 遇到的很多问题都需要深入到源码去解决 这也促使我不断地深入学习Java的相关知识 首先要学习的肯定是JVM 不过JVM的知识体系十分庞杂 JVM的内存区域的划分是学习
  • opencv——训练自己的小狗分类器

    opencv python图像识别 训练自己的分类器 opencv支持训练自己的分类器 闲话少说 训练步骤 准备样本图像数据 样本数据预处理 正反样本数据生成正反txt vec文件 训练 测试结果 注意以下几点 首先应该注意样本数据量 预处
  • 前端对接微信公众号网页开发流程,前期配置

    微信公众号网页开发 其实就是我们开发的h5网页需要放到微信浏览器环境中使用 但是需要对接公众号授权 授权之后可以获取到用户的个人信息 以及可以使用公众号提供的一些API 如 图片上传 图片预览 获取位置信息 微信扫一扫等功能 在没有对接正式