支付寶小程序框架 自定義組件·mixins

開發(fā)者有時可能會實(shí)現(xiàn)多個自定義組件，而這些自定義組件可能會有些公共邏輯要處理，小程序提供 mixins 用于解決這種情況。

示例代碼：

// /mixins/lifecycle.js
export default {
  onInit(){
    console.log('init');
  }, 
  deriveDataFromProps(nextProps){},
  didMount(){},
  didUpdate(prevProps,prevData){},
  didUnmount(){},
};

注意: onInit 與 deriveDataFromProps 自基礎(chǔ)庫 1.14.0 開始支持，可以使用 my.canIUse('component2') 做兼容判斷，并且，使用 component2 的相關(guān)功能，需要在 IDE 中的 詳情 > 項(xiàng)目配置 中，勾選 component2。

// /components/index/index.js
import lifecycle from '/mixins/lifecycle';


const initialState = {
  data: {
    isLogin: false,
  },
};


const defaultProps = {
  props: {
    age: 30,
  },
};


const methods = {
  methods: {
    onTapHandler() {},
  },
}


Component({
  mixins: [
    lifecycle,
    initialState,
    defaultProps,
    methods
  ],
  data: {
    name: 'alipay',
  },
});
<!-- /components/index/index.axml -->
<view>{{name}}: {{age}}</view