mpx跨端开发,兼容问题踩坑汇总

276 阅读2分钟
  1. wx:for遍历对象数组时,template里如果通过方法调用,传过来的item,和script里定义的不一样

  2. 计算属性,不支持传参数,这种通常出现在遍历一个列表,然后将item作为计算属性的参数传进去,这种情况下要不在计算属性中先定义一个列表的副本进行处理后再展示,要么就是在template里做判断

  3. 同样的字号,行高,居中等在Android和iOS上表现出的大小不同,通常需要判断平台来做对应的处理

  4. template里不可以用?. 通常需要使用计算属性先处理好再往template里用

  5. 如果想以对象形式在template里控制class和style的展示与否,需要使用wx:style="{{ { class1: condition === dstCondition } }}",如果用style="{{ { class1: condition === dstCondition } }}"会直接报错,style只能写成:{{ condition === dstCondition ? 'class1' : '' }}

  6. 不要使用bindclick,要使用bindtap,否则在小程序中点击是没效果的

  7. 如果父组件要调用子组件的方法,或访问子组件的属性,最好使用wx:ref,否则会出问题,具体表现为:页面上有一个ref的话this.xxx.$refs这样去引用没问题,但如果写了多个ref,就会有问题

  8. 如果没有在data里定义一个变量,之后在mounted 或者其他方法中直接通过this.xxx = xxx这样赋值的话,在h5浏览器端体现不出任何问题,但在小程序中这个变量在视图中使用的话,会出现奇怪的问题,所以小程序里要严格遵循使用规范定义变量

  9. 当外部容器的height是动态计算出来的时候,里面内容较长时,即使设置了overflow auto,也不能滑动——该问题出现在iOS,例如下面这种calc的形式就是动态计算

    height calc(100% - 92px)
    overflow auto
    
  10. 在浏览器里,可以通过设置scrollTop scrollLeft等这些属性让元素滚动到某个位置,但在小程序里没有这种功能,想要让某元素“滚动”到某个位置的间接方式是通过transform translate来实现

  11. 对于text标签,在小程序里,如果源码里面有回车,在页面中也会解析出来,例如对于如下写法:

    <text>top</text>
    <text>
        {{test}}
    </text>
    

    两个text之间会有回车将其隔开 正确做法需要将源码中的空格都去掉:

    <text>top</text>
    <text>{{test}}</text>
    
  12. 小程序中,取消冒泡要通过catchtap,组件的取消冒泡根据微信文档里来: developers.weixin.qq.com/miniprogram…

  13. 小程序中tap回调的参数过多时(尤其是将item传入,或者多层的wx:for里的item传入的时候),会造成性能问题,可以通过传index,然后再通过wx:for的列表定位,从而通过list[index]找到item使用