兼容性問題

具名插槽，在微信中無法顯示問題

image.png

不管是單個(gè)還是多個(gè)只要使用了具名插槽微信都無法顯示，支付寶就沒問題

在組件中開啟

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

switch問題

1、在支付寶中修改checked無效果問題，因?yàn)橹Ц秾氈心J(rèn)是非受控

image.png

添加controlled屬性

<switch controlled="{{true}}" checked="{{checked}}" bindchange="bindchange" color="#007FFF" />

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

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

樣式隔離問題

支付寶是頁面級(jí)樣式隔離，微信和百度實(shí)則使用組件樣式隔離

頁面級(jí)隔離
缺點(diǎn)：同一個(gè)頁面中引用多個(gè)組件，如果組件樣式命名相同就會(huì)導(dǎo)致不可預(yù)測(cè)的bug
優(yōu)點(diǎn)：樣式復(fù)用，提高開發(fā)效率

組件級(jí)隔離解決了頁面級(jí)隔離的缺點(diǎn)但樣式復(fù)用率也降低了，不過微信提供了為組件開啟全局樣式共享的方法

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

具體參數(shù)參考微信組件樣式隔離文檔

addGlobalClass開啟后百度也可以樣式共享，styleIsolation百度則沒有共享樣式效果，所以推薦使用 addGlobalClass