本地配置微信H5测试

最新推荐文章于 2024-11-26 15:35:26 发布
原创 最新推荐文章于 2024-11-26 15:35:26 发布 · 901 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信 #微信小程序 #小程序

一 配置本地域名信息
修改本地的hosts文件配置域名_calm_encode的博客-优快云博客icon-default.png?t=M0H8https://blog.youkuaiyun.com/calm_encode/article/details/122572903?spm=1001.2014.3001.5502        参照配置本地域名信息。

二 配置微信开发者工具

        1. 选中公众号网页调试

 

        2. 启动本地微信H5前端项目，然后将配置域名放入指定位置进行H5页面加载

         要配置映射的本地域名和本地端口，同时需要配置80端口（端口需要个人研究，学前端的同学说只能开启80端口）。

微信通过页面(H5)直接打开本地app的解决方法
08-29
微信通过页面(H5)直接打开本地app的解决方法 微信通过页面(H5)直接打开本地app是指微信用户在微信中点击链接，直接打开已经安装在本地的app，而不是打开微信浏览器中的H5页面。这种方式可以提高用户体验，减少用户...
微信h5游戏平台.rar
07-30
微信H5游戏平台是一个基于HTML5技术开发的互动游戏平台，专为微信用户设计，让用户在微信环境中直接体验游戏，无需下载安装应用。这个压缩包包含的资源可能涉及多个方面，如前端页面、后端服务器逻辑、数据库配置、...
本地调试H5流程
weixin_46054723的博客
03-31 1075
（3）在HBuilder中选择运行到浏览器，将浏览器中的地址复制到公众号网页模式的地址栏中，刷新页面重定向到本地项目主页面；（2）在微信开发者工具中，点击微信开发者工具，将开发模式选为公众号网页模式；（4）将地址栏中的https://xxx.com替换为项目本地地址；（2）将/unpackage/dist/build/h5文件发布；（1）点击发行到网站-PC Web或手机H5；（1）点击运行到微信开发者工具；（2）微信开发者工具。
h5 微信公众号本地调试【内网穿透】前端uniapp 后端java springboot
weixin_40918145的博客
12-19 3461
点击左侧仪表盘的状态——在线隧道列表，可以看到刚刚创建的隧道已经有生成了相应的公网地址，一个http协议，一个https协议（免去配置ssl证书的繁琐步骤），均可以访问到本地web服务，复制公网地址。如果提示没有权限保存，将hosts文件拖拉至桌面，用编辑工具打开后，编辑，保存，再拖拉回 C:\Windows\System32\drivers\etc。提示隧道创建成功后，页面自动跳转至隧道列表，可以看到刚刚创建成功的tunnel-1隧道，状态active，表示为正常在线，注意无需再次点击启动。
开发微信公众号H5，如何本地调试【爽歪歪】
qq_31496915的博客
12-01 5807
最近开发公众号h5，需要获取公众号用户的code，但是是根据微信公众号提供的方式，是对url地址进行重定向，前提还要在公众号后台配置【网页授权域名】，这玩意还不能是ip地址，也就是说,本地调试不了，盲写完后，每次需要部署到测试环境进行调试，修改一次部署一次，烦死了！！！因为公众号【网页授权域名】不能是ip地址和外网不能访问内网，那么可以借助内网穿透工具。具体步骤如下
微信开发之微信环境h5页面登录实现流程
lee前端技术站
09-08 5152
一、unionid和openId 在了解微信环境登录流程之前，先讲俩个概念：unionid和openId。 unionid表示某一个用户在某一个公司或者商家下的用户id(某公司或商家的身份证）； openid表示某一个用户在某一个公司或者商家下的某一个应用或者公众平台下的用户id(某一个应用或者公众平台的身份证） 所以，某一个公司或者商家下会有多个应用或者公众平台，那么就通过unionid来关联某一个用户在不同应用或者不同平台的关系。 二、静默授权和非静默授权 我们在平时开发中，总会听到产品要求
pc调试微信h5页面
John的专栏
07-16 5284
一、微信配置：  参考地址：https://testerhome.com/topics/6871 1.打开微信，设法打开网址 http://debugx5.qq.com （推荐直接把这个网址发给文件传输助手，然后就可以直接打开链接了）  2.在打开的网页中选择 【信息】->【TBS settings】，勾选 【是否打开 TBS 内核 Inspector 调试功能】,并点击提交按钮  3.微...
h5微信本地调试 vue_VUE开发微信H5页面总结
weixin_34138585的博客
12-31 804
写在前面刚入门前端的时候写过很多的微信H5页面，时隔多年感觉应该是手到擒来，不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的，做个记录。防止自己以后再去解决解决过的问题。github：github.com/qq9694526/v…一、微信网页授权网页授权流程分为四步，这里只说前端需要做的，其中的第一步：跳转授权页面获取code。这里分享下我的授权逻辑(下图)，它有两个优点...
解决 uniapp 本地开发微信公众号h5 前后端 思路
weixin_41104307的博客
11-26 909
1. 官网 分享出来时链接而不是卡片的原因在于 微信做了调整 通过公众号/扫码/分享卡片这些渠道打开，才能分享卡片效果；所以测试的时候，扫码一下 ，开发工具预览生成的二维码才有效。以上是用测试号测试，如果用到正式公众号测试，那就需要将 代理端口转发到80,本地启动nginx 做转发，主要转发 校验文件，在转发到对应的端口。注：我这里是使用付费的版本，你也可以使用免费版本，如果量不大的话；免费版本的话，可能有一定的限制，具体看官网。坑，总是要踩的，不然哪里来的成长。nginx本地安装自行参考网上。
java微信h5支付_Java-实现微信H5支付
weixin_42144707的博客
02-15 1125
做的是微信H5支付，微信APP支付已经有了，H5支付还没有，需要注意的是：H5支付需要在微信支付商家后台单独开通。微信H5支付开发流程图： 红色的就是我们服务端需要做的，简单来说的业务流程就是：在我们自己的系统里下订单把我们系统的订单号，和一系列参数编辑好，以XML的格式传给微信统一下单接口得到微信下单回执，在成功的情况下，把mweb_url参数传给前端访问它在前端用户已付款的情况下，微信访问你之...
PC端本地运行的H5 网页如何真机调试
weixin_54656536的博客
06-12 2384
PC端本地运行的H5 网页如何真机调试
微信h5开发网页授权-本地如何开发调试？
沐雪架构师
09-19 3931
开发带有微信网页授权功能的页面，如何调试，想是很多人开发过程中都会遇到的难题。 我的解决方案如下： 1、首先按照域名在微信服务号里配置好。如下图： 2、在本地Hosts里做该域名的映射.如下： 127.0.0.1 ysc.uweixin.cn 3、iis里配置站点，域名设置为如上的域名。文件指向本地发布的站点目录。这样就可以正常网页授权了，使用微信开发者工具打开网页即可。 4、vs里调试附件到该进程。就可以调试了。 ...
Hbuilder本地调试微信H5项目（一）
flygoa的专栏
09-18 2287
通过内网穿透，访问本地Hbuilder创建的Vue项目。
H5实现分享功能
Wang_MengHan的博客
08-09 3919
H5实现分享功能
uniapp开发微信公众号h5，实现静默授权获取用户openid的本地调试（公众号开发如何本地调试）
weixin_43420127的博客
10-22 4453
启动后，访问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 公众号授权运行到本地测试
qq_43024468的博客
10-26 875
首先修改本地hosts文件 打开 C:\Windows\System32\drivers\etc 在mainfest.json配置 “domain” : “http://xxx.com/”, “devServer” : { “port” : 80, “disableHostCheck” : true } 4. 先运行到H5谷歌了，会提示请在微信客户端打开链接 5. 然后运行到小程序，切换调试模式，切换成公众号调试 6. 在上面的地址输入你的安全域名 ...
uniapp开发公众号H5进行本地调试
2401_86332692的博客
07-31 872
本着遇到问题就学习得原则，这一次是在给客户调试公众号分享网页不显示图片文字描述得问题，一进微信开发工具就发现了问题。我这里就不详细说配置公众号得细节了，主要讲怎么把线上域名映射到本地开发。
H5页面测试总结
yunbin_7的专栏
05-26 4419
转载地址：http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html 其实经过几次H5页面测试之后，发现存在很多共同的问题，所以在此对H5页面的测试点（以及容易出问题的点），做一个总结，给开发同学自测，以及准备入手H5测试的同学一个参考。 　　1、业务逻辑相关 　　除基本的功能测试之外，H5页面的测试，需要
微信登录基于前端本地测试说明
qq_42215473的博客
09-10 433
1.在微信开发平台创建网站应用获取app_id,app_secret 2.本地安装nginx配置反向代理 server { listen 80; server_name 域名(这里的域名是你在微信平台创建应用的指定回调域名) location / { proxy_pass http://dev.boxuni-v2.com;(这里是本地域名地址,就是你本地启动的前端项目访问地址) } } 3.配置本地host文件 192.168.2.66（这里是本地ip地址） www.boxuni-tst.co
微信公众号本地测试h5
最新发布
02-26
### 微信公众号H5页面本地开发与调试方法 为了实现在本地环境中顺利测试微信公众号的H5页面，需利用微信公众平台提供的Web开发者工具来完成这一过程[^1]。 #### 使用微信开发者工具进行配置 - **安装并启动微信开发者工具** 安装最新版本的微信开发者工具后，在该工具内创建项目时输入公众号服务器地址以及token等必要参数。这一步骤确保了后续能够正常加载和运行H5应用逻辑。 - **设置合法域名** 进入微信公众平台后台管理界面中的“开发”-> “接口权限”，按照指引添加用于测试的URL前缀作为JS接口安全域名。注意这里的域名应指向本地环境可通过外网访问到的服务端口映射地址（例如通过ngrok实现）。此操作允许H5页面内的JavaScript API调用微信特有的功能。 - **启用HTTPS支持** 对于涉及敏感数据传输的操作，如支付等功能，则必须保证整个流程都在加密状态下执行。因此建议采用SSL证书使本地服务具备https协议的支持能力。可以考虑使用自签名证书配合Chrome浏览器的信任机制来进行初步验证。 ```bash # 启动本地HTTP服务器并将流量转发至公网可见位置(假设已安装ngrok) python3 -m http.server 8080 & ./ngrok http 8080 ``` #### 实现跨域资源共享(CORS) 由于浏览器同源策略限制，默认情况下无法直接请求不同源的数据资源。为此可以在Node.js Express框架下简单配置CORS中间件解决这个问题： ```javascript const express = require('express'); const cors = require('cors'); let app = express(); app.use(cors()); // 允许所有来源的跨域请求 // 或者指定特定白名单 // app.use(cors({ origin: 'http://example.com' })); app.get('/api/data', (req, res) => { res.json({ message: "This is a test response from server." }); }); app.listen(process.env.PORT || 3000); ``` 当完成了上述准备工作之后，便能够在微信客户端内部打开由本地搭建起来的网页链接，并借助微信开发者工具实时查看渲染效果、网络请求状态乃至控制台日志输出等内容，从而达到高效便捷地开展H5页面迭代优化工作的目的。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值