小程序开发遇坑总结

1.同一份打包代码，本地图片时有时无?

解决：转cdn，项目中要还没有做cdn，那就自己麻烦点，手动转下

2.IOS机，上下滑动出现的橡皮筋效果（上下滑动，出现手机系统自带的背景），如何禁掉？

解决：加一行代码即可，disableScroll属性具体用法，微信官方文档有，就不再重复

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

{
  "navigationBarTitleText": "page页",
  "disableScroll": true,
  "usingComponents": {}
}

3.公共属性hidden失效的问题

简单举个栗子：

<view hidden>呼啦啦</view>

<view style="display: block" hidden>呼啦啦</view>

你会发现，前一个被成功隐藏了，但是后一个不会被隐藏。

总结：在style属性里设置display属性会直接让hidden属性失效。

4.cover-view标签，无法识别icon,以及部分样式错乱（请见下方例子）（注意：开发者工具展示一切正常，真机上样式就挂了）

.cropper-border {
            position: relative;
            width: 100%;
            height: 100%;
            border: 1rpx dashed #999999;
            box-sizing: border-box;
            // 边框四个角加粗 cover-view单边border样式不识别~ 真是醉了
            // background: linear-gradient(to left, #1B88EE, #1B88EE) left top no-repeat, 
            //     linear-gradient(to bottom, #1B88EE, #1B88EE) left top no-repeat, 
            //     linear-gradient(to left, #1B88EE, #1B88EE) right top no-repeat,
            //     linear-gradient(to bottom, #1B88EE, #1B88EE) right top no-repeat, 
            //     linear-gradient(to left, #1B88EE, #1B88EE) left bottom no-repeat,
            //     linear-gradient(to bottom, #1B88EE, #1B88EE) left bottom no-repeat,
            //     linear-gradient(to left, #1B88EE, #1B88EE) right bottom no-repeat,
            //     linear-gradient(to left, #1B88EE, #1B88EE) right bottom no-repeat;
            // background-size: 6rpx 48rpx, 48rpx 6rpx, 6rpx 48rpx, 48rpx 6rpx; 
            // 以下这种边角的样式也不支持
            .border{
                position: absolute;
                padding: 16rpx;
                border-style: solid;
                border-color: #1B88EE;
                &.border-top-left {
                    border-width: 6rpx 0 0 6rpx;
                    top: 0;
                    left: 0;
                }
                &.border-top-right {
                    border-width: 6rpx 6rpx 0 0;
                    top: 0;
                    right: 0;
                }
                &.border-bottom-left {
                    border-width: 0 0 6rpx 6rpx;
                    bottom: 0;
                    left: 0;
                }
                &.border-bottom-right {
                    border-width: 0 6rpx 6rpx 0;
                    bottom: 0;
                    right: 0;
                }
            }
        }

解决1：目前解决方案是，用view标签代替cover-view标签

解决2：也可以选择用图片来代替icon以及边框的样式

5.自定义组件上，全局有设置的icon丢失？

官方说明：组件样式隔离

解决：

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

持续更新中。。。