记录微信小程序的踩踏(开发篇)(微信小程序开发者社区)

今天微信小程序开发教程专栏为大家记录微信小程序的步进。

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

1.风格优先的困惑。使用按钮组件时，发现在类中设置宽度不起作用。粘贴下面的代码:

. my-按钮{ width:140 rpx；高度:60rpxline -身高:60rpx填充:0；}用微信调试工具检查复制的代码，发现用户代理的样式优先级其实比我们自己写的样式类要高，这在浏览器中基本不可能。

解决方案其实很简单。加到宽度上！重要或风格的后缀= 宽度:140rpx 是的，修改后，我们来看看效果:

补充！重要之后，其实width的实际效果已经符合我们的预期，但是微信调试工具还是显示用户代理风格优先，应该算是调试工具的一个bug。

2.通用UI组件封装，复杂的参数定义。一般UI视觉稿中的基本组件，比如button，都有特定的样式:比如背景色/字体。利用applet的组件功能封装成组件，编写默认样式，接收外部传入的类，可以方便后续开发。

反应有

这意味着我们需要在属性中列出按钮组件支持的所有参数:

属性:{类:{类型:字符串，值: # 39；'，}，类型:{ type: String，value: # 39；默认 # 39；，}，plain: { type: Boolean，value: false，}，size: { type: String，value: # 39；默认 # 39；,}, ...}，复制代码3。全局样式选择器*被禁用* { box -sizing:border -box；}复制的代码上面的代码在编译的时候会报错，因为小程序禁用了这种选择器。大胆猜测一下具体原因:这种范围很广的选择器与自定义组件的风格隔离相冲突？?

那么如何给小程序添加一个全局通用的样式呢？看来只能自己手动写所有自己用的标签了。好在网上有现成的代码可以贴:

视图、滚动-视图、滚动条、滚动条-项目、可移动-区域、可移动-视图、封面-视图、封面-图像、图标、文本、rich -文本、进度、按钮、复选框-组、复选框、表单、输入、标签、选取器、选取器-视图、单选-组、单选、滑块、开关、文本区域、导航器、功能-页面-导航器、图像、视频、照相机、live -播放器、live -推送器、地图、画布、open -数据、web -视图}复制代码4。自定义组件，绑定:点击调用两次来封装基本组件，如按钮。应避免以下书写:

onTap(e) { if(！this . data . disabled ； !this . data . loading){ this . triggerevent( # 39；tap # 39，e.detail) }}}，复制代码< button bindtap = onTap gt lt/button gt；以这种方式复制代码封装的组件将触发两个tap事件，一个由applet本身触发，另一个由triggerEvent触发。

您可以更改未内置在小程序中的事件类型，例如单击:

onTap(e) { if(！this . data . disabled ； !this . data . loading){ this . triggerevent( # 39；点击 # 39；，e.detail) }}，复制代码防止tap事件冒泡也可以解决:

lt按钮catchtap = onTap gt lt/button gt；复制代码5。在wxml中使用Boolean()进行类型转换。例如，在一个组件中，侦听一个String类型的参数，如果它不为空，则显示文本标记，否则不显示:

//player . wxml lt；text class = text1 wx:if = ；{ { Boolean(left text)} } ； gt{ { leftText } } lt/text gt；copy code//index . wxml ； lt/player gt；以这种方式复制代码，leftText字段显然已经被传递，但是文本标签仍然没有显示。当它以另一种方式书写时:

//player . wxml lt；text class = text1 wx:if = ；{ { leftText } } gt{ { leftText } } lt/text gt；复制代码是正确的，符合我们的预期。

很神奇，对吧？

6.INNERAUDIOCONTENT调用seek方法后，onTimeUpdate回调失败6。InnerAudioContext用于播放音频，一个onTimeUpdate回调被传递给它以获取当前播放进度。

但是当调用seek方法跳转到指定位置播放时，就不再调用onTimeUpdate了。

其实小程序社区很多人都已经提过这个问题了。大概过了一年半的时间，微信团队一直修复缓慢，只能用折中的方法暂时修复。解决方案其实很简单:

{ if(this . properties . src ； this . data . innerAudioContext){ const innerAudioContext = this . data . innerAudioContext；inneraudiocontext . pause()；inneraudiocontext . seek(inneraudiocontext . duration * e . detail . value/100)；setTimeout(()= gt；{ inneraudiocontext . play()；}, 500);}}，先复制代码暂停播放，然后执行seek方法，再设置500ms左右的延迟来调用play方法。

7.InnerOudicContext获取持续时间的时机。我想在播放音频之前获得持续时间，但无法实现。网上关于调用onPlay和onCanplay的说法不靠谱。其中一个方案如下:

inneraudiocontext . oncan play(()= gt；{ setTimeout(()= gt；{ this . setdata({ duration str:secondToTimeStr(inneraudiocontext . duration)| | # 39；--:--', });}, 500);});无论设置了多少毫秒的setTimeout，复制代码在真实机器上都是无效的。

所以，老老实实用onTimeUpdate:

inneraudiocontext . ontimeupdate(()= gt；{ this . setdata({ duration str:secondToTimeStr(inneraudiocontext . duration)| | # 39；--:--'})});复制代码，如果你觉得计算每一次onTimeUpdate都需要很大的性能，那你只能自己计算一次。

8.设置页面的背景色。当前页面的json文件中有backgroundcolor字段，但设置后无效。后来发现这个字段代表的是页面下拉时窗口的背景色，而不是可视区域的背景色。

如果需要设置页面的背景颜色，可以通过页面标签的样式来设置:

page { background:# F9 fafb；}复制要更新的代码...

以上是微信小程序记录踩坑(开发篇)的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：记录微信小程序的踩踏(开发篇)(微信小程序开发者社区) https://zhujicankao.com/82220.html