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

更新时间:2019-03-31 分类:小程序 浏览量:5770

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

如何通过 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 指的是请求返回的变量)

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

上面的这种请求代码,在开发工具里看不到任何提示。假如,我们加上 console.log(response); 可以看看开发工具里有没有提示。

开发工具就有如下提示了

展开的数据方式如下

这是正常的情况,那么,假如不正常呢?那就检查代码吧,这里没有办法一一讲解了。

好了,以上就是零基础学习微信小程序开发之调试分享。今天中午也抽了个时间,又更新了一下开源版的插件,主要是优化性能,减少 SQL 查询命令,删除不必要的查询函数,尽量采用 WordPress 原生自带的函数获取数据。可优化的地方还有的,但是,主要时间还在制作新的 API 上面。