MPX 开发(微信、支付宝、百度)小程序遇到的问题

兼容性问题

具名插槽，在微信中无法显示问题

image.png

不管是单个还是多个只要使用了具名插槽微信都无法显示，支付宝就没问题

在组件中开启

import { createComponent } from '@mpxjs/core'
createComponent({
  options: {
    multipleSlots: true
  },
)}

switch问题

1、在支付宝中修改checked无效果问题，因为支付宝中默认是非受控

image.png

添加controlled属性

2、switch的change 事件问题，取值方式不同，百度使用e.detail.checked

change(e: any) {
  let checked = e.detail.value
  if (__mpx_mode__ === 'swan') {
     checked = e.detail.checked
  }
}

样式隔离问题

支付宝是页面级样式隔离，微信和百度实则使用组件样式隔离

页面级隔离
缺点：同一个页面中引用多个组件，如果组件样式命名相同就会导致不可预测的bug
优点：样式复用，提高开发效率

组件级隔离解决了页面级隔离的缺点但样式复用率也降低了，不过微信提供了为组件开启全局样式共享的方法

mpx.createComponent({
  options: {
    // styleIsolation: "apply-shared",
    addGlobalClass: true,
  }
)}

具体参数参考微信组件样式隔离文档

addGlobalClass开启后百度也可以样式共享，styleIsolation百度则没有共享样式效果，所以推荐使用 addGlobalClass