All Products
Search
Document Center

mixins

Last Updated: Feb 04, 2021

Developers may implement multiple custom components. The Mini Program provides mixins to help process the common logic of these components.

The following shows an example.

  1. // /minxins/lifecylce.js
  2. export default {
  3. onInit(){},
  4. deriveDataFromProps(nextProps){},
  5. didMount(){},
  6. didUpdate(prevProps,prevData){},
  7. didUnmount(){},
  8. };
Note: onInit and deriveDataFromProps apply to basic library 1.14.0 and later versions. You can use my.canIUse('component2') for compatibility.
  1. // /pages/index/index.js
  2. import lifecylce from './minxins/lifecylce';
  3. const initialState = {
  4. data: {
  5. isLogin: false,
  6. },
  7. };
  8. const defaultProps = {
  9. props: {
  10. age: 30,
  11. },
  12. };
  13. const methods = {
  14. methods: {
  15. onTapHandler() {},
  16. },
  17. }
  18. Component({
  19. mixins: [
  20. lifecylce,
  21. initialState,
  22. defaultProps,
  23. methods
  24. ],
  25. data: {
  26. name: 'alipay',
  27. },
  28. });