微信开发者工具公众号网页项目实现本地项目调试

news2025/2/27 2:07:58

背景

    最近业务场景中有需要微信H5进行实现,需要网页授权,需要用户进行点击授权的操作,跳转一个微信公众号后台设置的授权域名下的网页后才能获取到code,其他网页授权步骤这里不进行展开,不想频繁的打包上传的服务器看实现效果,所以考虑从微信开发者工具中实现本地调试,搜索过相关的问题,大部分没有处理方案,自己研究了一下,简单记录一下实现过程,希望对有需要的同学有所帮助.
     1.Hbuilder创建H5项目
     2.微信开发者工具本地调试H5项目

1.Hbuilder创建H5项目

    新手入门,首先说下如何Hbuilder如何基于uniapp创建H5项目.

1.项目创建

    打开Hbuilder,选择文件–新建–项目,选择uniapp,设置项目名以及项目存储路径.
在这里插入图片描述
    项目基于uniapp创建,设置页面模版,直接复制到项目默认创建的index.html进行替换即可.

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

2.设置项目配置信息

    设置项目配置信息,按照下图标注进行自定义设置
在这里插入图片描述

3.项目启动

    Hbuilder选中项目,工具栏点击运行,选择运行到浏览器,选择谷歌浏览器,项目启动成功之后在浏览器显示访问地址.我这默认打开:

http://localhost:8080/demo1/#/

Hbuilder控制台显示访问地址如下:
在这里插入图片描述

4.使用微信开发者工具访问H5项目

    打开微信开发者工具,如果打开有其他项目可以点击左上角的项目按钮,选择关闭当前项目,按照下面的页面点击选择公众号网页项目,然后输入hbuilder控制台打印的项目地址,就可以从微信开发者工具中显示项目页面了.
在这里插入图片描述

2.微信开发者工具本地调试H5项目

    根据微信公众平台网页授权要求,需要从后台配置网页授权域名,这个域名需要外网进行访问,如何实现本地项目可外网访问,这里可以借助第三方的内网穿透工具进行操作,我这里使用的是natapp,之前做三方支付本地模拟回调就是使用的natapp,安装过程很简单,这里不再展开.启动natapp之后会将本地http://localhost:8080/映射成一个外网可访问的域名,我这启动之后映射信息如下:
在这里插入图片描述
微信公众平台后台设置网页授权域名:
    正常来讲本地项目不应该进行文件校验,感觉意义不大,既然微信后台需要校验就满足他的要求,下载校验文件到项目根目录发现直接访问访问内容与校验文件不一致,因为uniapp项目直接访问http://s7xiab.natappfree.cc/demo1/MP_verify_ixk9LU51ThOhCiVf.txt跳转的是项目首页,正常来讲微信后台希望访问之后显示的是txt文件具体内容.这里想了一个可以折中的办法,可以访问http://s7xiab.natappfree.cc/demo1/MP_verify_ixk9LU51ThOhCiVf.txt显示文件内容.
Hbuilder中创建一个普通项目,注意项目名与H5项目中的项目访问路径一致,我这里是demo1,然后将校验文件放置到新建的项目下,在这里插入图片描述
选择运行到浏览器,访问http://s7xiab.natappfree.cc/demo1/MP_verify_ixk9LU51ThOhCiVf.txt可显示文件内容.然后从后台添加网页授权路径可以添加成功.
在这里插入图片描述
添加成功的截图:
在这里插入图片描述

    网页授权目录弄好了之后,贴一下代码简单模拟用户点击授权按钮,跳转回调地址,获取code的逻辑.准备两个页面,index中提供用户点击按钮,notice页面用于用户点击按钮之后跳转显示,从notice页面获取到code.
index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view @click="bindGzhOpenId">点击授权绑定信息</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
		},
		methods: {
			bindGzhOpenId(){
				// 授权后跳转页面,需要encode
				let redirectUrl = encodeURIComponent("http://s7xiab.natappfree.cc/demo1/#/pages/notice/notice"); 
				let appid = "微信公众号的appid"
				
				//打开授权链接
				window.location.href =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
					appid + 
					"&redirect_uri=" +
					redirectUrl +
					"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

notice.vue

<template>
	<view>
		<view>绑定成功</view>
		<view>绑定失败,联系客服</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			let href=window.location.href;
			console.log("href",href)
			// 打印内容如下,可自行截取code:http://s7xiab.natappfree.cc/demo1/?code=041J94000n5D6Q1z2h100K9Acd4J940r&state=123#/pages/notice/notice
		}
	}
</script>

<style lang="scss">

