微信小程序（note3：自定义组件&组件生命周期&组件通信&behaviors&observes&纯数据字段&地理定位&设备）_小程序不使用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 ，包含一个组件实例生命流程的最主要时间点。

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

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 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