【小程序】小程序开发避坑指南

目录

  • include 导入的文件能否引用其他组件,生命周期等在哪儿
  • 如何强制命中实验,命中不了实验是什么原因
  • 扫预览码提示网络问题,请稍后再试
  • 展现怎么打点?日志平台实时校验无数据
  • 获取嵌套的组件元素rect获取不到
  • 组件里设置的文本样式被父组件统一设置的文本样式覆盖
  • 滚动到某一位置 滑动后不准确
  • 如何实现计算属性
  • 首次编译报错 Page is not found in path,刷新后不报错
  • 一些规范

问题1:include 导入的文件能否引用其他组件,生命周期等在哪儿

解决方案

可以引入Component,相关属性及方法在父组件上。

问题2:如何强制命中实验,接口命中不了实验是什么原因

可以在页面拼参数 eg:hitEid=11245

命中不了实验可能是获取实验的接口 cookie里的baiduid为空

解决方案

退出登录/重新登录,清缓存,重启IDE

问题3:扫预览码提示网络问题,请稍后再试

img

解决方案

项目信息-本地配置-校验域名 取消勾选

问题4:展现怎么打点?日志平台实时校验无数据

组件进入可视区域展现打点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
val: {
observerList: []
},

attached() {
this.startObserve();
},

detached() {
this.stopObserve();
},
methods: {
/**
* 开启曝光监听
*/
startObserve() {
const isIphoneX = util.getSystemInfoSync().isIphoneX;
const observer = swan.createIntersectionObserver();
observer.relativeToViewport({
bottom: -(isIphoneX ? 34 : 0) - 58
}).observe(`#question-tag-id`, res => {
if (res.intersectionRatio > 0) {
log.send({
area: 'emotion-label',
action: 'show',
'log_version': '2.0',
serverId: 16268
});
observer.disconnect();
}
});
this.val.observerList.push(observer);
},

/**
* 断开曝光监听
*/
stopObserve() {
this.val.observerList.forEach(item => {
item && item.disconnect();
});
},
},

问题5:获取嵌套的组件元素rect获取不到

解决方案

加上.in(this)

1
2
3
4
5
6
7
8
9
10
// 获取标签rect
getRect() {
let that = this;
swan.createSelectorQuery().in(this)
.select(".tag-container")
.boundingClientRect(function(rect) {
that.triggerEvent('tagRectChanged', rect);
})
.exec();
}

问题6:组件里设置的文本样式被父组件统一设置的文本样式覆盖

解决方案

提高权重

1
2
3
/* 提高权重 */
#question-tag-id .tag-text {
}

问题7:滚动到某一位置 滑动后落点不准确

解决方案

需要监听onPageScroll方法,计算上已滑动的距离 currentScrollTop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
scrollToRelatedContent(){
const {statusBarHeight, titleBarHeight = 44} = util.getSystemInfoSync();
const navHeight = statusBarHeight + titleBarHeight;
let currentScrollTop = this.data.currentScrollTop;
swan.createSelectorQuery()
.select(".swan-security-padding-bottom")
.boundingClientRect(function(rect) {
swan.pageScrollTo({
scrollTop: rect.top - navHeight + currentScrollTop,
duration: 300,
success: res => {
},
fail: err => {
}
});
})
.exec();
}

问题8:计算属性

解决方案

给属性增加observer,发生改变时调用方法更新其他属性

问题9:首次编译报错 Page is not found in path,刷新后不报错

忽略就行

问题10:一些规范

色值使用小写

建议:color: #3b6fff;

不建议:color: #3B6FFF;

最近的文章

【小程序】微信小程序开发遇到的问题

问题1 体验版怎么访问域名不支持https 带端口号的线下环境点击右上角三个点-点击“开发调试”,即可访问域名不支持https 带端口号的线下环境 问题2 体验版怎么查看日志,清除缓存打开“开发调试”后,点击vConsole,可以查看log,清除storage等 问题3 怎么找页面路径 问题 …

小程序 阅读全文
更早的文章

【iOS 开发】3D Banner的实现

1.效果裸眼3D 2.CMMotionManager 概述用于启动和管理运动服务的对象。 1class CMMotionManager : NSObject 使用CMMotionManager对象启动报告设备板载传感器检测到的运动的服务。使用此对象接收四种类型的运动数据: 加速度计数据,表示设备在 …

iOS开发 阅读全文