codecamp

支付宝小程序框架 自定义组件·mixins

开发者有时可能会实现多个自定义组件,而这些自定义组件可能会有些公共逻辑要处理,小程序提供 mixins 用于解决这种情况。

示例代码:

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

注意: onInitderiveDataFromProps 自基础库 1.14.0 开始支持,可以使用 my.canIUse('component2') 做兼容判断,并且,使用 component2 的相关功能,需要在 IDE 中的 详情 > 项目配置 中,勾选 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
支付宝小程序框架 自定义组件·生命周期
支付宝小程序框架 自定义组件·ref获取组件实例
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }