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并保存即可,可以设置授权IP0.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数据库和腾讯云,故需要用到两张用于登录和用户信息相关的数据库表cAppinfocSessionInfo,相关语句如下,可以在数据库中的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 中的 qcloudSecretIdqcloudSecretKey 字段将为空,这会导致登录失败,并返回错误提示:ERR_REQUEST_PARAM

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

修改 server/config.js 中的 useQcloudLoginfalse,并填写上 appIdappSecret 字段(分别为微信小程序的 AppID 和 AppSecret),重新部署代码即可。

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

登录腾讯云云 API 密钥控制台申请云 API 密钥,并在 server/config.jsCONF 中添加如下三个字段:

    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

  1. 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

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

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

    image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,068评论 1 32
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,656评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,961评论 3 119
  • 喜欢一切“刚刚好” 比如一觉醒来手机刚刚充好电 比如*开电扇刚好也开了你头顶上的那个 就像一切都有了充足的准备 也...
    努力晴朗的玻璃阅读 180评论 0 0
  • 2018年5月14日 明天去武汉,这次会去一个月,我是9号理的发,老公怕别人给我的头发剪的不好看,今天晚上特...
    杜书晓阅读 128评论 0 1