微信小程序开发篇之踩坑记录
最近参与开发了公司的第一款小程序，开发体验基本类似于基于webview的混合式开发，可以调用官方强大的api，但也有一些坑或者说不习惯的地方。这篇文章从实用性出发，记录了开发过程中的一些问题：
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 class="text1" wx:if="{{ Boolean(leftText) }}">{{ leftText }}</text>
// index.wxml <player leftText="范读"></player>
这种写法，leftText字段很明显已经传递了，但是依旧不显示text标签，当换一种写法后：
// player.wxml
<text class="text1" 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;
}
总结
到此这篇关于微信小程序开发篇之踩坑记录的文章就介绍到这了,更多相关微信小程序开发踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript常用验证函数,实例汇总了如字符串验证、表单验证及js常用特效等诸多js常用验证函数及相关技巧,非常具有实用价值,需要的朋友可以参考下2014-11-11
用js实现预览待上传的本地图片...2007-03-03
切换面板具备功能：鼠标划过不同的题目会有不同的图片和解说，可以连接到不同的网站，实例代码如下，感兴趣的朋友可以参考下哈2013-06-06
Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ），下面这篇文章主要给大家介绍了关于ES6中新增的Object.assign()方法的相关资料，需要的朋友可以参考下。2017-09-09
JavaScript中“+=”的应用...2007-02-02
这篇文章主要介绍了JS this关键字在ajax中使用出现问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
微信小程序继承了微信强大的语音处理功能，提供了录音、音频播放控制和背景音乐等功能，它们的功能不同，但有相似性。本文将详细介绍小程序中如何实现录音与音频播放控制功能，需要的可以参考一下2022-03-03
使用 jQuery(Ajax)/PHP/MySQL实现自动完成功我觉得我有必要写这个教程，因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包，然后告诉你怎么使用，而不是告诉你它是如何工作的以及为什么这样做。2008-06-06
这篇文章主要为大家介绍了Web Components使用生命周期回调函数实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了基于PHP pthreads实现多线程代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
最新评论