当前位置:   article > 正文

微信小程序(note3:自定义组件&组件生命周期&组件通信&behaviors&observes&纯数据字段&地理定位&设备)_小程序不使用behaviors

小程序不使用behaviors

其实官方文档写的很详细,但是为了紧急情况下,我可以快速查看使用方法,感觉还是自己总结一下比较好。下面是我结合其他文章、ppt总结的。


自定义组件


微信小城需开发文档 [指南]-[自定义组件]:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

简介

可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。


自定义组件使用流程

(1)创建目录及相关文件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。

在根目录下创建components 并且写入相关组件内容。
在这里插入图片描述

(2)组件json文件配置

配置组件的json文件 ----进行自定义组件声明:

{
  "component": true
}
  • 1
  • 2
  • 3
(3)编写组件内容与样式

编写组件的wxml,<view>我是组件</view>,样式自己随便写一下。


(4)自定义组件引用使用

在某个页面的 json文件 usingComponents中导入上面自定义组件:
在这里插入图片描述
其实我们可以把这个使用自定义组件的页面叫做父组件。

(5)在父组件中进行使用

直接使用我们自己定义的组件名:<demo-com></demo-com>


组件生命周期


在这里插入图片描述

组件生命周期使用

旧方式:生命周期方法可以直接定义在 Component 构造器的第一级参数中。

新方式:自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)。

最重要的生命周期是 created attached detached包含一个组件实例生命流程的最主要时间点。

created  组件实例化,但节点树还未导入,因此这时不能用setData
attached  节点树完成,可以用setData渲染节点,但无法操作节点
ready 组件布局完成,这时可以获取节点信息,也可以操作节点
moved  组件实例被移动到树的另一个位置
detached  组件实例从节点树中移除

在这里插入图片描述

特殊:组件所在页面的生命周期

还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义。其中可用的生命周期包括:
在这里插入图片描述


组件通信


正向传值 父传子

1、子组件在.js中通过properties接收,可以指定接收数据类型。
在这里插入图片描述

2、在父组件中的子组件标签添加属性,给子组件传递数据。
在这里插入图片描述

逆向传值 子传父

1、在子组件中,通过事件触发一个函数。
在这里插入图片描述

2、在子组件该函数中发布自定义事件 ,并且携带传递的数据。
在这里插入图片描述
也可以传递多个参数,放在一个对象里。

3、父组件调用子组件时,bind绑定这个自定义事件。
在这里插入图片描述

4、在父组件中函数中接收,下图中的el就是从子组件接收过来的参数。
在这里插入图片描述
如果是对象的话,在拿值时,可以如下:

// 逆向传值,事件监听
getFromSon(e){
    console.log("从子组件得到的值:",e.detail);
},
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述

this.selectComponent 获取子组件实例对象

如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。

>>phone.wxml

//组件的创建、声明、引入不再赘述
//然后定义一个class,给this.selectComponent匹配选择器 selector 用

<son class="son" />
<button bindtap="getChildComponent">this.selectComponent方法获取子组件的实例</button>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
>>phone.js

Page({
	getChildComponent(){
	    const son=this.selectComponent('.son');
	    console.log(son)
	},
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述

behaviors


微信小城需开发文档 [指南]-[自定义组件]-[behaviors]:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

简介

behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的“mixins”(vue中mixins react中的hoc高阶组件 小程序的behaviors)。

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

每个组件可以引用多个 behavior ; behavior 也可以引用其他 behavior。

亲测:.wxml页面用不不了behaviors。

behaviors使用流程

1、创建文件与文件夹
在这里插入图片描述

2、behaviors创建
在这里插入图片描述

3、在组件js中引用、调用 behaviors
在这里插入图片描述

4、组件模版中就可以直接使用了
在这里插入图片描述

数据监听器 observes


微信小城需开发文档 [指南]-[自定义组件]-[数据监听器]:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html

从小程序基础库版本 2.6.1 开始支持。

observers数据监听器可以用于监听和响应任何属性和数据字段的变化

若无效,试着提升开发者工具基础库(提高一下使用版本)。
在这里插入图片描述

纯数据字段


微信小城需开发文档 [指南]-[自定义组件]-[纯数据字段]:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/pure-data.html

纯数据字段:不参与页面渲染的数据字段。

纯数据字段是对小程序性能优化的方式之一

有些情况下,某些 data 中的字段(包括 setData 设置的字段)既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。

此时,可以指定这样的数据字段为“纯数据字段”,它们将仅仅被记录在 this.data 中,而不参与任何界面渲染过程(所以页面终不能使用),这样有助于提升页面更新性能。

纯数据字段的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段。
在这里插入图片描述

地理定位 API


微信小程序开发文档 [API]-[位置]-[wx.getLocation]:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

其他地方,我们用地图的情况应该会有,然后我们可以使用 百度地图 高德地图 webgl 等。


设备


拨打电话

微信小程序开发文档 [API]-[设备]-[wx.makePhoneCall]:https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html

扫描二维码

微信小程序开发文档 [API]-[设备]-[wx.scanCode]:https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html

调整屏幕亮度

比如,扫码的时候屏幕亮,关闭扫码屏幕变暗。

微信小程序开发文档 [API]-[设备]-[屏幕]-[wx.setScreenBrightness]:https://developers.weixin.qq.com/miniprogram/dev/api/device/screen/wx.setScreenBrightness.html

振动

微信小程序开发文档 [API]-[设备]-[振动]-[wx.vibrateShort]:https://developers.weixin.qq.com/miniprogram/dev/api/device/vibrate/wx.vibrateShort.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/88209
推荐阅读
相关标签
  

闽ICP备14008679号