微信小程序前端开发黑科技——前后端交互 - WXOPEN Club

1. 问题引入

现在正在学习小程序开发。在开发过程中，前后端交互是非常重要的一环。我选择的是自己搭建后台、前后端分离的开发方式。在这种情况下，按照官方文档的说法，我只能自己配置域名或使用局域网通信。但我想节约学习成本，该怎么办呢？

2. 问题解决——使用工具ngrok

2.1. 下载ngrok

通过这个链接下载即可：https://ngrok.com/download

解压后，就一个exe文件

2.2. 注册获得Authtoken

回到官网进行注册。如果已经有GitHub账号，建议直接使用GitHub账号进行登录并完成注册，因为这外网的注册一直有些问题。
完成注册并登录后，获取Authtoken（已打码）

2.3. 配置代理域名

打开下载解压后的exe文件，输入命令

ngrok authtoken yourauthtoken

将yourauthtoken换成自己的Authtoken即可
然后根据开发需要，配置相应的端口（这里以8080端口为例）

ngrok http 8080

可以得到如下结果

红框中生成的即为代理域名，任选一个即可。

2.4. 修改微信开发者工具中的设置

这样就完成配置了。这时候我们就可以在外网访问内网，那样子我们手机不用与电脑在同一网段（即手机用4g，电脑连wifi）也可以进行测试。

2.5. 测试验证

后端的测试代码（go语言，gin框架）

package main

import "github.com/gin-gonic/gin"

func main() {
	r := gin.Default()
	r.GET("/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{"message": "pong"})
	})
	r.Run()
}

前端发送请求的测试代码

前端输出的测试结果

后端输出的测试结果

测试结果表明前后端成功完成交互，测试成功！

3. 问题拓展——内网穿透

看懂该部分需要有计算机网络的知识。
首先来描述一下问题的本质。在本机调试中，自己的电脑或服务器在没有配置域名的情况下，相当与内网；而微信开发者工具却是在外网上运行的（需要使用自己的微信号登录）。当微信小程序前端向自己搭建的后端发出请求时，相当于外网主动访问内网。所以问题的本质就是外网对内网的访问。

由计算机网络的知识可以知道这显然是不行的。这时有两种解决方式。
第一种是给服务器配置域名，相当于让内网主动接入外网，这样外网就能访问到了。
第二种是使用内网穿透。即让在内网的节点主动访问一个拥有公网IP地址的服务器，并由中间服务器搭桥，打通经过该服务器从其他主机到NAT之后节点的隧道。结合该问题通俗地讲，就是找了一个服务器作为中转站，让微信小程序先将消息发到中转服务器上，再让中转服务器将消息发送到本机的后台，这样就完成了前后端交互通信。