微信怎么编辑文件(微信电子文档编辑方法)

#标题创作挑战#

4.1 自定义组件4.1.1 组件的创建与引用1. 创建组件在项目的根目录中，鼠标右键，创建 components -> test 文件夹在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

注意:为了确保目录结构的清晰，建议将不同的组件存储在单独的目录中。

如下:组件测试1，组件测试2

2. 引用组件

组件的引用方式分为“局部引用”和“全局引用”。顾名思义:

局部引用：组件只能在当前被引用的页面内使用全局引用：组件可以在每个小程序页面中使用3. 局部引用组件

中引用组件的方法。页面的json配置文件是“本地引用”。

例子如下:

//在中。页面的json文件，介绍组件{ & # 34；使用组件& # 34；:{ "我的测试1 & # 34；: "/components/test1/test1 & # 34；} }//在页面的。wxml文件，使用组件& lt/my-test1 & gt；4.全局引用组件是指app.json全局配置文件中的组件，称为“全局引用”

例子如下:

//在app.json文件中，引入组件{ & # 34；页数& # 34；:[/*...*/], "window & # 34:{/*...*/}, "使用组件& # 34；:{ "我的测试2 & # 34；:"/components/test2/test2 & # 34；} }//在页面的。wxml文件，使用组件& lt/my-test 2 & gt；5.全局参考与局部参考根据元件的使用频率和范围，选择适当的参考方法:

如果某组件在多个页面中经常被用到，建议进行“全局引用”如果某组件只在特定的页面中被用到，建议进行“局部引用”6. 组件和页面的区别

从表面上看，组件和页面由四个文件组成:。js，。json，。wxml和。wxss。但是，之间有明显的差异。js和。组件和页面的json文件:

组件的 .json 文件中需要声明 "component": true 属性组件的 .js 文件中调用的是 Component() 函数组件的事件处理函数需要定义到 methods 节点中4.1.2 样式1. 组件样式隔离

默认情况下，自定义组件的样式只对当前组件有效，不会影响组件外的UI结构，如图所示:

组件 A 的样式不会影响组件 C 的样式组件 A 的样式不会影响小程序页面的样式小程序页面的样式不会影响组件 A 和 C 的样式

好处:

防止外界的样式影响组件内部的样式防止组件的样式破坏外界的样式2. 组件样式隔离的注意点app.wxss 中的全局样式对组件无效只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议:在组件和被引用组件的页面中，建议使用类选择器，而不是id、属性和标签选择器！

3. 修改组件的样式选项

默认情况下，自定义组件的样式隔离功能可以防止组件内部和外部样式的干扰。

但是，有时，您希望能够在外部世界中控制组件内部的样式。此时，您可以通过样式隔离修改组件的styleIsolation选项。

用法如下:

//添加以下配置组件({ options:{ style isolation:& # 39；)中。组件的js文件。孤立& # 39；} })//或者在。组件的json文件{ & # 34；样式隔离& # 34；: "孤立& # 34；} 4.Styleisolation可选值可选值

系统默认值

形容

脱离

是

指示启用了样式隔离，并且使用类指定的样式不会在自定义组件内外相互影响。

应用-共享

不

指示页面wxss样式将影响自定义组件，但自定义组件wxss中指定的样式不会影响页面。

共享的

不

指示页面wxss样式将影响自定义组件，并且自定义组件wxss中指定的样式也将影响页面和其他具有应用共享或共享集的自定义组件。

4.1.3数据、方法和属性1。数据在widget组件中，用于组件模板渲染的私有数据需要在数据节点中定义。

//components/test/test1 . js component({/* *组件的初始数据*/data: {count: 0}}) 2。在方法组件中，需要在方法节点中定义事件处理函数和自定义方法。

//components/test/test1 . js component({/* * components */methods的方法列表:{addCount(){ //事件处理程序This . setdata({ count:This . data . count+1 })This。_showCount() //直接通过this调用自定义方法，_showCount(){ //自定义方法建议从_ wx . show toast({ title:& # 39；Count的值是:& # 39；+ this.data.coutn，icon:& # 39；无& # 39；}}}}}) 3.在properties组件中，properties是组件的外部属性，用于接收外界传递给组件的数据。

例子如下:

