微信小程序-自定义组件

自定义组件可以把重复使用的页面模块（比如弹窗、导航栏、卡片）封装成独立组件，实现代码复用、维护方便、结构清晰。1. 自定义组件的构成一个完整的自定义组件，通常由以下四个文件组成，这与一个普通的页面文件结构非常相似：.json：用于声明这是一个自定义组件。.wxml：编写组件的结构和布局。.wxss：编写组件专属的样式。.js：编写组件的逻辑、数据、生命周期等。要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true可将这一组文件设为自定义组件），同时，还要在wxml文件中编写组件模板，在wxss文件中加入组件样式。2. 创建组件Component({ behaviors: [], properties: { myProperty: { // 属性名 type: String, value: '' }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, methods: { onMyButtonTap: function(){ this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod: function(){ // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange: function(newVal, oldVal) { } } })Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。2.1 Properties (属性)作用：接收父组件（页面）传入的数据，是组件的对外接口。特点：是单向数据流，组件内部不应该直接修改properties。定义：可以简写（如rating: Number），也可以完整定义（如设置value默认值或observer监听器）。2.2 Data (数据)作用：组件的内部私有状态。/