零基础学习微信小程序开发之调试

之前开源的微信小程序有人用的时候遇到问题，总是问为什么不能显示，又或者说没有报错呀。然后，感觉就无从下手了，不知道应该怎么办了。其实遇到这种情况的，很多情况下都是程序小白，刚接触微信小程序的新手，甚至有可能是连程序开发都是刚接触的。于是，我这个菜鸟渣渣就来分享比较快速查找原因的调试方法。

如何通过 API 查看数据是否输出正常呢？我这里以 Chrome 浏览器为例，因为要装浏览器插件，其他的浏览器不知道有没有这个插件。没有的话，建议你们换用 Chrome 浏览器来查看。

首先，在 Chrome 浏览器安装扩展插件，也就是扩展程序。这个插件名是 JSONView 。如下图

为什么要安装这个扩展呢？因为微信小程序使用的是 JSON 数据格式，如果不安装这个扩展就会看一堆字符串，根本没有办法清晰的了解数据输出。

以下通过访问 WordPress REST API ：https://www.xxx.com/wp-json/wp/v2/posts 查看数据，如下图

安装扩展并启用之后，如下图

如此一对比，你就可以清晰的知道 API 的数据输出情况。可以清晰的了解到数据输出的格式，哪些地方有数据，哪些地方没有数据。不仅有利于调试，而且还有助于开发的时候，清晰的知道所调用的数据是数组还是对象(有些编程语言里称为字典)。那么，你就很容易知道为什么小程序里的数据会不显示或不正常了。

通常出现的问题是：

1). 访问 WordPress REST API 时出现 404 。

这种情况要不就是被主题或者是插件屏蔽了 REST API 的输出，要不就是伪静态没有设置。所以，首先检查伪静态有没有设置成功。注意，服务器支持伪静态的话，URL 是不存在 index.php 的，不支持伪静态，采用的 PHP 伪静态，那么 URL 就会有 index.php 作为目录形式存在。所以，如果出现了 index.php 的话，那么，你所访问的 REST API 都要加上 index.php ，即 https://www.xxx.com/index.php/wp-json/wp/v2/posts 才有可能会出现数据。

如果伪静态是正确且正常的，那么，更换主题为 WordPress 自带的默认主题进行测试，有些主题作者认为 REST API 没有必要，就会在主题函数中加了屏蔽 REST 代码，如果你不清楚怎么修改，先更换主题试试。

如果以上两步都正确的情况下，还是无法正常获取，那么，你就需要尝试把其他插件都停止激活，有可能是插件有冲突，导致 API 有误。

如果以上的步骤都尝试了，还是不能正常获取，那么，就很有可能插件的 API 本身就有问题，即存在 Bug ，这个可以问问插件开发者。

2). 访问 WordPress REST API 时一切正常，但是开发工具里查看不到数据。

通常出现这种情况，很大可能就是开发工具里的数据请求方式有问题。这个时间，可以通过 console.log(); 这种方式打印数据，查看开发工具里的数据请求是否能正能常获取数据了。

小程序源代码里，通常无法获取数据，或者不能正常展示，又没有报错的情况，都会用 consol.log(res); 查看请求返回的数据。一般调试正常后，就会删除会注释掉了这个 console.log(res); (注意：res 指的是请求返回的变量)

下面就以获取文章列表请求为例