文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序开发时遇到的坑有哪些

2023-06-13 06:24

关注

这篇文章主要讲解了“微信小程序开发时遇到的坑有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序开发时遇到的坑有哪些”吧!

最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方。这篇文章从实用性出发,记录了开发过程中的一些问题:

1. 样式优先级混乱

在使用button组件时,发现在class中设置width不生效,下面贴上代码:

.my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0;}

经过微信调试工具排查后,发现user agent的样式优先级居然大于我们自己写的样式类,这在浏览器中基本是不可能发生的事情

微信小程序开发时遇到的坑有哪些

解决方案其实比较简单,给width添加!important的后缀或者即可,修改后我们再看一下效果:

微信小程序开发时遇到的坑有哪些

微信小程序开发时遇到的坑有哪些

加上!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;}

总结

感谢各位的阅读,以上就是“微信小程序开发时遇到的坑有哪些”的内容了,经过本文的学习后,相信大家对微信小程序开发时遇到的坑有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