VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

最近参与了公司第一个小程序的开发。开发体验基本类似于基于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字段,但设置后无效。后来发现这个字段代表的是页面下拉时窗口的背景色,而不是可视区域的背景色。

723155c83c01862635ec4748f56f78e.png

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

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

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

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 记录微信小程序的踩踏(开发篇)(微信小程序开发者社区)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!