微信小程序开发填坑整理

微信小程序开发填坑整理

  • open-data显示头像,希望加圆角,直接使用border-radius不生效,需要再加overflow:hidden,猜测为open-data下还有子节点,而图片在子节点上,必须在父节点上加overflow:hidden来隐藏超出部分
  • picker上设置flex一类的样式无法直接应用到子节点上,需要在picker内部再套一层带样式的view,原因同上。例如
    1
    2
    3
    4
    5
    6
    <picker>
    <view class="flex ai-center">
    <view class="child1"></view>
    <view class="child2"></view>
    </view>
    </picker>
  • 部分原生组件上无法使用svg图片地址,例如map组件的markers使用svg图片在模拟器上能显示在真机上显示不出来。其它的一些组件也有可能会有。
  • 想要在小程序上实现表格组件,第一时间想到的可能是flex布局,但是flex布局无法保证tdth在不设置具体宽度的情况下保持相同宽度。其次可能会想到用grid布局,但是小程序对grid布局的兼容性无法保证。最后能想到的就是用table布局了。
    但随着业务开发,发现简单的数据渲染已经无法满足了,可能还需要支持类似web上自定义render的功能,但小程序不支持scoped-slot,思来想去只能用slot加索引的方式实现。最后还有个默认空数据的提示,由于不支持colspan属性,只能用hack方式实现。具体table组件代码可参考如下(mpx组件)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    <template>
    <view class="table relative">
    <view class="tr">
    <view wx:for="{{computedColumns}}" wx:key="index" class="th"
    wx:style="{{{textAlign:item.align,width:item.width}}}">
    {{item.title}}
    </view>
    </view>
    <view wx:if="{{!data.length}}" class="tr placeholder">
    <view wx:for="{{computedColumns}}" wx:key="index" class="td"> </view>
    <view class="placeholder-text">{{placeholder}}</view>
    </view>
    <view wx:for="{{data}}" wx:for-index="rowIndex" wx:for-item="row" wx:key="rowIndex" class="tr">
    <view wx:for="{{computedColumns}}" wx:key="index" class="td"
    wx:style="{{{textAlign:item.align,width:item.width}}}">
    <slot wx:if="{{item.slot}}" name="col_{{rowIndex}}" />
    <block wx:else>{{ data[rowIndex][item.key]}}</block>
    </view>
    </view>
    </view>
    </template>

    <script>
    import { createComponent } from '@mpxjs/core'

    export default createComponent({
    options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true
    },
    properties: {
    /**
    * [{
    * title:'',
    * key:'',
    * width:?rpx,
    * align: 'left/center/right'
    * }]
    */
    columns: {
    type: Array,
    value: []
    },
    data: {
    type: Array,
    value: []
    },
    placeholder: {
    type: String,
    value: '暂无数据'
    }
    },
    computed: {
    computedColumns() {
    return this.columns.map(col => {
    return {
    ...col,
    width: typeof col.width === 'number' ? `${col.width}rpx` : col.width
    }
    })
    }
    }
    })
    </script>

    <script type="application/json" lang="json">
    {
    "component": true
    }
    </script>

    <style lang="stylus">
    @import '[email protected]/assets/styles/variables.styl'
    .table {
    display table
    width 100%
    border-collapse: collapse;
    .tr {
    width: 100%;
    display table-row
    }
    .th,
    .td {
    display table-cell
    padding 20rpx 8rpx
    width auto
    vertical-align middle
    font-size 24rpx
    color $darkTextColor
    }
    .th {
    color $greyTextColor
    }
    .td {
    border-top 1px solid $dividerColor
    }
    .placeholder {
    .td {
    height: 72rpx;
    }
    }
    .placeholder-text {
    position absolute
    left 50%
    top 92rpx
    font-size 24rpx
    color $placeholderColor
    transform translateX(-50%)
    }
    }
    </style>

评论