微信小程序--》小程序—组件通信和behavior使用

简介: ⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。

🏍️组件通信

🍇父子组件的通信方式

属性绑定:用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据。

属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。

图片.png

图片.png

图片.png

事件绑定:用于子组件向父组件传递数据,可以传递任意数据。

事件绑定用于实现子向父传值,可以传递任何类型的数据,其使用步骤如下:

父组件的.js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

//和data平齐syscCount(){
},

父组件的.wxml中,通过自定义事件的形式,将步骤一定义的函数引用传递给子组件

<mydemo4count="{{count}}"bind:sysc="syscCount"></mydemo4>

子组件的.js中,通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件

methods: {
addCount(){
this.setData({
count:this.properties.count+1    })
// 触发自定义事件,将数值同步给父组件this.triggerEvent('sysc',{value:this.properties.count})
  }
}

父组件的.js中,通过e.detail获取到子组件传递过来的数据

//和data平齐syscCount(e){
console.log('sysCount!!!');
// console.log(e.detail.value);this.setData({
count:e.detail.value  })
},

图片.png

获取组件实例:父组件可以通过 this.selectComponent() 获取子组件实例对象,这样可以直接访问子组件的任意数据和方法。

可在父组件里调用 this.selectComponent( id 或 class选择器),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器。

//.wxml
<mydemo4count="{{count}}"bind:sysc="syscCount"class="child"id="childId"></mydemo4><view>-------</view><view>父组件中,count的值是:{{count}}</view><buttonbindtap="getChild">获取子组件的实例对象</button>//.js
getChild(){ //按钮的 tap 处理函数
  // 切记下面参数不能传递标签选择器,只能的id或者class,否则会返回 null
  const child = this.selectComponent('.child')
  // console.log(child);
  // child.setData({
  //   count:child.properties.count + 1
  // })
  child.addCount()
}

🏍️behaviors

behaviors是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。

🍇behaviors工作方式

每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,每个组件可以引用多个behaviors,behavior也可以引用其它behavior。

🍈创建 behavior

调用 Behavior (Object object) 方法,即可创建一个共享的 behavior 实例对象,供所有组件使用:

图片.png

//调用 Behavior() 方法,创建实例对象并使用 module.exports 把 behavior 实例对象共享出去module.exports=Behavior({
// 属性节点properties:{},
// 私有数据节点data:{
username:'zs'  },
// 事件处理函数和自定义方法methods:{},
// 其他节点。。。})

🍉导入并使用 behavior

在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据和方法。

// 使用 require() 导入需要的自定义 behavior 模块constmyBehavior=require('../../behaviors/my-behaviors')
Component({
// 将导入的 behavior 实例对象挂载到 behavior 数组节点中,即可生效behaviors:[myBehavior],
})

图片.png

🍊behavior中所有可用的节点

可用的节点 类型        可选项是否必须 描述

properties Object Map 否        同组件的属性

data             Object             否        同组件的数据

methods Object             否        同自定义组件的方法

behaviors String Array 否        引入其它的 behavior

created             Function             否        生命周期函数

attached Function 否        生命周期函数

ready             Function             否        生命周期函数

moved             Function             否        生命周期函数

detached Function 否 生命周期函数

🍋同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名字段,对这些处理的字段有如下三种同名处理规则:

同名的数据字段(data):

若同名的数据字段都是对象类型,会进行对象合并;

其余情况会进行数据覆盖,覆盖规则为: 引用者 behavior > 被引用的 behavior靠后的 behavior > 靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高);

同名的属性(properties)或方法(methods)

若组件本身有这个属性或方法,则组件的属性或方法会覆盖 behavior 中的同名属性或方法;

若组件本身无这个属性或方法,则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法;

在 2 的基础上,若存在嵌套引用 behavior 的情况,则规则为:引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。

同名的生命周期函数

对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;

对于同种生命周期函数和同字段 observers ,遵循如下规则:

behavior 优先于组件执行;

被引用的 behavior 优先于 引用者 behavior 执行;

靠前的 behavior 优先于 靠后的 behavior 执行;

如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。

相关文章
|
3月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
3月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
7月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1450 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
7月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
614 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
9月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
929 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
10月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
648 3
|
10月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
728 8
|
10月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2985 12
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
576 1
微信小程序:轻松实现时间轴组件
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
267 0
在线课堂+工具组件小程序uniapp移动端源码