微信小程序-behaviors

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-16

48.微信小程序-behaviors2023-05-17

49.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

什么是 behaviors

• behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins”
• 每个 behavior 可以包含一组属性，数据，生命周期函数和方法，组件引用它时，它的属性，数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。

?> 大白话：用来封装多个组件中相同的冗余代码

新建两个组件，一个叫 c-test，一个为 c-demo，两个组件的内容大致就是有一个 counter 变量，每一个组件中有两个按钮，一个按钮点击对 counter 进行增加，一个对 counter 进行减少，然后我们可以将这种冗余的代码进行使用 behavior 进行封装复用，我这里就没有用案例去引出 behavior 的方式进行讲解了，我只是体现这一下 behavior 这个知识点的运用。

?> myBehaviors.js

// myBehavior.js
export const counterBehavior = Behavior({
  data: {
    counter: 0
  },
  methods: {
    increase() {
      this.setData({counter: this.data.counter + 1});
    },
    decrease() {
      this.setData({counter: this.data.counter - 1});
    }
  }
});

?> c-test

// components/c-test/c-test.js
import {counterBehavior} from "../../behaviors/myBehaviors";
Component({
  behaviors: [counterBehavior]
})

<!--components/c-test/c-test.wxml-->
<text>{{counter}}</text>
<button bindtap="increase">我是c-test按钮 increase</button>
<button bindtap="decrease">我是c-test按钮 decrease</button>

?> c-demo

// components/c-demo/c-demo.js
import {counterBehavior} from "../../behaviors/myBehaviors";

Component({
  behaviors: [counterBehavior]
})

<!--components/c-demo/c-demo.wxml-->
<text>{{counter}}</text>
<button bindtap="increase">我是c-demo按钮 increase</button>
<button bindtap="decrease">我是c-demo按钮 decrease</button>

?> index

<!--index.wxml-->
<myTest />
<view/>
<myDemo />

{
  "usingComponents": {
    "myTest": "/components/c-test/c-test",
    "myDemo": "/components/c-demo/c-demo"
  }
}

参考文章

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html

!> 最终 behavior 是将中的内容分别复制了一份放到了对应使用的组件当中