微信小程序开发时遇到的坑有哪些 - 行业资讯 - 肥雀云

　　介绍

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

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

1。样式优先级混乱

在使用按钮组件时,发现在类中设置宽度不生效,下面贴上代码:

.my-button { 　　,宽度:140 rpx; 　　,高度:60 rpx; 　　,行高:60 rpx; 　　,填充:0; 　　}

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

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

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

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

加上!重要之后,其实宽度的实际效果已经符合我们的预期了,但是微信调试工具却仍然显示用户代理样式优先,这应该算是调试工具的一个错误吧。

2。普通UI组件封装,参数定义繁琐

一般UI视觉稿中的基础组件,例如按钮,是有特定样式的:比方说背景色/字体。利用小程序的组件函数封装成组件,编写默认样式并接收外部传入的类,可以方便后续开发。

反应有& lt;标记{…道具}祝辞& lt;/tag>这种写法,即组件接收道具不做处理,只透传给下一个组件,但小程序不支持这种写法(苦搜无果,官方文档也没有说明)。

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

属性:,{ 　　,,类:{ 　　,,,类型:字符串, 　　,,,的值:& # 39;& # 39; 　　,,}, 　　,,类型:{ 　　,,,类型:字符串, 　　,,,的值:& # 39;默认# 39; 　　,,}, 　　普通的才能:{ 　　,,,类型:布尔, 　　,,,的值:false, 　　,,}, 　　,,大小:{ 　　,,,类型:字符串, 　　,,,的值:& # 39;默认# 39; 　　,,}, 　　,…… 　　},

3。全局样式选择器*被禁用

* { 　　,box-sizing: border-box; 　　}

上面的代码在编译的时候就会报错,因为小程序禁用了这类选择器。大胆猜测具体原因:这类作用范围比较广的选择器和自定义组件的样式隔离产生了冲突? ?

那怎么去给小程序添加全局通用样式?看来只能自己把用到的标签都手动写一遍了,还好网上有现成的代码可以贴:

视图中,滚动视图,偷窃者,swiper-item,活动区,movable-view,封面视图,封面图片,图标,文字、富文本,进步,按钮,复选框组,复选框,形式输入,标签,选择器、picker-view,单选组合,收音机,滑块,开关,文本区域,导航,functional-page-navigator,图像,视频,摄像头,live-player, live-pusher,地图,画布,公开数据,网页视图,广告{ 　　,box-sizing: border-box; 　　}

4。自定义组件,绑定:水龙头调用两次

封装基础组件时,例如按钮、下面的写法应当避免:

onTap (e), { 　　,if (! this.data.disabled ,,, ! this.data.loading), { 　　this.triggerEvent才能(& # 39;利用# 39;,,e.detail) 　　,} 　　},

 & lt; button  bindtap=皁nTap"祝辞& lt;/button>

这样封装出来的组件,会触发两次利用事件,一次是小程序自身触发的,一次是通过triggerEvent触发。

可以换一个非小程序内置的事件类型,比如点击:

onTap (e), { 　　,if (! this.data.disabled ,,, ! this.data.loading), { 　　this.triggerEvent才能(& # 39;点击# 39;,,e.detail) 　　,} 　　},

阻止丝锥事件冒泡也可以解决:

& lt; button catchtap=皁nTap"祝辞& lt;/button>

5。在wxml中用Boolean()做类型转换

例如在一个组件中,监听一个字符串类型的参数,如果不为空则显示文本标签,否则不显示:

//, player.wxml 　　& lt; text 类=皌ext1",天气:如果=皗{,布尔(leftText)}}“在{{,leftText }} & lt;/text>