摘要：小程序采坑记上手小程序两个月，多多少少遇到一些坑，在此简单地作下总结。但一些人可能会遇过这种情况已知小程序组件默认高度，如果子元素高度过高，不会自适应高度。但实际上真是这样吗其实小程序的组件表现挺奇怪的。擅长微信小程序开发，系统管理后台。
小程序采坑记
上手小程序两个月，多多少少遇到一些坑，在此简单地作下总结。希望能对那些跟我一样有遇到过同样问题的人提供一点帮助，避免掉进这些坑，少走一些弯路。因为自己比较菜，也讲不了多少有用的东西，欢迎大神指教~~1. swiper组件高度的自适应问题
用过小程序swiper组件的everybody 应该都知道，在swiper组件里只可放置swiper-item组件，否则会导致未定义的行为。但一些人可能会遇过这种情况：已知小程序 swiper 组件默认高度150px，如果子元素高度过高，swiper不会自适应高度。
这种情况挺坑的。。要动态的改变swiper的高度，还得靠wx.createSelectorQuery()（在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替）创建一个SelectorQuery 对象实例，通过选择器获取组件的高度去动态地改变swiper的高度，麻烦。
2. scroll-view组件内嵌原生组件scroll-view组件不得不说，挺坑的，尤其是在与原生组件配合着使用的时候，容易出现”惊喜“的效果。在scroll-view里内嵌textarea原生组件，真机调试上textarea直接不跟着滑动；在scroll-view里内嵌input组件，安卓手机的测试正常，iPhone上却出现了input框里输入数字重叠的情况......流泪ing...
有个解决的方法是，用view组件替代scroll-view组件，在view组件里设置属性scroll-y或scroll-x，可模拟scroll-view的滑动功能，但需要给view组件设置{overflow: auto;}的样式才行。
3. 公共属性hidden失效的问题有些人可能一直使用hidden都没出什么问题，觉得hidden是一直生效的，但实际上hidden属性也有失效的时候。
举个栗子，用最简单的代码阐述这个现象：
啦啦啦
啦啦啦
你会发现，前一个被成功隐藏了，但是后一个不会被隐藏。
一句话：在style属性里设置display属性会直接让hidden属性失效。
4. switch组件先引用下官方文档的说明：
可发现，这里仅有一个color样式可设置，若要改变switch组件的尺寸，还得这样写：
.wx-switch-input{
width: 82rpx!important;
height: 40rpx!important;
}
.wx-switch-input::before{
width: 80rpx!important;
height: 36rpx!important;
}
.wx-switch-input::after{
width: 38rpx!important;
height: 36rpx!important;
}
这种处理方式，虽然起作用了，但实际上可以看出，尺寸的设置依旧有很大的限制（可以自己试试），并不推荐这种做法。比较好的方法是引入第三方的组件库，例如直接用Vant Weapp里的switch组件。
5. 原生组件input无法被cover-view和cover-image之外的组件覆盖？对于这个问题，可能很多人都会回答说：是的。但实际上真是这样吗？
其实小程序的input组件表现挺奇怪的。首先，官方文档说他仅在focus时表现为原生组件。
这句话直到现在，我也觉得挺有问题的。来看看这个栗子吧，看看input组件的神奇表现：
效果如下：
这是input框未输入文字（不管有没有聚焦）时的表现。如果此时输入文字，就会变成酱紫：
神奇不神奇？好吧，就算你说不神奇，我也要继续。这里特地给input组件添加了背景色，可看出，当输入了文字时，图片却并没有能覆盖input组件，图片上绑定的click方法是触发不了的。但input组件的背景色此时竟无法覆盖图片的样式。
此刻你可能会问：就这样？还有没有别的？
嗯嗯.......问得好！当然还有另外的现象。
细心的你可能注意到了，上面的代码中，image组件的层级设为了1。这个如果设置得大一点，有没有影响呢？
你可能会说：input那可是原生组件啊，image的层级再大，一样的，没区别。
真是这样吗？现在直接把image的z-index的值设为2，为了避免挡住视线，决定把image组件移至右边，故设置了样式{right: 20rpx}。结果如下：
......好了，意外又出现了，你可以去买彩票了......
设置image组件层级为1时，若input框未输入文字（不管有没有聚焦），此时是会覆盖image组件的样式的，但是image层级为2时已经覆盖不了了。但是在输入了文字时的表现上，和尝试着点击image组件上的click方法时的表现上，还是一样的。
当image组件的层级设置为3呢？奇迹开始了。因为此时点击image组件成功地触发click方法。换句话说就是：原生组件input已经被cover-view和cover-image之外的组件覆盖了。
原文链接 欢迎来撩鸭！！！
]
【作者简介】 TRIS，芦苇科技web前端开发工程师，喜欢唱歌、看动漫、看小说。擅长微信小程序开发，系统管理后台。访问www.talkmnoney.cn了解更多。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105400.html
摘要：实际上是指的为简化开发而开源的第三方库。首先安装依赖然后再配置文件中启用就完成了使用采坑官网上线后发现，启用后不能播放视频了。把当成了失败请求，导致请求视频文件失败。 PWA（Progressive Web App）是前端的大趋势，它能极大的加快前端页面的加载速度，得到近乎原生 app 的展示效果（其实难说）。PWA 其实是多种前端技术的组合，其中最重要的一个技术就是 service ...
摘要：实际上是指的为简化开发而开源的第三方库。首先安装依赖然后再配置文件中启用就完成了使用采坑官网上线后发现，启用后不能播放视频了。把当成了失败请求，导致请求视频文件失败。 PWA（Progressive Web App）是前端的大趋势，它能极大的加快前端页面的加载速度，得到近乎原生 app 的展示效果（其实难说）。PWA 其实是多种前端技术的组合，其中最重要的一个技术就是 service ...
摘要：移除总结使用插件配置如下移除没成功报错如下配置参考优化实践删除和配置最终还是没有成功，报错如下使用插件安装依赖库配置如下生产环境移除总结该方案成功了 vue-cli 3.x 移除console总结 使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js const UglifyJsPlugin = require(uglifyjs-we...
摘要：前端日报精选从零学习技术栈新版本及简介石墨表格之应用实战一道面试题目引发的思考新为带来的性能变化中文第期前端部署采坑记个最基本的面试问题及答案上插件开发简介一开发入门掘金插件开发简介二如何添加浏览器扩展白名单掘金层叠相关知识指北掘 2017-09-09 前端日报 精选 从零学习React技术栈：React 新版本及 ES6 简介石墨表格之 Web Worker 应用实战一道面试题目引发...
摘要：上线时间问题发布审核时间，微信小时内会审核完成，但是支付宝官方公示是上线审核需要三到五个工作日，据亲测，实际支付宝审核印版不会超过小时，但是支付宝的审核相比较微信真的很严格。 前言： 最近一个月接收一个支付宝小程序项目，并进行原生开发，现将遇到的问题，爬过的坑给大家进行分享，希望读者可以少走弯路，以下介绍的内容将从大方面到细节进行展开。 废话少言，直接开始步入正题 ①：上传、发布问...
阅读 580·2021-11-15 11:38
阅读 543·2021-09-26 09:46
阅读 847·2021-09-14 17:57
阅读 1638·2021-09-07 10:24
阅读 1845·2019-08-30 15:55
阅读 1896·2019-08-30 15:43
阅读 552·2019-08-29 15:25
阅读 839·2019-08-29 12:19
