mixins-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

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.

// /minxins/lifecylce.js
export default {
  onInit(){}, 
  deriveDataFromProps(nextProps){},
  didMount(){},
  didUpdate(prevProps,prevData){},
  didUnmount(){},
};

Note

onInit and deriveDataFromProps apply to basic library 1.14.0 and later versions. You can use my.canIUse('component2') for compatibility.

// /pages/index/index.js
import lifecylce from './minxins/lifecylce';

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

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

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

Component({
  mixins: [
    lifecylce,
    initialState,
    defaultProps,
    methods
  ],
  data: {
    name: 'alipay',
  },
});