在微信小程序本地开发测试中，会遇到一个坑

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

在微信小程序本地开发测试中，会遇到一个坑

在微信小程序本地开发和测试的过程中（这里指本地测试，本地测试，本地测试，重要的事情说三遍），会遇到一个坑：微信中可以正常请求本地后台数据开发工具，但是在手机预览中无法请求，如下图：

1、微信开发工具中数据正常显示

2. 手机预览无数据

为了解决这个问题，需要进行以下4项设置：

1.微信开发工具中设置：不验证合法域名、web-view（企业域名）、TLS版本和HTTPS证书

2. wx请求的地址。 不能使用，应改为本地服务器所在计算机的IP

假设电脑的IP是192.168.0.110； 请求的地址为：index/list/； 代码写法如下：

wx.request({  
  //url: 'http://localhost/index/list/getdata'，错误请求地址  
  url: 'http://192.168.0.110/index/list/getdata',//正确请求地址  
  data: {},  
  header: {    
   'content-type': 'application/json'  
  },  
  success (res) {    
   console.log(res.data)  
  }
})

3、手机和电脑（本地服务器）需要连接同一局域网（WIFI网络）

4、手机扫描二维码进入小程序后，需要开启调试模式来请求数据。

进入小程序后，页面数据仍为空； 点击右上角三个点开发微信小程序平台，打开调试

开启调试后，当前小程序会自动关闭。 需要重新进入调试模式才能生效。

重新进入小程序，可以看到页面数据已经出来了，并且右下角有一个绿色方块的调试工具按钮。

点击右下角的调试工具按钮，可以看到页面上的所有数据，方便开发在手机上更好的进行测试。

总结

1、本地测试时，微信开发工具必须勾选此项设置（不验证合法域名），否则微信开发工具将无法请求数据； 在线时取消该设置。 为什么需要设置（不验证合法域名）的文档地址如下：

……

2.当使用wx. 请求地址，如果url是这种格式，虽然在微信开发工具中可以请求后台数据在微信小程序本地开发测试中，会遇到一个坑，但是在手机上预览时无法请求到数据。因为它指的是本地服务器所在的电脑，不知道手机访问是什么，所以需要使用本地IP+请求地址。

3、问：为什么手机在开启调试模式时可以请求数据，但未开启时无法请求数据？这其实和之前微信开发工具设置不验证合法域名是一样的。

参考：小程序本地测试：开发工具可以请求后台数据，但手机预览不能

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等