</style>

    微信开发者工具打开项目之后点击授权,即可跳转notice页面,解析路径中的code继续进行网页授权的其他操作.
    **

说一下遇到的问题

1.访问项目,显示Invalid Host header

    uniapp项目中mainfest.json中点击源码视图,从h5-devServer中添加以下内容:

"disableHostCheck":true

    截图如下:
在这里插入图片描述

2.微信开发工具公众号网页右侧不显示控制台问题

在这里插入图片描述

     当时出现这个问题是因为将微信开发者工具添加到工具栏,从工具栏打开,尝试了一下直接用使用快捷方式或是从安装目录打开都是没有问题的,
     以上是微信开发者工具本地调试网页授权获取code的实现过程,看到这里如果感觉有所帮助欢迎点击或收藏.
     最近参与了一个匿名社交的微信小程序的开发,感兴趣的可以玩一下.
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/618693.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何开发原生的 JavaScript 插件(知识点+写法)

如何开发原生的 JavaScript 插件(知识点+写法)

一、前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了,我个人简单理解就是,能方便实现某个功能的扩展工具.(下面我会通过简单的例子来帮助读者理解) 第二个 W "Why&q…
阅读更多...
（9）基于发射器的调优

（9）基于发射器的调优

文章目录 前言 1 概述 2 调优值 3 用任务规划器设置 前言 你可以在飞行中使用你的遥控发射器进行广泛的参数调优。这是为那些无法使用自动调优功能的高级用户准备的&#xff0c;或者希望通过对每个参数的完全手动调优控制来进行微调。 1 概述 基于发射机的调优允许你在飞行…
阅读更多...
scala内建控制结构

scala内建控制结构

一、条件表达式 &#xff08;一&#xff09;语法格式 - if (条件) 值1 else 值2&#xff08;二&#xff09;执行情况 条件为真&#xff0c;结果是值1&#xff1b;条件为假&#xff0c;结果是值2。如果if和else的返回结果同为某种类型&#xff0c;那么条件表达式结果也是那种类…
阅读更多...
Vue.js 中的 props 和 $emit 方法有什么关系？

Vue.js 中的 props 和 $emit 方法有什么关系？

Vue.js 中的 props 和 $emit 方法有什么关系&#xff1f; 在 Vue.js 中&#xff0c;props 和 $emit 方法是两个常用的概念。它们可以帮助开发者更方便地实现组件之间的通信。但是这两个概念有什么关系呢&#xff1f;本文将会详细介绍 Vue.js 中的 props 和 $emit 方法&#xf…
阅读更多...
【LeetCode每日一题】——1475.商品折扣后的最终价格

【LeetCode每日一题】——1475.商品折扣后的最终价格

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 栈 二【题目难度】 简单 三【题目编号】 1475.商品折扣后的最终价格 四【题目描述】 给你一…
阅读更多...
【区块链 | EVM】深入理解学习EVM - 深入了解 Solidity：堆栈

【区块链 | EVM】深入理解学习EVM - 深入了解 Solidity：堆栈

探讨 EVM 堆栈机器，以及如何在堆栈中推入和弹出数据 原文链接： https://betterprogramming.pub/solidity-tutorial-all-about-stack-c1ec6070fe60探讨 EVM 堆栈机器，以及如何在堆栈中推入和弹出数据 图片来源：Iva Rajović on Unsplash 这是"深入Solidity数据存储位置…
阅读更多...
A股月份效应 | Python量化A股市场魔咒，5穷6绝7翻身准确吗？| 邢不行

A股月份效应 | Python量化A股市场魔咒，5穷6绝7翻身准确吗？| 邢不行

A股有很多广为流传的谚语&#xff0c;它们大多源于投资者对交易经验的总结和共识。 比如我们之前验证过的散户反买别墅靠海、跳空必回补等谚语。 今天我们要验证的&#xff0c;是五穷六绝七翻身这句谚语。 它的意思是A股在5月、6月可能会跌的很惨&#xff0c;到7月会开始反弹回…
阅读更多...
浅谈倾斜摄影三维模型数据裁剪的应用场景

浅谈倾斜摄影三维模型数据裁剪的应用场景

浅谈倾斜摄影三维模型数据裁剪的应用场景 倾斜摄影三维模型数据裁剪是将倾斜摄影三维模型数据中不需要的部分删除或隐藏的过程&#xff0c;可以提高数据处理效率和准确性。倾斜摄影三维模型数据裁剪广泛应用于建筑、城市规划、地质勘探、环境监测等领域。本文将介绍倾斜摄影三维…
阅读更多...
基于Springboot+Vue的计算机房管理系统

