微信小程序（note3：自定义组件&组件生命周期&组件通信&behaviors&observes&纯数据字段&地理定位&设备）

冷不防 2022-12-03 01:32 139阅读 0赞

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

# 自定义组件 #

--------------------

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

### 简介 ###

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

### 自定义组件使用流程 ###

##### （1）创建目录及相关文件 #####

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

在根目录下创建`components` 并且写入相关组件内容。  
![在这里插入图片描述][20200901102345238.png_pic_cener]

##### （2）组件json文件配置 #####

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

{ 
      "component": true
    }

##### （3）编写组件内容与样式 #####

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

##### （4）自定义组件引用使用 #####

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

##### （5）在父组件中进行使用 #####

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

# 组件生命周期 #

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener]

### 组件生命周期使用 ###

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 1]

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

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

# 组件通信 #

--------------------

### 正向传值 父传子 ###

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

2、在父组件中的子组件标签添加属性，给子组件传递数据。  
![在这里插入图片描述][20200901102611533.png_pic_ceter]

### 逆向传值 子传父 ###

1、在子组件中，通过`事件`触发一个函数。  
![在这里插入图片描述][20200901102627772.png_pic_cnter]

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

3、父组件调用子组件时，`bind`绑定这个自定义事件。  
![在这里插入图片描述][20200901102647194.png_pic_cnter]

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

// 逆向传值，事件监听
    getFromSon(e){ 
        console.log("从子组件得到的值：",e.detail);
    },

![在这里插入图片描述][20200901143107798.png_pic_cener]

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

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

>>phone.wxml
    
    //组件的创建、声明、引入不再赘述
    //然后定义一个class，给this.selectComponent匹配选择器 selector 用
    
    <son class="son" />
    <button bindtap="getChildComponent">this.selectComponent方法获取子组件的实例</button>

>>phone.js
    
    Page({ 
    	getChildComponent(){ 
    	    const son=this.selectComponent('.son');
    	    console.log(son)
    	},
    })

![在这里插入图片描述][20200901144909809.png_pic_cnter]

# behaviors #

--------------------

微信小城需开发文档 \[指南\]-\[自定义组件\]-\[behaviors\]：[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html][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、创建文件与文件夹  
![在这里插入图片描述][20200901102722601.png_pic_cener]

2、behaviors创建  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]

3、在组件js中引用、调用 behaviors  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente 1]

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

# 数据监听器 observes #

--------------------

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

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

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

若无效，试着提升开发者工具基础库（提高一下使用版本）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_centr]

# 纯数据字段 #

--------------------

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

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

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

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

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

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

# 地理定位 API #

--------------------

微信小程序开发文档 \[API\]-\[位置\]-\[wx.getLocation\]：[https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html][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][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][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][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][https_developers.weixin.qq.com_miniprogram_dev_api_device_vibrate_wx.vibrateShort.html]

[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[20200901102345238.png_pic_cener]: /images/20221123/0f19eadf804b4f4cb3f954ffe2cded96.png
[20200901102430272.png_pic_centr]: /images/20221123/6be62c80fb494f6d997a6afc14bbb41f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener]: /images/20221123/b36d7c14304f4ddf8a080295934cfe32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 1]: /images/20221123/794e9eb6270c48c3a6916c6a9c63f337.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6f296140a8434ec4ac1b954823881b3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente]: /images/20221123/082001a8b08a4588a5da674f017ae8eb.png
[20200901102611533.png_pic_ceter]: /images/20221123/e49d83d55e0e4799a29049aa81f0e4dc.png
[20200901102627772.png_pic_cnter]: /images/20221123/9a2b9df08ecb45359cf67b235a4e68d9.png
[20200901102633370.png_pic_cener]: /images/20221123/3c827abcc8db495dbc64622f2c39be6a.png
[20200901102647194.png_pic_cnter]: /images/20221123/9a0e8d54b91d42acaf28513af962095f.png
[2020090110265186.png_pic_cnter]: /images/20221123/b4ed43d38090417fa4901e63b4051d79.png
[20200901143107798.png_pic_cener]: /images/20221123/1ec0c9d886414dada2112001bb3ffbfa.png
[20200901144909809.png_pic_cnter]: /images/20221123/b8f4c80e3a634a7f9bb8cc16fa2962b1.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_behaviors.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
[20200901102722601.png_pic_cener]: /images/20221123/cb7157b8c72c48a68189ecf7e10f3d7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221123/96abf996f91e477c94d0b65d9a5d65c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente 1]: /images/20221123/6e298f2d62dc40ae8aec8fb465d44a66.png
[20200901102756890.png_pic_cener]: /images/20221123/97e39616e41e47cc87a04d00ab224dbc.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_observer.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_centr]: /images/20221123/3584c37f39f44361b222dcbeb3ad33b4.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_pure-data.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/pure-data.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener 2]: /images/20221123/75dcfdf5a0e6489fada4788463fe4870.png
[https_developers.weixin.qq.com_miniprogram_dev_api_location_wx.getLocation.html]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
[https_developers.weixin.qq.com_miniprogram_dev_api_device_phone_wx.makePhoneCall.html]: https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html
[https_developers.weixin.qq.com_miniprogram_dev_api_device_scan_wx.scanCode.html]: https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html
[https_developers.weixin.qq.com_miniprogram_dev_api_device_screen_wx.setScreenBrightness.html]: https://developers.weixin.qq.com/miniprogram/dev/api/device/screen/wx.setScreenBrightness.html
[https_developers.weixin.qq.com_miniprogram_dev_api_device_vibrate_wx.vibrateShort.html]: https://developers.weixin.qq.com/miniprogram/dev/api/device/vibrate/wx.vibrateShort.html