记录微信小程序的践踏(开发篇)(微信小程序骗人)

今天微信小程序开发教程专栏为大家记录微信小程序被践踏的情况。

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

1.风格优先比较混乱。使用按钮组件时，发现在类中设置宽度并不生效。请粘贴下面的代码:

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

解决方法其实比较简单，加到width上！重要或风格的后缀= & quot宽度:140rpx & quot是的，我们来看看修改后的效果:

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

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

反应有

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

属性:{ class:{ type:String，value:' '，}，type: { type: String，value: 'default '，}，Plain: {type: Boolean，value: false，}，size: {type: string，value:' default '，}，...}，复制代码3。全局样式选择器*被禁用* { box -sizing:border -box；}复制代码上面的代码会在编译时报错，因为小程序禁用了这种选择器。大胆猜测一下具体原因:这种功能广泛的选择器与自定义组件的风格隔离相冲突？？

那么如何给applet添加全局样式呢？我用的标签好像都要手动写，还好网上有现成的代码可以贴:

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

onTap(e) { if(！this . data . disabled & amp；& amp！this . data . loading){ this . trigger事件(' tap '，e.detail)}}，复制代码

您可以更改非applet内置事件类型，例如单击:

onTap(e) { if(！this . data . disabled & amp；& amp！this . data . loading){ this . triggerevent(' click '，e.detail)}}，复制代码防止tap事件冒泡也可以解决:

& ltbutton & gt& lt/button & gt；复制代码5。在wxml中使用Boolean()进行类型转换。例如，在组件中，侦听String类型的参数，如果该参数不为空，则显示文本标签，否则不会显示:

//player . wxml & lt；text & gt{ { leftText } } & lt/text & gt；复制代码//index.wxml

//player . wxml & lt；text & gt{ { leftText } } & lt/text & gt；复制代码是正确的，符合我们的预期。

是不是很神奇？

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

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

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

{ if(this . properties . src & amp；& ampthis . 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.INNERAUDIOCONTEXT获取时长的时机问题，如果我想在音频播放前获取时长，应该不会意识到。网上关于调用OnPlay和onPlay的说法不太靠谱。其中一个解决方案是这样的:

inneraudiocontext . oncan play(()= & gt；{ setTimeout(()= & gt；{ this . setdata({ duration str:secondToTimeStr(inneraudiocontext . duration)| | ' --:--'，})；}, 500);});复制代码，且不说setTimeout设置多少毫秒合适，在真机上是无效的。

因此，使用onTimeUpdate仍然是诚实的:

inneraudiocontext . ontimeupdate(()= & gt；{ this . setdata({ duration str:secondToTimeStr(inneraudiocontext . duration)| | ' --:--' })})；如果复制代码觉得每次onTimeUpdate都要计算很费钱，可以自己只计算一次。

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

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

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

微信app下载微信是一款手机通讯软件，支持通过手机网络发送语音消息、视频、图片、文字。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

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