//components/test/test1 . js component({/* *组件属性列表*/ properties: {// 1。完全定义属性的方式【需要指定属性值时推荐使用此方法】max:{ type:Number，//属性值的数据类型value:10 //属性默认值}，// 2。简化定义属性的方式【不需要指定属性默认值时可以使用简化的方法】Max: number}}) 4 .在数据和属性的组件中，属性属性和数据数据的使用方式是一样的，都是可读可写的，本质上没有区别。

不同的是:

data 更倾向于存储组件的私有数据properties 更倾向于存储外界传递到组件中的数据5. 使用 setData 修改 properties 的值

属性的值也可以用于页面呈现，或者可以使用setData重新分配属性中的属性。

例子如下:

//components/test/test1 . js component({/* *组件的属性列表*/ properties: {max: Number}，/* * *组件的方法列表*/ methods: {addCount(){ //使用setData修改this.setdata的值({ max:this . properties . max+1 })})//使用组件的wxml文件中的属性值< view & gtmax属性的值是:{ { max } } </view & gt；数据监听器1。数据监听器数据监听器用于监视和响应属性和数据字段的任何变化，从而执行特定的操作。其功能类似于vue中的手表监听器。

中组件数据监听器的基本语法格式如下:

组件({观察者:{ & # 39；一、菲尔德B& 39号；:function(字段A的新值，字段B的新值){//dosomething}}) 2。数据侦听器的基本用法组件的UI结构如下:

& lt！-组件的UI结构-->:& lt；视图& gt{ { n1 } }+{ { N2 } } = { { sum } } & lt；/view & gt；& lt按钮大小= & # 34；迷你& # 34；bindtap = & # 34addN1 & # 34& gtN1自我增值</button & gt；& lt按钮大小= & # 34；迷你& # 34；bindtap = & # 34addN2 & # 34& gtN2自增

组件({ //数据节点data: {n1: 0，N2: 0，sum: 0}，方法:{ Add n1(){ this . setdata({ n1:this . Data . n1+1 })}，Add N2(){ this . setdata({ N2:this . Data . N2+2 })}，}，//数据监控节点观察者:{ //监控n1和N2的数据变化& # 39；n1，n2 & # 39:function (n1，N2){ this . setdata({ sum:n1+N2//通过监听器，自动计算sum的值}}})测试结果如下:

3. 监听对象属性的变化

数据监听器支持监视对象中一个或多个属性的变化。

例子如下:

Component({ observers:{ '对象.属性A, 对象.属性B':function(属性A的新值,属性B的新值){ // 触发此监听器的3种情况： // 【位属性A赋值】使用 setData 设置 this.data.对象.属性A 时触发 // 【位属性B赋值】使用 setData 设置 this.data.对象.属性B 时触发 // 【直接为对象赋值】使用 setData 设置 this.data.对象 时触发 // do something.... } } })4. 案例

// components/test/test1.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { // rgb 的颜色值对象 rgb:{ r: 0, g: 0, b: 0 }, // 根据 rgb 对象的三个属性，动态计算 fullColor 的值 fullColor: '0,0,0' }, /** * 组件的方法列表 */ methods: { // 修改 rgb 对象上 r 属性的值 changeR(){ this.setData({ 'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5 }) }, // 修改 rgb 对象上 g 属性的值 changeG(){ this.setData({ 'rgb.g':this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5 }) }, // 修改 rgb 对象上 b 属性的值 changeB(){ this.setData({ 'rgb.b':this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5 }) } }, /* */ observers:{ // 监听 rgb 对象上 r,g,b 三个子属性的变化 'rgb.r,rgb.g,rgb.b':function(r,g,b){ this.setData({ // 为 data 中的 fullColor 重新赋值 fullColor: `${r},${g},${b}` }) } // 如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化 /* 'rgb.**':function(obj){ this.setData({ // 为 data 中的 fullColor 重新赋值 fullColor: `${obj.r},${obj.g},${obj.b}` }) } */ } })

/* components/test/test1.wxss */ .colorBox{ line-height: 200rpx; font-size: 24rpx; color: white; text-shadow: 0rpx 0rpx 2rpx black; text-align: center; }

<!--components/test/test1.wxml--> <view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值：{{fullColor}}</view> <button size="mini" bindtap="changeR" type="default">R</button> <button size="mini" bindtap="changeG" type="primary">G</button> <button size="mini" bindtap="changeB" type="warn">B</button>

组件({观察者:{ & # 39；对象。属性A，对象。属性B& # 39；:函数(属性A的新值，属性b的新值){//触发此监听器的三种情况://[bit属性A赋值]设置this.data. object时触发。设置this.data. object时，带有setData//[位属性B赋值]的属性A触发。设置this.data对象时触发了带有setData//[直接为对象赋值]的属性B...}}) 4.case//components/test/test1 . js component({/* *组件属性列表*/ properties: {}，/* * *组件初始数据*/ data: {// rgb颜色值对象rgb:{ r: 0，g: 0，b: 0 }，//根据rgb对象的三个属性，动态计算fullColor fullColor的值:& # 39；0,0,0'}，/* * *组件的方法列表*/方法:{//修改值更改器(){ this . setdata({ & # 39；rgb.r & # 39:this . data . RGB . r+5 & gt；255 ?25: this.data.rgb.r+5})}，//修改rgb对象changeG(){ this . setdata({ & # 39；rgb.g & # 39:this . data . RGB . g+5 & gt；255 ?25: this.data.rgb.g+5})}，//修改rgb对象changeB(){ this . setdata({ & # 39；rgb.b & # 39:this . data . RGB . b+5 & gt；255 ?25: this.data.rgb.b+5}}}，/* */观察者:{//监听rgb对象上R，G，B三个子属性的变化& # 39；rgb.r，rgb.g，rgb.b & # 39:function (r，g，b){ this . setdata({//Re-assign full color to full color in data:` $ { r }，$ {g}，$ { b } ` })}//如果一个对象中需要监控的属性太多，为了方便起见，可以使用通配符* *来监控对象中所有属性的变化。rgb。**':function(obj){ this . setdata({//Re-assign full color to full color in data:` $ { obj . r }，$ {obj.g}，$ { obj . b } `} } */})/* components/test/test1 . wxss . font-size:24r px；颜色:白色；文字-阴影:0rpx 0rpx 2rpx黑色；文本对齐:居中；} & lt！-components/test/test1 . wxml-& gt；& lt视图样式= & # 34；背景色:RGB({ { full color } })；"class = & # 34彩盒& # 34；& gtcolor:{ { full color } } </view & gt；& lt按钮大小= & # 34；迷你& # 34；bindtap = & # 34改变者& # 34；type = & # 34默认& # 34；& gtR & lt/button & gt；& lt按钮大小= & # 34；迷你& # 34；bindtap = & # 34changeG & # 34type = & # 34初级& # 34；& gtG & lt/button & gt；& lt按钮大小= & # 34；迷你& # 34；bindtap = & # 34changeB & # 34type = & # 34warn & # 34& gtB& lt；/button & gt；

4.1.5 纯数据字段1. 纯数据字段

纯数据字段是指那些不用于界面渲染的数据字段。

应用场景:比如在某些情况下，一些数据中的字段既不显示在界面上，也不传递给其他组件，只在当前组件内部使用。具有此功能的数据字段适合设置为纯数据字段。

好处:纯数据字段有助于提高页面更新的性能。

2. 使用规则

在组件构建器的options节点中，指定pureDataPattern为正则表达式，字段名与该正则表达式匹配的字段将成为纯数据字段。

例子如下:

Component({ options:{ //指定所有以_开头的数据字段都是纯数据字段PurDataPattern:/_/}，data: {a: true，//公共数据字段_b: true //纯数据字段} })3 .使用纯数据字段转换数据监听器//components/test/test1 . js component({ options:{//将所有以_开头的数据字段指定为纯数据字段PurDataPattern:/_/}，/* * *组件的初始数据*/ data: {//将rgb转换为以_ _rgb开头的纯数据字段:{ r: 0，g: 0，b: 0 }，//根据rgb对象fullColor的三个属性动态计算fullColor的值:& # 39；0,0,0'}，})4.1.5组件的生命周期1。所有组件的生命周期功能小程序组件的可用生命周期如下表所示:

生命周期函数

参数

描述

创造

在刚刚创建组件实例时执行。

附上

当组件实例进入页面节点树时执行。

准备好的

当组件在视图层中布局时执行。

移动

当组件实例移动到节点树中的另一个位置时执行。

分离的

从页面节点树中删除组件实例时执行。

错误

对象错误

每当组件方法抛出错误时执行。

2.组件的主要生命周期功能在applet组件中，有三个最重要的生命周期功能，即创建、附加和分离。

它们各自的特点如下:

组件实例刚被创建好的时候，created 生命周期函数会被触发此时还不能调用 setData通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发此时， this.data 已被初始化完毕这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）在组件离开页面节点树后， detached 生命周期函数会被触发退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数此时适合做一些清理性质的工作3. lifetimes 节点

在applet组件中，生命周期函数可以直接在组件构造函数的一级参数中定义，可以在lifetimes字段中声明(这是推荐的方式，优先级最高)。

例子如下:

组件({ //推荐使用生存期:{ attached(){ }，// Execute detached () {}当组件实例进入页面节点树//当组件实例从页面节点树中移除时执行}，//老式定义attached(){ }，Detached () {}) 4.1.6组件所在页面的生命周期1 .组件所在页面的生命周期有时候，一个自定义组件的行为取决于页面状态的变化，那么就需要用到组件所在页面的生命周期。

例如，每当页面的显示生命周期功能被触发时，我们希望重新生成一个随机的RGB颜色值。

在自定义组件中，组件所在页面有三个生命周期功能，即:

生命周期函数

参数

形容

显示

没有

当组件所在的页面显示时执行。

隐藏

没有

当组件页面隐藏时执行。

调整大小

对象大小

当组件的页面大小改变时执行。

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

例子如下:

component({ page lifetings:{ show:function(){ }，//页面显示hide: function(){}，//页面隐藏resize: function(){} //页面大小更改} })3 .生成一个随机的RGB颜色值组件({ methods:{ //生成随机RGB颜色的方法，非事件处理程序建议_randomColor(){ //以_开头并重新赋值this . setdata({ _ RGB:{ R:Math . floor(Math . random()* 256)，g:Math . floor(Math . random()* 256)B:Math。地板(数学。Random () * 256)}}}，page life Times:{//显示组件所在的页面时，立即调用_randomColor生成随机颜色值show: function () {this。_ random color()} } })4 . 1 . 7 Slot 1 Slot & gt；节点(slot)用于承载组件用户提供的wxml结构。

2. 单个插槽

在小程序中，只有一个为了占据，这个数量限制被称为单个槽。

& lt！-组件(子组件)的打包者-->:& lt；视图& gt& lt视图& gt下面是组件的内部节点:& ltslot & gt& lt/slot & gt；& lt/view & gt；/*组件用户的js文件*/{ & # 34；组件& # 34；:真的，& # 34；使用组件& # 34；:{//将组件包装器引入组件消费者的js文件& # 34；测试2 & # 34；:"/components/test2/test2 & # 34；} } & lt！-组件的用户-->:& lt；test2 & gt& lt！-此部分将放在组件中:& lt视图& gt下面是插入到组件槽中的内容

3. 启用多个插槽

在applet的自定义组件中，您需要使用多个

示例代码如下:

component({ options:{//options wxml逐步定义启用多个插槽以支持多个插槽:true} })4 .定义多个插槽。您可以使用多个；标签，用不同的名称来区分不同的插槽。

例子如下:

& lt！-组件模板-->:& lt；view class = & # 34包装& # 34；& gt& lt！-名称是前第一个槽->:& lt；插槽名称= & # 34；之前& # 34；& gt& lt/slot & gt；& lt视图& gt这是一段固定的文字:& lt插槽名称= & # 34；& # 34；& gt& lt/slot & gt；& lt/view & gt；5.使用多个插槽当使用具有多个插槽的自定义组件时，需要使用slot属性将节点插入不同的

例子如下:

注意:这里还需要介绍子组件。

& lt！-引用组件的页面模板-->:& lt；test2 & gt& lt！-此部分将放在组件中:& lt查看插槽= & # 34；之前& # 34；& gt这里它被插入到组件插槽name = & # 34之前& # 34；内容在

4.1.8 父子组件之间的通信1. 父子组件之间通信的3种方式属性绑定用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据事件绑定用于子组件向父组件传递数据，可以传递任意数据获取组件实例父组件还可以通过 this.selectComponent() 获取子组件实例对象这样就可以直接访问子组件的任意数据和方法2. 属性绑定

属性用于将值从父组件传递到子组件，它们只能传递常见类型的数据，而不能将方法传递到子组件。

父组件示例代码如下:

// js文件//父组件的数据节点数据:{ count:11 }//父组件的wxml结构< test2 count = & # 34{ { count } } & # 34& gt& lt/test2 & gt；& lt视图& gt-& lt；/view & gt；& lt视图& gt在父组件中，计数值为:{ { count } } </view & gt；注意，父组件的json文件在这里可能引用子组件。

子组件在“属性”节点中声明相应的属性，并使用

子组件的示例如下:

// js文件//子组件属性的属性节点:{ coutn:Number} //子组件的wxml结构< text & gt在子组件中，count的值是:{ { count } } </text & gt；效果如下(效果页面是父组件的页面):

子组件页面中同名的数据不会受到影响。

3. 事件绑定

事件绑定用于将值从子节点传递到父节点，可以传递任何类型的数据。

使用步骤如下:

在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据步骤1：在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

//在父组件中定义syncCount方法。//以后这个方法会传递给子组件让子组件调用sync count(){ console . log(& # 39；同步计数& # 39；)}第二步:在父组件的wxml中，将第一步定义的函数引用传递给子组件:& lttest2计数= & # 34；{ { count } } & # 34bindsync = & # 34同步计数& # 34；& gt& lt/test2 & gt；第三步:在子组件的js中，调用this . trigger event(& # 39；自定义事件名称& # 39；、{/* parameter object */})，将数据发送到父组件//components/test 2/test 2 . js component({/* * * component */properties的属性列表:{count:Number}、/* * * components */methods的方法列表:{ add count(){ this . setdata({ count:this . properties . count+1 })、this . triggerevent(& # 39；同步& # 39；，{ value:this . properties . count })} })& lt；！-components/test 2/test 2 . wxml-& gt；& lttext & gt在子组件中，count:{ { count } } </text & gt；& lt按钮类型= & # 34；初级& # 34；bindtap = & # 34addCount & # 34& gt+1 & lt；/button & gt；第四步:在父组件的js中，通过e.detail/* *组件的方法列表*/methods获取子组件传递的数据:{ sync count(e){ console . log(e . detail . value)this . setdata({ count:e . detail . value })} }，效果如下:

点击按钮后，打印表格结果如下:

4. 获取组件实例

您可以在父组件(& # 34；或者id类选择器& # 34；)来获取子组件的实例对象，以便直接访问子组件的任何数据和方法。调用时需要传入一个选择器。

4.1.9 behaviors1. behaviors 简介

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

2. behaviors 的工作方式

每个行为可以包含一组属性、数据、生命周期函数和方法。当组件引用它时，它的属性、数据和方法将被合并到组件中。

每个组件可以引用多个行为，行为也可以引用其他行为。

3. 创建 behavior

调用Behavior(Object object)方法为所有组件创建一个共享行为实例对象。

//调用Behavior()方法创建实例对象//并与module . wx ports module . wx ports = Behavior({//property节点属性:{}，//私有数据节点数据:{ username:& # 39；张三& # 39；}，//事件处理程序和自定义方法节点方法:{}，//其他节点...})4.导入和使用行为。在组件中，使用require()方法导入所需的行为，然后可以在挂载后访问行为中的数据或方法。

示例代码如下:

// 1.使用require()导入所需的自定义行为模块const my behavior = require(& # 34；/组件/begaviors/行为& # 34；)组件({ // 2。将导入的行为实例对象挂载到行为数组节点才能生效})5 .行为:[mybehavior]，//组件的其他节点}) 5。行为中的所有可用节点都是可用节点。

类型

需要吗？

形容

性能

对象映射

不

同一组件的属性

数据

目标

~

同一组件的数据

方法

目标

~

与自定义组件方法相同。

行为

字符串数组

~

介绍其他行为

创造

功能

~

生命周期函数

附上

功能

~

生命周期函数

准备好的

功能

~

生命周期函数

移动

功能

~

生命周期函数

分离的

功能

~

生命周期函数

6.同名字段的覆盖和组合规则*组件及其引用的行为可以包含同名字段。此时可以参考以下三个同名的处理规则:

同名的数据字段 (data)同名的属性 (properties) 或方法 (methods)同名的生命周期函数

详细覆盖范围和组合规则请参考微信小程序官方文档给出的说明:

https://developers . weixin . QQ . com/mini program/dev/framework/custom-component/behaviors . htm