《微信小程序开发》~真机调试连接后端

本地电脑配置场景

  • 在开发微信小程序时,需要进行真机调试的功能,模拟手机真机访问小程序
  • 但是我后端数据库/服务器是在本地电脑,而不是在 云服务器

本地电脑配置步骤

  1. 需要手机和电脑处在同一局域网内
  2. 首先微信开发者工具内运行的小程序,右上角详情->本地设置-> 找到下面这个功能并勾选不校验
    在这里插入图片描述
  3. 测试账号可以添加测试用户账号
  4. 按windows键,进入cmd或其他终端,输入ipconfig,然后按回车查看本地电脑的内网IP
  5. 若当前连接的路由器WLAN,则类似下图显示
    在这里插入图片描述
  6. 接着修改小程序请求后端的地址,将后端地址改为上面查出来的192.168开头的内网地址(不能是127.0.0.1或者localhost回环地址)
  7. 真机设备连接同一个wifi, 再点击微信开发者工具的真机调试即可正常访问小程序(若底下有局域网模式,也不用勾选
    在这里插入图片描述

云服务器配置场景

  • 在开发微信小程序时,需要真机调试的功能
  • 但是我的后端数据库、服务器是在云端服务器(自身拥有各大云产商,没有的请自行购买,可以等活动期间有优惠)

云服务器配置步骤

  • 需要开放防火墙/安全组对应的后端端口,使得小程序能正常访问到后端

  • 微信扫码,在微信公众平台登录小程序,绑定后端对应的云端服务器地址
    在这里插入图片描述

  • 192.168开头的内网地址修改为云服务器上后端部署后对应的ip地址,如有域名指向,则填写域名

  • 运行步骤同前面本地服务器步骤

  • 若需发布,则需要个人/企业认证小程序,填资料并备案,若干工作日审核成功后,则可以进行小程序版本提交审核

  • 审核成功后即可发布小程序线上版本!

### 微信小程序真机调试方法和步骤 #### 准备工作 为了顺利进行微信小程序真机调试,需确保手机与电脑处于同一局域网环境内[^1]。值得注意的是,通过电脑连接至手机热点的方式并不适用。 #### 配置网络IP 对于特定开发环境中(如HBuilder X),应在`main.js`文件中加入当前设备所在网络下的IPv4地址作为请求的基础路径部分[^3]。此操作有助于建立稳定的数据传输通道。 #### 调整开发者工具设置 进入微信开发者工具内的“设置”,找到并点击“代理设置”。在此界面取消所有形式的代理服务选项,并确认已启用直连模式来保障最佳性能表现。 #### 启动真机调试会话 完成上述准备工作之后,在微信客户端打开对应的小程序页面;与此同时,于桌面端开启微信开发者工具,等待提示信息指示可以开始扫描二维码链接两台装置。一旦配对成功,则意味着进入了实时同步编辑状态,允许即时预览修改后的成果。 #### 解决样式差异问题 有时可能会碰到真机上呈现的效果同模拟器有所偏差的现象。这主要是由于Skyline渲染引擎所引起的兼容性挑战所致。针对此类情况,建议尝试调整相关属性配置或是探索官方文档寻求更详细的解决方案指南[^2]。 ```javascript // 示例代码片段用于说明如何获取本地 IP 地址 (仅作示意用途) const os = require('os'); function getIPAddress() { const interfaces = os.networkInterfaces(); for (let devName in interfaces) { let iface = interfaces[devName]; for (let alias of iface) { if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } } } console.log(getIPAddress()); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【无痕干货营】

如果帮助到您,欢迎打赏一下我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值