1、小程序页面的引用
局部引用，在局部的.json 中引入
{
"usingComponents": {
"test":"/components/test/test"
}
}
全局引用，在app.jaon中引入
"usingComponents": {
"test":"/components/test/test"
},
2、组件和页面的区别
从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同： ⚫ 组件的 .json 文件中需要声明 "component": true 属性 ⚫ 组件的 .js 文件中调用的是 Component() 函数 ⚫ 组件的事件处理函数需要定义到 methods 节点
3、 组件样式隔离的注意点
⚫ app.wxss 中的全局样式对组件无效
⚫ 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响 建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！
4、修改组件的隔离效果
修改组件的样式隔离选项 默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能 够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：
isolated 是 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared 否 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared 否 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其 他设置了 apply-shared 或 shared 的自定义组
5、自定义组件 - 数据、方法和属性
小程序组件中的data和properties是一样的 可以修改
那怎么修改？
addCount(){
if(this.data.count>=this.properties.max) return
this.setData({
count:this.data.count+1,
max: this.properties.max+1
}),
this._showCount()
},
6、组件里面的数据监听器
// components/test2/test2.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
n1:0,
n2:0,
sum:0
},
/**
* 组件的方法列表
*/
methods: {
addN1(){
this.setData({
n1:this.data.n1+1
})
},
addN2(){
this.setData({
n2:this.data.n2+1
})
}
},
observers: {
'n1, n2': function(newN1,newN2){
this.setData({
sum:newN1+newN2
})
}
}
})
7、数据监听器案例
// components/test3/test3.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
rgb:{
r:0,
g:0,
b:0
},
fullColor:'0,0,0'
},
/**
* 组件的方法列表
*/
methods: {
r(){
this.setData({
'rgb.r':this.data.rgb.r>255?255:this.data.rgb.r+5
})
},
g(){
this.setData({
'rgb.g':this.data.rgb.g>255?255:this.data.rgb.g+5
})
},
b(){
this.setData({
'rgb.b':this.data.rgb.b>255?255:this.data.rgb.b+5
})
}
},
observers:{
'rgb.r,rgb.g,rgb.b':function(r,g,b){
this.setData({
fullColor:`${r},${g},${b}`
})
}
}
})
xml
<!--components/test3/test3.wxml-->
<!-- <text>components/test3/test3.wxml</text> -->
<view style=" rgb({{fullColor}}); color: #fff; line-height: 200px; text-align: center; height: 200px;">
yanseshi
</view>
<button size="mini" type="default" bindtap="r">R</button>
<button size="mini" type="primary" bindtap="g">G</button>
<button size="mini" type="warn" bindtap="b">B</button>
<view>~~~~~~</view>
<view>{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>
当对象的属性太怎么办 用**
'rgb.**':function(obj){
this.setData({
fullColor:`${obj.r},${obj.g},${obj.b}`
})
8、纯数据字段
：仅仅在业务逻辑中用到，页面显示中不会用到。提升页面更新的性能
使用规则：
component>option?pureDataPattern /^_/ 制定纯数据字段，以下划线来头的就是纯数据字段。或者自己定义别的规则
改造上面的案例：
9、生命周期函数
create：组件实例刚刚被创建好
attached：在组件实例进入页面节点树时执行
ready：在组件刚被渲染之后
moved：
datached：组件实例被从页面节点树移除时执行
error：
》create、attached、detached
create：中不能调用setData
attached：进行初始化的操作 this.setData初始化完毕
detached：清理性质的工作
》lifetimes节点
新的方式在lifetimes节点中定义生命周期
之前的方式已经不再推荐了：直接平级
新旧一起使用时，新的会覆盖旧的 不建议旧的使用方式
》什么是组件所在页面的生命周期
当页面的展示的时候随机生成一个颜色值：依赖于页面的生命周期
show 监听当前页面的展示行为
hide 监听当前页面的被隐藏的行为
resize 监听当前页面的尺寸页面变化的行为
》在组件中监听所在页面的生命周期函数
必须在pagelifetimes中定义
定义一个随机的颜色生成函数
_randomColor(){
this.setData({
_rgb:{
r:Math.floor(Math.random()*256),
g:Math.floor(Math.random()*256),
b:Math.floor(Math.random()*256),
}
})
}
当叶面展示的时候将调用随机函数的方法
pageLifetimes:{
show(){
console.log('shoe')
this._randomColor()
},
hide(){
console.log('hide')
},
resize(){
console.log('size')
}
},
10、插糟
》什么是插糟？
slot节点，用于承载组件使用者提供的wxml结构 用来占位的
》单个插槽：
默认每个自定义组件中只允许只用一个slot进行占位，这种叫做单个插槽
使用组件的时候填充内容
》启用多个插槽
在js文件中
Component({
options:{
multipleSlots:true
},
》启用了多个怎么区分呢？
定义插槽的时候用name区分
用的时候在节点中 slot等于哪个name
11、父子之间的通信
父子组件之间通信的几种方式
》属性绑定：父组件想组件传递数据 只能传递数据 不能传递方法，仅能设置JSON兼容的数据
》事件绑定：子组件向父组件传递数据：任意数据
》获取组建的实力
this.selectComponent()获取子组件的实例对象，从而访问子组件中的任意数据和方法
》属性绑定代码实例
子组件使用父组件中的数据
父组件中定义：
<test5 count="{{count}}"></test5>
子组件中接收并使用：
properties: {
count:Number
},
<view>子组件中count值是：{{count}}</view>
然后定义了一个按钮让子组件中的count+1 不会影响到父组件中的count。所以接下来
》事件绑定 （子组件向父组件传值）
1、在父组件js中定义一个函数，、即将通过自定义事件的形式让子组件进行调用
2、
bind:sync="syncCount"
义、
3、子组件中通过触发事件调用了父组件中的那个方法 通过this.triggerEvent()触发
4、在父组件中通过e.detail获取到子组件中传递过来的数据
》组件实例的方式 实现父子组件之间的通信
父组件中定义了一个获取子元素元素中的方法
html
<test5 count="{{count}}" bind:tongbuba="tongbu" id="cA"></test5>
<button bindtap="getChild">获取子组件的实例对象</button>
然后在js文件中
getChild(){
const child= this.selectComponent('#cA')
console.log(child)
// child.setData({
// count:child.data.count+1
// })
这个是上面子传父那个方法
child.addCount()
},
12、behaviors
用于实现组件间代码共享的特性，类似于Vue.js中的“mixins”
》behaviors的工作方式
每个behaviors可以包含一组属性、数据、生命周期函数和方法。组件引用behaviors时
每个组件可以引用多个behavior。nehavior也可以引用其他behavior
》创建behavior
调用一个构造器方法就行，就可以创建一个共享的behavior实例对象，共所有组件导入和使用
module.exports=Behavior({
data:{
'username':'zs'
},
method:{
}
})
》使用behaviors
const mybehavior=require('../../behaviors/behaviors')
Component({
/**
* 组件的属性列表
*/
behaviors:[ mybehavior],
}
}）
》behaviors可用的节点
》behaviors同名字段的覆盖和组合属性
数据字段重名
。同名的数据字段都是对象类型，会进行合并。
。不是对象名字重复，组件>父级behaviors>
同名的属性和方法
同名的生命周期函数
更详细的看文档
