悲愤前行，记录那些我在开发uniapp(微信小程序方向)遇到的疑难杂症本文基于自己独立开发产品的角度，介绍从产品设计的角

前言

大家好，我是抹茶。
之前在一周内从入门uniapp到开发出一个初步版本，写了一篇文章一周时间，用uniapp + uniCloud 全干开发了一个小程序，因为微信限制个人开发者做社交内容，所以一些高级的功能暂时无法通过审核，我就先利用体验版，做了小范围的内测，收集了一些用户反馈。在周六的时候花了一天去实现这些优化点，过程中遇到了一些难题，予以记录，希望也能帮到其他人。

收集到的优化点

序号	功能	功能介绍
1	看法编辑	可以对已经发布的看法进行编辑
2	看法删除	可以删除看法
3	评论附加图片	评论可以添加图片(根据和小红书、抖音的竞品调研，目前支持一张)
4	复制文本	可以复制看法内容
5	搜索	可以根据主题或内容进行关键字搜索

本期迭代功能成果

爬坑史

1.uniapp 的tabBar设计目前不支持在微信小程序监听导航按钮的点击事件

问题详情

当我看到可以监听midButton，那就可以通过监听事件进行权限判断(因为创建需要先登录)，就开始编码实现，在web端效果完美。😁

等我运行在微信小程序的时候，傻眼了，中间的按钮不见了，还好控制台有报错提示。

追查一下

好家伙，只支持H5，其他的小程序都不支持，那么详细具体的tabBar配置设计，如下图，因为没有支持按钮的监听事件，就完全用不了这套方案了，谁懂啊。

下次一定一定一定(重要事情说三遍)先确认好兼容性！不能因为它的方案资料完备而具体就默认它绝对在需要的业务场景可行。

解决方案 从github的历史版本用找到自己写的BottomNav,用自己写的组件来做导航。

2.微信小程序不支持嵌套选择器和`::v-deep`

问题详情

本次需要支持评论的时候支持上传图片，所以用到uniapp的uni-file-picker组件，在缩小容器的宽度后，发现删除按钮不在右上角，故而需要修改uni-file-picker组件的样式

1.尝试用v-deep穿透覆盖样式

我先是采用了::v-deep，H5就正常了，修改的大概如下


::v-deep .uni-file-picker {
    overflow: visible;
}

::v-deep .file-picker__box-content {
    overflow: visible;
}

::v-deep .icon-del-box {
    top: -40%;
    right: -40%;
}

但是微信小程序还是冥顽不灵，没有作用，问了GPT

2.尝试用css传统的子代选择器

那我就用其他方案

.img-picker > .uni-file-picker{
       overflow: visible !important;
}


.img-picker  > .uni-file-picker  > .uni-file-picker__container > .file-picker__box {
        width: 100% !important;
        padding-top: 100%;
}


.img-picker  > .uni-file-picker > .uni-file-picker__container  >.file-picker__box > .file-picker__box-content {
        overflow: visible;
}