uniapp微信H5开发本地调试方案

最新推荐文章于 2025-08-01 19:44:25 发布
原创 最新推荐文章于 2025-08-01 19:44:25 发布 · 2k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #微信 #javascript #前端 #跨端

前言

痛点：

1）原生的H5，并不能方便地提供类似扫一扫的功能

2）原生H5的扫一扫也需要部署到https

ps：本文基于mac系统，windows用户可以根据思路来进行调整

现有方案评估

花生壳等内网穿透工具

  • 需要频繁实名验证
  • 花生壳服务商等域名在手机微信内会显示被举报，无法访问

目前的方案

修改host+charles正向代理+nginx方向代理的模式

原理图如下：
image

基本步骤

我们可信域名为:
家长端：mobile-parent.adacampus.com
教师端：mobile-teacher.adacampus.com

  1. 在微信公众号或者企业微信应用主页填写可信域名（已开启）
  2. 本地开启服务
  3. 修改本地host，把域名解析为本地的服务
  4. 安装并配置nginx, 可以成功通过http访问
  5. 为nginx配置ssl证书，包括建立CA，CA签名
  6. 电脑端安装Charles抓包软件，手机端开启代理并安装Charles证书

本地服务开启

分别开启家长端和教师端在localhost:8080和localhost:8081端口

修改host指向

最低0.47元/天 解锁文章

