记录微信小程序的踩坑开发篇
今天微信小程序开发教程栏目为大家记录微信小程序的踩坑。
1. 样式优先级混乱
在使用button组件时,发现在class中设置width不生效,下面贴上代码:
.my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0;
}复制代码
经过微信调试工具排查后,发现user agent的样式优先级居然大于我们自己写的样式类,这在浏览器中基本是不可能发生的事情
解决方案其实比较简单,给width添加!important
的后缀或者style="width:140rpx"
即可,修改后我们再看一下效果:
加上!important
之后,其实宽度的实际效果已经符合我们的预期了,但是微信调试工具却仍然显示user agent样式优先,这应该算是调试工具的一个bug吧。
2. 普通UI组件封装,参数定义繁琐
一般UI视觉稿中的基础组件,例如button,是有特定样式的:比方说背景色/字体。利用小程序的Component
函数封装成组件,编写默认样式并接收外部传入的class,可以方便后续开发。
React有<tag {...props}></tag>
这种写法,即组件接收props不做处理,只透传给下一个组件,但小程序不支持这种写法(苦搜无果,官方文档也没有说明)。
这就意味着我们需要把所有button
组件支持的参数都罗列在properties中:
properties: {
classes: {
type: String,
value: '',
},
type: {
type: String,
value: 'default',
},
plain: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'default',
},
......
},复制代码
3. 全局样式选择器*
被禁用
*{
box-sizing: border-box;
}复制代码
上面的代码在编译的时候就会报错,因为小程序禁用了这类选择器。大胆猜测具体原因:这类作用范围比较广的选择器和自定义组件的样式隔离产生了冲突??
那怎么去给小程序添加全局通用样式?看来只能自己把用到的标签都手动写一遍了,还好网上有现成的代码可以贴:
view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{ box-sizing: border-box;
}复制代码
4. 自定义组件,bind:tap调用两次
封装基础组件时,例如button,下面的写法应当避免:
onTap(e) { if (!this.data.disabled && !this.data.loading) { this.triggerEvent('tap', e.detail)
}
},复制代码
<button bindtap="onTap"></button>复制代码
这样封装出来的组件,会触发两次tap事件,一次是小程序自身触发的,一次是通过triggerEvent触发。
可以换一个非小程序内置的事件类型,比如click:
onTap(e) { if (!this.data.disabled && !this.data.loading) { this.triggerEvent('click', e.detail)
}
},复制代码
阻止tap事件冒泡也可以解决:
<button catchtap="onTap"></button>复制代码
5. 在wxml中用Boolean()做类型转换
例如在一个组件中,监听一个String类型的参数,如果不为空则显示text标签,否则不显示:
// player.wxml<text wx:if="{{ Boolean(leftText) }}">{{ leftText }}</text>复制代码
// index.wxml<player leftText="范读"></player>复制代码
这种写法,leftText
字段很明显已经传递了,但是依旧不显示text标签,当换一种写法后:
// player.wxml<text wx:if="{{ leftText }}">{{ leftText }}</text>复制代码
这样就是正确的,符合我们的期望。
神奇吧?
6. InnerAudioContext调用seek方法后,onTimeUpdate回调失效
InnerAudioContext
用于播放音频,给它传入onTimeUpdate
回调从而获取当前的播放进度。
但是当调用seek
方法跳转到指定位置播放时,onTimeUpdate
就不再被调用了。
小程序社区其实很多人已经提过这个问题,大概经历了1年半的时间可微信团队迟迟没有修复,只能暂时使用折中的办法来修复,解决方案其实很简单:
progressOnChange(e) { if (this.properties.src && this.data.innerAudioContext) { const innerAudioContext = this.data.innerAudioContext;
innerAudioContext.pause();
innerAudioContext.seek(innerAudioContext.duration * e.detail.value / 100); setTimeout(() => {
innerAudioContext.play();
}, 500);
}
},复制代码
先暂停播放,再执行seek
方法,然后设置大概500ms的延时调用play
方法。
7. InnerAudioContext获取duration的时机问题
本想在音频播放前拿到duration应该是实现不了了,网上关于调用onPlay
、onCanplay
的说法都不太靠谱,其中一个方案是这样的:
innerAudioContext.onCanplay(() => { setTimeout(() => { this.setData({ durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--',
});
}, 500);
});复制代码
且不说setTimeout
设置多少毫秒合适,真机上是无效的。
因此还是老老实实的用onTimeUpdate
:
innerAudioContext.onTimeUpdate(() => { this.setData({ durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--'
})
});复制代码
如果说觉得每次onTimeUpdate
都要计算一次很耗性能的话,可以自行实现只计算一次。
8. 设置页面背景色
当前页面的json文件中有个backgroundColor字段,但是设置后无效,后面发现这个字段表示的不是可见区域的背景色,而是页面下拉时窗口的背景色。
如果需要设置页面背景色,可以通过page标签的样式设置:
page{ background: #f9fafb;
}复制代码
待更新...
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhfgg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24