自定义组件 behavior机制

自定义组件

consumer-action
consumer-action.wxml

<view class="action-bar-item">
    <button>联系对方</button>
    <button wx:if="{
     
     {service.type===serviceTypeEnum.PROVIDE}}">立即预约</button>
</view>

里插入代码片

**consumer-acion.js**

```javascript
import serviceType from "../../../../enum/service-type";

Component({
    properties: {
        service:Object
    },
    data: {
        serviceTypeEnum:serviceType
    },
    methods: {}
});

使用自定义组件
service-detail.js

{
    
    
  "navigationBarTitleText": "服务详情",
  "usingComponents": {
    
    
    "i-consumer-action": "components/consumer-action/consumer-action",
    "i-publiser-action": "components/publisher-action/publisher-action"
  }
}

编写behavior代码

// my-behavior.js
module.exports = Behavior({
    
    
  behaviors: [],
  properties: {
    
    
    myBehaviorProperty: {
    
    
      type: String
    }
  },
  data: {
    
    
    myBehaviorData: {
    
    }
  },
  attached: function(){
    
    },
  methods: {
    
    
    myBehaviorMethod: function(){
    
    }
  }
})

使用behavior

// my-component.js
var myBehavior = require('my-behavior')
Component({
    
    
  behaviors: [myBehavior],
  properties: {
    
    
    myProperty: {
    
    
      type: String
    }
  },
  data: {
    
    
    myData: 'my-component-data'
  },
  created: function () {
    
    
    console.log('[my-component] created')
  },
  attached: function () {
    
     
    console.log('[my-component] attached')
  },
  ready: function () {
    
    
    console.log('[my-component] ready')
  },
  methods: {
    
    
    myMethod: function () {
    
    
      console.log('[my-component] log by myMethod')
    },
  }
})

微信官方参考文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html

猜你喜欢

转载自blog.csdn.net/xiaoduzi1991/article/details/120674379