微信小程序本地服务器搭建,从零到一实操指南
发布时间:10-28来源:微信小程序工具|微信小程序开发|微信小程序制作平台-龙图应用【XcxIP.com】
打开微信开发者工具,点开「不校验合法域名」那个选项的时候,我其实心里没底。那会儿我刚接触小程序开发,后端接口全是白纸,网上教程要么讲得太理论,要么直接甩一堆代码让你复制,复制完还跑不通。折腾了三天,发现问题出在本地服务器根本没启动。所以这篇东西,我想写给你,也写给当时的自己——一个完全从零开始、连localhost和127.0.0.1都分不清区别的初学者。

先别急着装软件。搭建本地服务器之前,你得先想明白一件事:小程序跑在微信里,微信是手机上的App,它访问不了你电脑上的文件。所谓「本地服务器」,就是把你电脑变成一台临时的小型服务器,让小程序通过局域网或者特殊配置来访问它。这中间有个绕不开的坎——微信官方要求所有请求必须走HTTPS,但本地开发时你哪来的证书?所以开发者工具里那个「不校验合法域名」的勾选框,就是你作弊的钥匙。记住,它只在开发阶段有效,真上线了必须换成正规域名。
选工具是个头疼事。市面上的方案多到让人眼花:Node.js配Express、Python配Flask、PHP配Apache、还有Spring Boot这种重型武器。我的建议是,如果你只是搭个测试环境,别碰框架,直接用最简单的方案。我用的是Node.js加Express,理由有三:第一,Node的安装包到处都有,双击下一步就能装完;第二,Express的代码量最少,一个文件就能跑起来;第三,JavaScript和前端语言同源,你至少不用学两种语法。当然,你要是对Python更熟,用Flask也行,道理一模一样——关键不是选哪个,而是先跑起来。
装完Node.js,打开命令行,敲,看到版本号跳出来,这一步你就算成功了三分之一。接着建一个文件夹,比如叫,进去初始化项目。,这个命令会生成一个package.json文件,不用管里面写了什么,接下来装Express:。装完以后,新建一个index.js文件,写三行代码——真的只有三行。第一行引入express,第二行创建实例,第三行监听某个端口。我习惯用3000端口,因为好记。再写个get请求,返回一句「Hello from local server」,然后命令行跑,浏览器打开,看到那句话,恭喜你,本地服务器活了。
但这里有个坑,很多人第一次会栽在这。你电脑上的服务器跑起来了,手机上的小程序却还是访问不到。原因很简单——localhost对手机来说是你手机自己,而不是你电脑。你得让手机和电脑连同一个WiFi,然后查电脑的局域网IP。Windows上敲,Mac上敲,找到那一串IPv4地址,比如192.168.1.8。然后在小程序里的请求地址写,而不是localhost。这一步我当初卡了整整一个下午,因为教程里没人提这个细节。
接下来是微信开发者工具的配置。打开你的小程序项目,右上角详情——本地设置——勾选「不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书」。这一步不做,你连localhost都请求不了。勾选之后,在代码里用发请求,url填你的局域网IP加端口。如果一切顺利,控制台会打出一串JSON数据,那感觉比中了彩票还爽。但如果报错,别慌,先看控制台的具体错误信息,百分之八十是IP写错了或者端口没开。
再说一个进阶操作,用把本地服务暴露到公网。这听起来玄乎,但实际就一条命令的事。你下载ngrok,注册个免费账号,拿到authtoken,然后运行,它会给你生成一个的地址。把这个地址填到小程序的请求里,手机不连WiFi也能访问你电脑上的服务。这个方案特别适合临时给同事演示,或者真机调试的时候用。不过免费版有次数限制,而且速度慢,别指望拿它做生产环境。
聊点踩坑心得。第一,端口被占用了怎么办?命令行会报,改个端口号就行。第二,跨域问题——小程序端一般不用管,但如果你用浏览器调试,记得在Express里加个CORS头。第三,数据格式统一用JSON,别用什么XML,小程序原生支持JSON解析。第四,也是最重要的,每次改完服务端代码,记得重启Node进程,不然你看到的永远是旧数据。我就干过这种事,改了接口半天没反应,发现是没重启。
搭建本地服务器这件事,说难也难,说简单也简单。难是因为它牵扯到网络、端口、权限这些零碎的概念,简单是因为你只需要跑通一个最小闭环。我的建议是,别追求完美方案,先用最笨的方式跑通,再逐步优化。等你真的上手了,会发现这玩意儿跟骑自行车一样,学会了就忘不掉。现在,打开你的终端,敲下第一行命令吧。
