Udacity微信小程序课程常见Bug分析

本文章共罗列了以下几个问题（持续更新）

• 天气小程序中，水平滚动scroll无法成功
• 调用接口代码没有报任何错误但是没起效
• 腾讯地图API报错: 此key未开启webservice功能
• 腾讯云没有了
• 单步调试没有了
• 项目二的数据库两张关键表
• 登录逻辑实现后报错 ERR_REUEST_PARAM
• 对象存储上传音频文件失败，报错：ERR_UNSUPPORT_FILE_TYPE
• 发送影评报错: ERR_TRUNCATED_WRONG_VALUE_FOR_FIELD
• 以下哪个函数类型的参数的参数不为空

由于不支持页内目录，所以只能自行查找。

天气小程序中，水平滚动scroll无法成功

很多学员在学习天气小程序的过程中，遇到下图红色区域在电脑上无法横向滚动的问题，这主要是因为部分电脑型号的微信开发工具再次方面存在缺陷，可尝试使用微信开发工具中的远程调试功能，在手机真机上进行预览，多数情况下是可以横向滚动的，所以以真机为准。

img1.jpg

调用接口代码没有报任何错误但是没起效

多数情况下代码没有起效并不是没有错误，而是有错误你没有去捕获，可以通过几种方式去判断是否有错误

1. 在source里设置断点
   在source里设置断点，看代码是否进入了success部分，如果没有进入你想要执行的success代码，说明这个接口没有成功，那么很有可能是进入了fail中，而课程中可能并没有写fail回调函数，需要我们自己添加。如下图。

   
   
   img2.png

2. 添加fail回调函数
   在调用接口的适当位置添加fail回调函数，注意需要将接口的返回值作为参数在回调函数中输出，简单说就是(errResult) => {console.log(errResult)}通过这种方式在控制台输出调用接口返回的错误。如下图，我们可以看到在控制台里输出了对应内容。
   

   img3.png

3. 看Network的Response
   如果是调用接口发生的错误，那么在network中的response都可以直接看到返回值，如下图所示。

   
   
   img4.png

腾讯地图API报错: 此key未开启webservice功能

此错误是由于API设置不正确导致的，需要进行设置，勾选WebServiceAPI并保存即可，可以设置授权IP，0.0.0.0-255.255.255.255，如下图。

img5.png

腾讯云没有了

腾讯云只需要右键菜单栏 -> 自定义工具管理 -> 勾选腾讯云 -> 点击确定即可。如下图。

img6.png

单步调试没有了

从2018年7月12日开始，微信开发工具由于安全问题就不提供单步调试功能了，但是我们在完成微信小程序课程时单步调试还是非常需要的，所以可以下载最后一个有单步调试的开发工具版本20180612,下载地址如下：
[mac]https://dldir1.qq.com/WechatWebDev/1.0.0/201806120/wechat_devtools_1.02.1806120.dmg
[win32]https://dldir1.qq.com/WechatWebDev/1.0.0/201806120/wechat_devtools_1.02.1806120_ia32.exe
[win64]https://dldir1.qq.com/WechatWebDev/1.0.0/201806120/wechat_devtools_1.02.1806120_x64.exe

项目二的数据库两张关键表

在做项目二时需要像课程二一样使用mysql数据库和腾讯云，故需要用到两张用于登录和用户信息相关的数据库表cAppinfo和cSessionInfo，相关语句如下，可以在数据库中的SQL模块执行该语句。

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

