背景

微信小程序最开始的时候是不支持ip + 端口号直连的，比如我这边的本地服务器地址http://localhost:3001/miniprogram/test是无法进行正确显示的

[注：更新下，目前微信小程序开发者工具打开“不校验域名”是可以正常显示的，所以下文可以当成“本地调试不可ip直连的时候怎么办？”的问题来看]

方案

其实这个也比较简单，主要代理下域名 + nginx端口号即可，作者用的是mac，以下用mac来进行讲解

代理域名

mac里有一个hosts文件，可以使用root权限直接修改，默认情况下为 “/etc/hosts” ，直接使用sudo vim /etc/hosts修改即可

  1. ##
  2. # Host Database
  3. #
  4. # localhost is used to configure the loopback interface
  5. # when the system is booting.  Do not change this entry.
  6. ##
  7. 127.0.0.1       localhost
  8. 127.0.0.1       mock.com
  9. # End of section

看上方代码块，默认会有127.0.0.1 localhost (如果有安装docker之类的会有一些额外的)，后方加一条127.0.0.1 mock.com 即可

此时使用http://mock.com/即等同于127.0.0.1，接下来代理下端口号，我这里使用的是nginx

nginx端口号代理

找到nginx.conf文件，忘了的情况下nginx -V，找到--conf-path=即可，一般情况下等于/usr/local/etc/nginx/nginx.conf

  1.     server {
  2.         server_name  mock.com;
  3.         location / {
  4.             proxy_pass http://127.0.0.1:3001;
  5.         }
  6.     }

找到位置，加上这么一句即可

End

可以在浏览器里打开http://mock.com看下是否能正确打开页面，work的情况下，
复制地址到小程序端即可查看效果

  1. <web-view  src="http://mock.com"></web-view>

避免忘记记一下[手动狗头][手动狗头][手动狗头]