微信小程序开发过程中有哪些常见坑点分享？

本文共计1439个文字，预计阅读时间需要6分钟。

近期与公司合作推出了第一款小程序，开发体验基本类似于基于WebView的混合式开发。可以调用官方强大的API，但也存在一些坑或不易上手的地方。本文从实用性出发，记录了开发过程。

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

1. 样式优先级混乱

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

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

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

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

加上!important之后，其实宽度的实际效果已经符合我们的预期了，但是微信调试工具却仍然显示user agent样式优先，这应该算是调试工具的一个bug吧。

2. 普通UI组件封装，参数定义繁琐

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