CREATE TABLE `cAppinfo` (
  `appid` char(36) CHARACTER SET latin1 DEFAULT NULL,
  `secret` char(64) CHARACTER SET latin1 DEFAULT NULL,
  `ip` char(20) CHARACTER SET latin1 DEFAULT NULL,
  `login_duration` int(11) DEFAULT NULL,
  `qcloud_appid` char(64) CHARACTER SET latin1 DEFAULT NULL,
  `session_duration` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


CREATE TABLE `cSessionInfo` (
  `open_id` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `uuid` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `skey` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `last_visit_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_key` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL,
  `user_info` varchar(2048) COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='会话管理用户信息';

ALTER TABLE `cSessionInfo`
  ADD PRIMARY KEY (`open_id`),
  ADD KEY `openid` (`open_id`) USING BTREE,
  ADD KEY `skey` (`skey`) USING BTREE;

COMMIT;

img7.png

登录逻辑实现后报错 ERR_REUEST_PARAM

课程二中按照视频实现登录逻辑之后会遇到报错ERR_REUEST_PARAM的问题，这是由于腾讯云出于安全考虑，即日起，我们不再帮助用户无感知的申请腾讯云云 API 密钥。官方给出的解释如下：。
出于安全考虑，即日起，我们不再帮助用户无感知的申请腾讯云云 API 密钥，受此影响，腾讯云微信小程序解决方案 Wafer2 提供的 sdk.config.json 中的 qcloudSecretId 和 qcloudSecretKey 字段将为空，这会导致登录失败，并返回错误提示：ERR_REQUEST_PARAM。

你可以通过以下两种方式修复该问题：
1. 关闭腾讯云代理登录，使用微信小程序 AppID 和 AppSecret 登录：

修改 server/config.js 中的 useQcloudLogin 为 false，并填写上 appId 和 appSecret 字段（分别为微信小程序的 AppID 和 AppSecret），重新部署代码即可。

2. 手动填写腾讯云云 API 密钥：

登录腾讯云云 API 密钥控制台申请云 API 密钥，并在 server/config.js 的 CONF 中添加如下三个字段：

    qcloudAppId: '你的腾讯云 AppID',
    qcloudSecretId: '你的腾讯云 SecretId',
    qcloudSecretKey: '你的腾讯云 SecretKey',

重新部署代码即可生效。
由于上传接口也会使用到腾讯云云 API 密钥，如遇到上传接口报错，也请参考如上 2 的方法排查。
对您使用带来的不便，敬请谅解。

上述官方地址: https://github.com/tencentyun/wafer2-quickstart/issues/13

对象存储上传音频文件失败，报错：ERR_UNSUPPORT_FILE_TYPE

在做项目二时可能会遇到上传音频到对象存储失败，报ERR_UNSUPPORT_FILE_TYPE错误的时候，如下图所示。

6031543412225_.pic.jpg

在通过查看wafer源码，我在server/node_modules/wafer-node-sdk/lib/upload/index.js中找到如下代码:

 const allowMimeTypes = config.cos.mimetypes
            ? config.cos.mimetypes
            : ['image/jpeg', 'image/jp2', 'image/jpm', 'image/jpx', 'image/gif', 'image/bmp', 'image/png', 'audio/mpeg', 'audio/mp3', 'audio/m4a', 'application/pdf']
        if (!resultType || !allowMimeTypes.includes(resultType.mime)) {
            debug('%s: 不支持类型的文件', ERRORS.ERR_UNSUPPORT_FILE_TYPE, imageFile)
            throw new Error(ERRORS.ERR_UNSUPPORT_FILE_TYPE)
        }

这就是与报错相关的部分，即我们要求的文件格式不支持，所以解决办法如下，在server/config.js中的cos中添加如下代码：mimetypes: ['audio/x-aac', 'audio/aac', 'audio/mpeg', 'video/webm', 'audio/mp3', 'audio/m4a']，重新上传代码即可。

image.png

发送影评报错: ERR_TRUNCATED_WRONG_VALUE_FOR_FIELD

这个错误是由于发送评论中或者用户名中含有中文字符，而我们创建数据库时没有指定字符集，默认是Latin，该字符集是不支持中文的，我们需要修改为utf8mb4。

数据库字符集

comment字符集

movie字符集

collection字符集

以下哪个函数类型的参数的参数不为空

image.png

注意题目问的是参数的参数

1. Page的函数类型的参数指的是onLoad，而onLoad的参数是Object query不为空，如下图所示。相关链接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#data
   
   page.onLoad
2. Page的函数类型的参数指的是onPullDownRefresh，而onPullDownRefresh的参数为空，如下图所示。
   
   Page.onPullDownRefresh
3. setData()的函数类型的参数指的是callback，而callback的参数为空，这个需要编写相关代码进行测试。

this.setData(
    {
      data: 'data'
    }, (res) => {
    console.log(res)
})
// 控制台返回的是undefined

相关链接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#pageprototypesetdataobject-data-function-callback

image.png

4. wx.request的函数类型的参数指的是complete，而complete的参数，答案认为是空，而测试结果表明可以获得到值，代码如下。这个需要编写相关代码进行测试。

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
getNow(callback){
    wx.request({
      url: 'https://test-miniprogram.com/api/weather/now', //仅为示例，并非真实的接口地址
      data: {
        city: '上海市'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: res => {
        console.log('wx.request>success:',res.data.result)
        let result = res.data.result;
        this.setNow(result);
        this.setHourlyWeather(result);
        this.setToday(result);
      },
      fail: res => {
        console.log('wx.request>fail:', res.data.result)
      },
      complete: res => {
        console.log('wx.request>complete:', res.data.result)
        if (callback) {
          callback()
        }
        callback && callback()
      }
    })
  }
// wx.request>success: {now: {…}, today: {…}}
// wx.request>complete: {now: {…}, today: {…}}
// 控制台返回的是undefined

相关链接：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

image.png

5. wx.request的函数类型的参数指的是success，而success的参数不为空，代码同上。

6. getNow的函数类型的参数指的是callback，而callback的参数为空，代码如下。
   

   image.png