1. 纯数据字段

options：既不展示在页面上也不传递给其它组件，只在当前组件中使用，系统不对纯数据字段进行响应，有助于提高页面更新效率

纯数据字段定义方法

在 options 中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则的将会被视为纯数据字段。

代码演示

Component({options: {// 指定所有_开头的数据字段为 纯数据字段pureDataPattern: /^_/},data: {a: true, // 普通数据字段_b: true // 纯数据字段}
})

2. 组件生命周期

2.1 组件内部生命周期及说明

生命周期函数	参数	描述说明
*created	无	在组件实例刚刚被创建时执行
*attached	无	在组件实例进入页面节点时执行
*ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
*detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

2.2 组件内主要的生命周期及用法

在小程序中主要用到的组件生命周期为created、attached、detached、ready

2.2.1 created

此时调用 setData 不会有效果，通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

2.2.2 attached

此时， this.data 已被初始化完毕，这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

2.2.3 detached

退出页面时，会触发页面内每个自定义组件的 detached 生命周期函数，此时适合做一些清理性质的工作, 例如 , 清除定时器

2.2.4 ready

可以操作页面

2.2.5 lifetimes节点

在定义小程序组件生命周期时，可以直接在 Component 的第一参数级中，也可以定义在 lifetimes 节点中，此为最高优先级，推荐。

代码演示

Component({// 推荐用法lifetimes: {attached() {},detached() {},}
})

2.3 页面内组件的生命周期

当组价需要根据所在页面的变化做出反应时，需要用到页面内组件的生命周期

2.3.1 页面内组件生命周期

生命周期函数	参数	描述
show	无	组件所在页面被展示时执行
hide	无	组件所在页面被隐藏时执行
resize	Object Size	组件所在页面尺寸变化时执行

2.3.2 pagelifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中

演示代码

Component({// 组件在页面的生命周期函数在该节点定义pageLifetimes: {show () {}, // 页面被展示hide () {}, // 页面被隐藏resize () {} // 页面尺寸变化}
})

3. 插槽

子挖坑，父占位

3.1 单个插槽

子
<view><slot></slot>       slot占位置，等待父元素填充
</view>父
<view><son>单个插槽</son>    引入son，在标签son内所写内容，就是子标签slot内显示内容
</view>

3.2 多个插槽

子
<view><slot name="A"></slot>       给slot加name属性值<slot name="B"></slot>
</view>父
<view><son><view slot="A"></view>     在标签son 内的标签中加入 slot 属性值，对应子组件内name值<view slot="B"></view></son>
</view>

4. 父子组件传值

4.1 属性绑定

父向子传值，只能传普通数据类型，不能传方法等

代码演示

父
<son count={{count}}></son>子
properties:{count:Number
}

4.2 事件绑定

子向父传值，可以传递任何类型数据

代码演示

子
<button bindtap="addCount">+1</button>addCount() {this.setData({count : this.properties + 1})this.tiggerEvent('sync', {value: this.properties.count})
}父
<son count="{{count}}" bind:sync="syncCount"></son>syncCount (e) {this.setData({// 父组件通过事件对象 e 获取到子组件传递的值count: e.detail.value})
}

4.3 获取组件实例

可在父组件里调用 this.selectComponent("id 或 class 选择器 ") ，获取子组件的实例对象，从而直

接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(".my

component") 。

<!--
父组件的wxml文件
使用 bind:自定义事件名称（推荐: 结构清晰
-->
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount">
</my-test>
<button bindtap="getChild">获取子组件实例</button>
//父组件的js文件 按钮的tap事件处理函数
getChild() {
// 切记下面的参数不能传递标签选择器，不然返回的是null
// 也可以传递ID选择器
const child = this.selectComponent('.customA')
// 调用子组件的setData方法，修改count的值，
child.setData({ count: this.data.count + 1 })
child.addCount() // 直接调用子组件的addCount方法，该方法在child实例对象的
__proto__上可以访问到该方法
}
// 这里的代码其实有点问题, 因为count的数据是属于父组件的, 并且由父组件通过自定义属性传递
给了子组件, 如果想修改这个count的值, 直接在父组件中修改即可, 子组件自动就能更新.完全没有
必要再这种场景下去修改子组件中count的值

微信小程序 day4相关推荐

微信小程序Day4学习笔记
学习目标基础强化目录 1. 自定义组件 - 创建新建组件 1. 引用组件 2. 局部引用组件在 json 中引用, 在页面 wxml 中可以用标签 - 添加使用 3. 全局引用组件全局配 ...
微信小程序——Web学习day4
文章目录课程介绍小程序为什么火起来了前后端介绍小程序注册微信小程序登录注册小程序账号下载开发工具创建小程序步骤开发工具介绍上传小程序到微信公众平台项目目录介绍课程介绍小程序 ...
微信小程序仿微信功能Day4
点击列表进入用户个人信息如图所示: 当点击了列表信息时候.跳转到用户个人信息的页面,并从js文件中获取值. 1.页面布局PersonalDetails.wxml <!-- pages/Pers ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释, ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...
微信小程序import和include
import 和include 是微信小程序提供的2中引用方式 import 一般结合模板template使用 import import可以在该文件中使用目标文件定义的template,如: 在 i ...

微信小程序 day4

1. 纯数据字段

2. 组件生命周期

2.1 组件内部生命周期及说明

2.2 组件内主要的生命周期及用法

2.2.1 created

2.2.2 attached

2.2.3 detached

2.2.4 ready

2.2.5 lifetimes节点

2.3 页面内组件的生命周期

2.3.1 页面内组件生命周期

2.3.2 pagelifetimes 节点

3. 插槽

3.1 单个插槽

3.2 多个插槽

4. 父子组件传值

4.1 属性绑定

4.2 事件绑定

4.3 获取组件实例

微信小程序 day4相关推荐

最新文章

热门文章