基于Springboot+Vue的计算机房管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 计算机房管理系统在现…
阅读更多...
读取所在点的像素值

读取所在点的像素值

由于项目需求&#xff0c;需要用到开源的软件开发&#xff0c;就开始研究GDAL&#xff0c;这个开源库&#xff0c;目前来说&#xff0c;调用GDAL库&#xff0c;最方便的语言还是python &#xff0c;简单记录下&#xff0c;用python语言做GDAL开发的一些东西吧。一个在开发中经常…
阅读更多...
​浅谈Vue3响应式原理与源码解读

​浅谈Vue3响应式原理与源码解读

一. 了解几个概念 什么是响应式 在开始响应式原理与源码解析之前&#xff0c;需要先了解一下什么是响应式&#xff1f;首先明确一个概念&#xff1a;响应式是一个过程&#xff0c;它有两个参与方&#xff1a; 触发方&#xff1a;数据响应方&#xff1a;引用数据的函数 当数据发…
阅读更多...
微信小程序原生开发功能合集十八：系统主题及自定义主题功能实现

微信小程序原生开发功能合集十八：系统主题及自定义主题功能实现

本章实现系统主题监听及相应处理，包括暗黑色、亮色等。并实现自定义主题控制相关功能，可通过菜单进行主题的切换。   另外还提供小程序开发基础知识讲解课程，包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容，具体如下：    1. CSDN课程： ht…
阅读更多...
VUE 实现滑块验证 ①

VUE 实现滑块验证 ①

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; 微信小程序 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…
阅读更多...
2023年6月DAMA-CDGP数据治理专家认证，来这里

2023年6月DAMA-CDGP数据治理专家认证，来这里

DAMA认证为数据管理专业人士提供职业目标晋升规划&#xff0c;彰显了职业发展里程碑及发展阶梯定义&#xff0c;帮助数据管理从业人士获得企业数字化转型战略下的必备职业能力&#xff0c;促进开展工作实践应用及实际问题解决&#xff0c;形成企业所需的新数字经济下的核心职业…
阅读更多...
Windows批处理文件倒计时且循环执行文件/程序

Windows批处理文件倒计时且循环执行文件/程序

Windows批处理文件倒计时且循环执行文件/程序&#xff1a; 最近想循环测试下语音唤醒设备&#xff0c;所以需要用bat文件在Windows上一直循环播放指定的mp3文件&#xff0c;且设置了间隔时间&#xff0c;也就是倒计时时间&#xff0c;最后网上查了一堆之后整理了一个bat&#x…
阅读更多...
微信小程序开发中遇到的坑

微信小程序开发中遇到的坑

目录 1、clearInterval不起作用 2、设置background: linear-gradient(180deg, #FCF8F5 0%, #FCF8F5 99.9%, transparent 100%);解决元素底部有黑线的问题。但是在ios中不起作用。 3、wx.createAnimation&#xff0c;设置的动画只能执行一次 4、swiper在苹果手机上显示不全&…
阅读更多...
C#，码海拾贝（33）——约化“一般实矩阵”为“赫申伯格矩阵”的“初等相似变换法”之C#源代码

C#，码海拾贝（33）——约化“一般实矩阵”为“赫申伯格矩阵”的“初等相似变换法”之C#源代码

using System; namespace Zhou.CSharp.Algorithm { /// <summary> /// 矩阵类 /// 作者&#xff1a;周长发 /// 改进&#xff1a;深度混淆 /// https://blog.csdn.net/beijinghorn /// </summary> public partial class Matrix {…
阅读更多...
【React】脚手架，组件化开发，类组件/函数式组件，声明周期，组件的嵌套，子父传递，插槽，Context，事件总线，setState原理

【React】脚手架，组件化开发，类组件/函数式组件，声明周期，组件的嵌套，子父传递，插槽，Context，事件总线，setState原理

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 脚手架目录结构组件化开发类组件函数式组件 声明周期组件的嵌套组件之间的通信插槽 Context事件…
阅读更多...
vscode实现代码片段快捷输入设置

vscode实现代码片段快捷输入设置

1.编写想要的代码片段 <template> <div>AppContent</div> </template> <script> export default { } </script> <style scoped> </style> 2.打开网站:snippet generator 如下图添加描述,快捷键和代码片段.右边会有生成内容 …
阅读更多...
93.构建样品餐部分第一节

93.构建样品餐部分第一节

之前我们实现得页面是这个样子的 现在让我们来完成剩下的样品餐部分吧&#xff01; ● 大致实现的页面是这样的 ● 让我们先简单的生成这些框架 <section class"section-meals"><div class"container"><span class"subheading&qu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023