超实用的小程序开发实战总结

cover-view是官方制造出来，用来管制那群“无法无天”的原生组件的，这群组件包括： map 、 video 、 canvas 、 camera 、 live-player 、live-pusher 。他确实可以盖住这些组件，但是 cover-view 自身存在一些缺陷，令人很苦恼。

• 部分样式效果实现不了：只支持基本的定位、布局、文本样式。不支持设置单边的 border 、background-image 、shadow 、overflow : visible 等。
• 子节点如果溢出了父节点，溢出部分莫名其妙被干掉了。 建议子节点不要溢出父节点。
• 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示。
• 对于 fixed 属性支持不好，fixed 在页面底部的按钮，可能会随页面滚动而上下“瞬移”哦。

Scroll-view

组件中有 scroll-left 属性，该属性是可以指定向左滚动的距离，但是此距离没有单位，不由好奇，这个距离的单位是什么，于是做如下测试:屏幕宽度为750 rpx 设置每个小块的宽度的宽度为150 rpx ，分别在 iphone5 、iphone6 、iphone6plus 中设置scroll-left 为 150,页面表现如下：

• 初始状态：

• Iphone 5 下表现

• Iphone6 下表现

• Iphone6 plus 下表现

会发现5下滚动超过两个格，6下刚好两个格，6p下小于两个格，不难理解，scroll-left的单位为px，不同机型会有不同的表现是由于不同机型下单位的转换不同导致的：

• iPhone6 Plus : 1rpx = 0.552px 150px = 271.5rpx
• phone6 : 1rpx = 0.5px 150px = 300rpx
• phone5 : 1rpx = 0.42px 150px = 357rpx

因此除非自己进行单位自适应，否则 scroll-left 属性实用性不强。

下拉刷新问题：

• 场景：页面需要下拉重新加载数据，刷新页面，小程序开启下拉刷新时， Fixed 在顶部的 tabbar （横栏）下拉时，在 ios 端会出现断层，并显示背景，安卓端无此表现。
• 解决方案：由于安卓跟 ios 端的变现差异过大，因此需要避免在需要做下拉刷新的页面放置 fixed 在页面顶部的tabbar,可以通过自定义页面头部，并将该tabbar写到自定义头部中。

那么如何自定义头部呢？ 通过在app.js中设置navigationStyle属性，默认值为‘default’，自定义为‘custom’。

• 默认头部样式展示如下：

• 自定义头部样式展示如下：

可以看到自定义头部样式时，头部只保留胶囊，其他部分可以自己实现。

视频层级问题：

• 场景：页面中存在video标签，同时会存在弹框，并且页面底部有fixed在底部的按钮，这两部分不允许video覆盖。
• 解决方案：官方给出的覆盖video组件的方式是，通过cover-view，但由于cover-view对样式的支持不足及自身的问题（见上文），因此我们不使用cover-view处理。处理方式是使用图片和video交替展示的方式，初始化展示为一张图片，当点击播放时切换video组件进行展示。页面滚动，以及弹框出现的时候，将视频组件隐藏，注意是隐藏，通过hidden属性隐藏，而不是wx:if直接干掉，因为视频播放中途暂停，下次播放需要从上次结束的位置开始播放，如果使用wx:if则无疑增加了实现的难度。

本文从框架、api、组件、应用四个方面入手，说明在开发过程中遇到的问题，问题分析相对浅显，但是比较实用。希望可以对读者提供些许帮助。同时面对小程序时的心态已由最初的“纯粹的api编程”到心怀敬畏之情。看似简单的表象下，会存在这一系列棘手的情况。在此处做下总结，欢迎各位拍砖指正！

【编辑推荐】

1. 「多巴胺」来袭！谷歌推出新型强化学习框架Dopamine
2. 一个开发10年程序员论：学习Python最正确的步骤（0基础必备）
3. 交恶微软、拒绝乔布斯，21岁的他是如何开发出Linux的？
4. 程序员如何切入区块链去中心化应用开发
5. 模块化量子计算架构关键组件开发成功

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!