200万优质内容无限畅学
uniapp开发APP之真机调试
a_靖的博客
01-28 1万+
一：华为手机实时调试APP代码基座流程 1.打开手机的开发者模式，允许USB调试，手机操作流程，进入设置-关于手机，长按版本号（开启开发模式），然后按图操作，下拉屏幕发行已连接 USB 调试，手机端就暂时不用再操作了 2.电脑安装360手机助手，这个软件打开浏览器或者用360软件助手下载就好了，它是 HBuild X 和手机连接的桥梁 3. HBuild X 操作 运行之后就可以在控制台查看进展，会自动在手机安装 APK调试基座 （用于调试的APK，APK就是安卓APP的安装包） .
uni-app H5跨域设置(本地调试可用)
ougexingfuba的博客
11-10 1018
注意:这个方法只能本地调试使用 发布后需要跨域 需要设置服务器允许跨域 首先找到 manifest.json 这个文件，在项目目录的src文件夹下，添加 "h5" 节点 "h5": { "devServer": { "https": false, "port": 8080, "proxy": { "/apis": { "target": "https://www.ucharts.cn", "changeOrigin": true, ".
uniapp开发微信公众号h5，实现静默授权获取用户openid的本地调试（公众号开发如何本地调试）
weixin_43420127的博客
10-22 4000
启动后，访问https://xiaotuxxx.xx.cc也可以看到xxxx.txt的文件内容，说明内网穿透没问题。最后，启动uniapp项目，在微信开发者工具访问内网穿透域名https://xiaotuxxx.xx.cc即可实时本地调试微信公众号h5了。接下来，登录公众号，把https://xiaotuxxx.xx.cc填到网页授权域名即可添加授权域名了。验证xxx.txt文件完成网页授权域名后，输入命令nginx -s stop暂停xxx.txt文件映射。，你应该能看到xxxx.txt的文件内容。
UniApp 从入门到实战：一套代码，搞定 App + 小程序 + H5！
idree的博客
07-03 1153
UniApp是基于Vue.js的跨平台前端框架，只需一套代码即可发布到微信/支付宝等小程序、iOS/Android App及Web(H5)。主要优点包括多端适配、Vue语法支持、丰富插件和原生功能调用。 新手可使用HBuilderX工具创建项目，项目结构包含pages（页面）、components（组件）、static（静态资源）等目录。开发时通过pages.json配置路由，使用uni.request进行网络请求，uni.setStorageSync实现本地存储。
uniapp开发公众号H5进行本地调试
2401_86332692的博客
07-31 816
本着遇到问题就学习得原则，这一次是在给客户调试公众号分享网页不显示图片文字描述得问题，一进微信开发工具就发现了问题。我这里就不详细说配置公众号得细节了，主要讲怎么把线上域名映射到本地开发。
h5 微信公众号本地调试【内网穿透】前端uniapp 后端java springboot
weixin_40918145的博客
12-19 3377
点击左侧仪表盘的状态——在线隧道列表，可以看到刚刚创建的隧道已经有生成了相应的公网地址，一个http协议，一个https协议（免去配置ssl证书的繁琐步骤），均可以访问到本地web服务，复制公网地址。如果提示没有权限保存，将hosts文件拖拉至桌面，用编辑工具打开后，编辑，保存，再拖拉回 C:\Windows\System32\drivers\etc。提示隧道创建成功后，页面自动跳转至隧道列表，可以看到刚刚创建成功的tunnel-1隧道，状态active，表示为正常在线，注意无需再次点击启动。
Hbuilder本地调试微信H5项目（一）
flygoa的专栏
09-18 2135
通过内网穿透，访问本地Hbuilder创建的Vue项目。
uniapp开发H5页面如何打开调试 (vConsole)
H524268015wsw的博客
03-26 2446
uniapp开发H5项目，手机预览时开启像微信小程序一样的vconsole绿框
uniapp——h5的控制台调试、h5调试
努力、拼搏、奋进
10-09 1853
uniapp——h5的控制台调试、h5调试
uniapp h5手机如何打开本地跑的前端项目进行本地调试
漫天随飞雪的博客
08-21 1137
在项目的main.js文件中引入vConsole库：import VConsole from 'vconsole'。vConsole是一个轻量级的移动端调试工具，可以在iOS设备上直接调试Uniapp H5应用。3：将这个地址在手机端打开浏览器访问，确保使用的是电脑的局域网IP地址而不是。// 提交前需要注释 本地调试使用=》确保你的电脑与手机处于同一网络下，2：找到项目启动后生成的地址，通常在控制台的输出信息中可以找到。1：确保你的电脑与手机处于同一网络下。
开发微信公众号H5，本地真机调试
m0_51368884的博客
12-28 1113
1.命令行输入ipconfig然后找到你本地的IPv4地址复制，把127.0.0.1进行替换然后复制完整链接在真机上打开即可。如有更好的方法欢迎交流，如有不对请大佬指导！先划重点必须在同一局域网内否则打不开！
uniapp微信小程序中嵌入H5页面，调试信息查看
怪咖`Blog
03-29 988
uniapp微信小程序中嵌入H5页面，调试信息查看
h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...
weixin_29331015的博客
12-23 1643
UniApp本地调试H5跨域(谷歌chrome浏览器，UniApp内置浏览器不存在此问题)的推荐方案：欺骗浏览器，让浏览器觉得你没有跨域(其实还是跨域了，用的是代理)客户器端解决方案(亲测可用)：1、在manifest.json里添加如下跨域代码："h5":{"devServer":{"port":2001,//你H5网址的端口，如:http://localhost:2001/#/pa...
公众号H5开发如何在本地调试
weixin_43422861的博客
06-16 2402
公众号H5开发本地调试
uniapp开发h5 调用微信sdk 全网最全指南！！！！ 血泪史！！!
柑橘乌云_
09-21 1万+
场景：公司需求是在h5调用扫一扫来识别条形码，经调研发现使用微信sdk是最好的方式。技术栈：uniapp、微信sdk版本：1.6.0先贴（踩的所有坑文档里是一句都不提！！！麻蛋）遇到的问题先抛出来：1.通过后端同学获取调用微信sdk所需的签名过程中，遇到的跨域问题2.使用微信sdk前提必须是微信容器，换句话说就是微信浏览器打开，才能使用微信sdk3.如何在开发本地环境去测试微信sdk的调用情况4.在微信容器使用微信sdk报错，config报错：config:invalid signature。
前端通过uniapp开发公众号或者H5如何进行调测
最新发布
weixin_53731501的博客
08-01 213
HBuilder和微信开发者工具是必备的啦~
Uniapp项目实战之H5端运行到外置浏览器存在跨域问题的解决
aBingNa的博客
09-16 6500
一、Uniapp在官方api中已经明确表示H5 端本地调试时会遇到跨域问题，其实官方api已经明确给出了解决方案，在此记录以防踩坑，官方解决方案 二、官方推荐使用方案一:：使用HBuilderX内置浏览器；方案二：配置webpack-dev-server代理；方案三：给浏览器安装跨域插件，禁止浏览器报跨域；方案一内置浏览器用起来总是有点感觉不提舒服，方案三可能插件不起作用，这里我们使用方案二 1.使用HBuilderX新建uniapp项目，找到manifest.json文件然后找到源码视图模块而后再在其中
uniapp环境H5运行及发行(入门必学)
luck332的专栏
08-27 3302
Uni-app是一个使用Vue.js开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序等多个平台。uniapp环境H5运行及发行(入门必学)
uni-app开发微信公众号H5网页，用微信开发者工具调试公众号
热门推荐
weixin_40466351的博客
09-08 1万+
参考文档： 使用uniapp开发微信公众号（H5页面），用微信开发者工具调试微信公众号 1、根据官网文档，新建入口文件template.h5.html 官网文档 template.h5.html 直接复制过来就可以 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
uniapp微信小程序暗道调试模式
03-26
好的，我现在需要回答用户关于“uniapp微信小程序暗道调试模式”的问题。首先，我要确认用户具体指的是什么。微信小程序的调试通常使用“调试模式”或“vConsole”，而“暗道调试模式”这个说法并不常见。可能是用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值