任务(小项目):
支付宝小程序:红包口令福利
内容:
- 在原有写好的红包口令福利小程序基础上更新新的ui图片
- 根据新的ui图片,对界面进行微调,重新布局
- 对订阅部分的逻辑进行修改
遇到的问题:
- 订阅提示框内的文字和订阅提示框内的订阅按钮设置的样式未生效;
- 点击订阅弹窗提醒时,选择”拒绝,不再询问“时,依旧会订阅成功;
- 在测试订阅弹窗提醒功能时,在选择了“拒绝,不再询问”后,即使后续在后端清除掉了订阅状态候,点击订阅按钮时,不会出现弹窗,而是直接订阅,无法多次测试弹窗功能。
问题解决:
1. 订阅提示框内的文字和订阅提示框内的订阅按钮设置的样式未生效
- 原因:
在给订阅提示框设置背景样式时,设置了opacity,opacity具有继承性,会影响内部元素的透明度,导致订阅提示框内的内部元素(提示文字和订阅按钮)的样式受到影响,达不到预期效果。 - 解决方法:
1.背景颜色的样式直接找ui要了图片,用图片直接作为订阅提示框的背景,而不再自己设置样式;(项目中使用的方法)
2.设置背景色时,使用rgba来设置透明度,而不是使用opacity,rgba只会影响当前元素。
2. 点击订阅弹窗提醒时,“选择拒绝,不再询问”时,依旧会订阅成功
- 修改前的代码:
// 订阅事件
// 接收结果的回调方法
callback(res) {
console.log('111订阅',res)
if (res.success) {
my.showToast({ content: '订阅成功' });
_this.setData({ subscribed: true });
subscribe();
} else {
console.log('未订阅')
/* res.errorCode 11: 用户未订阅关闭弹窗 */
}
}
-
原因:
当点击图中“好的”或者时“拒绝,不再询问”时,代码中res.sucess都会为true,从而导致选择“拒绝,不再询问”时,执行的也是选择“好的”的逻辑。 -
解决方法:
支付宝小程序中,使用refuse来判断是否点击了“拒绝,不再询问”,订阅长期模板时,用户点击了,则返回true,其他情况返回为false。再上述代码中加入res.refuse的判断来解决,代码如下:- 修改后的代码:
callback(res) { console.log('111订阅',res) if (res.success) { //判断是否点了“取消” if (res.refuse) { //判断是否点了“拒绝,不再询问” return } my.showToast({ content: '订阅成功' }); _this.setData({ subscribed: true }); subscribe(); } else { console.log('未订阅') /* res.errorCode 11: 用户未订阅关闭弹窗 */ } },
3. 在测试订阅弹窗提醒功能时,在选择了“拒绝,不再询问”后,即使后续在后端清除掉了订阅状态候,点击订阅按钮时,不会出现弹窗,而是直接订阅,无法多次测试弹窗功能
- 原因:
res.refuse是一个对于用户的长期的值,在测试用户选择了“拒绝,不再询问”时,该用户的res.refuse将在一段时间内一直保持为true,因在即使清除掉了订阅状态,在后续的测试中,因为res.refuse为true,会跳过弹窗提醒部分,直接订阅。 - 解决方法:
使用别的有权限,但还未测试过(未点击过“拒绝,不再询问”)的账号进行测试。
实习感悟:
来实习接到的第一个任务,做之前听需求时,觉得难度很低,实际做的时候,难度确实也不高,但在一些样式的修改上,出现了许多自己未预料到的问题,没有预想的那么简单,还有一些问题问了前辈才解决,编程确实还是需要多做多练才能有提升,很多问题只有在敲代码的过程中才会出现,才能去理解。这个任务暂告一个段落,马上进入实习的第二周,希望在后续新的任务中学习更多的东西_(:з)∠)_。
2022.6.28