微信小程序开发—入门到跑路(四)

{
  // 在页面的.json 文件 usingComponents 字段导入组件
  "usingComponents":{
    "myTest":"../../components/test01/test01"
  }
}

<!--在页面中使用导入的组件-->
<myTest></myTest>

{
  "pages":[...],
    "windows":{...},
  "tabBar":{...},
    // 在app.json文件的usingComponents 字段导入组件
    "usingComponents":{
        "myTest02":"./components/test02/test02"
    },
    "style":"v2",
    "sitemapLocation":"sitemap.json"
}

<!--在页面中使用导入的组件-->
<myTest02></myTest02>

// 组件的 .js 文件中新增如下配置
Component({
    options:{ 
        styleIsolation:'isolated'
    }
})
// 或在组件的.json文件中新增如下配置
{
    "styleIsolation":"isolated"
}

// 组件的JS文件中
Component({
    // 组件的初始数据
    data:{
        name:'张三'
    }
})

// 组件的JS文件中
Component({
    // 组件的方法列表
    methods:{
        btnFn(){
            this.setData({
                name:'李四'
            })
        }
    }
})

// 组件的JS文件中
Component({
    // 组件的属性列表
    properties:{
        // 完整定义属性的方式，当需要指定属性默认值时，建议使用此方法
        myId:{
            type:Number, //  数据类型
            value:10  // 默认值
        }，
        // 简化定义属性的方法，不需要指定属性默认值时，可以使用简化方式
        myAge:Number
    }
})

// 组件的JS文件中
Component({
    // 组件的属性列表
    properties:{
        myAge:Number
    },
    methods:{
        // 更新properties属性的值
        changeAge(){
            this.setData({
                myAge:this.properties.myAge+1
            })
        }
    }
})

// 组件的JS中
Component({
    // 数据监听器
    observers:{
        '字段X':function(字段X新值){  // 监听单个
            // 逻辑功能处理
        },
        '字段A,字段B':function(字段A新值，字段B新值){ // 监听多个
            // 逻辑功能处理
        },
        '对象.属性':function(属性新值){  // 监听对象某个属性变化
            // 逻辑功能处理
        },
        '对象.**':function(属性新值){  // 监听对象所有属性变化
            // 逻辑功能处理
        },
        '**': function() {  //每次 setData 都触发
           // 逻辑功能处理
        },
    }
})

<!--组件wxml中-->
<view>
  {{num1}}  + {{ num2 }} = {{ sum }}
</view>
<button type="warn" bindtap="addNum1">Num + 1</button>
<button type="warn" bindtap="addNum2">Num + 2</button>

// 组件的JS中
Component({
    // 组件初始数据
    data:{
        num1:0,
        num2:0,
        sum:0
    },
    // 组件方法列表
    methods:{
        addNum1(){
            this.setData({
                num1:this.data.num1+1
            })
        },
        addNum2(){
            this.setData({
                num2:this.data.num2+1
            })
        }
    }
})

// 组件的JS中
Component({
  ...,
    // 数据侦听器
    observers:{
      'num1,num2':function(newNum1,newNum2){
        this.setData({
                sum:newNum1+newNum2
            })
    }
  }
})

// 组件JS中
Component({
    // 组件的初始数据
    data:{
        obj:{
            name:'tome'
        }
    },
    // 数据侦听器
    observers:{
        // 监听obj里面的name字段变化
        'obj.name':function(newName){
            console.log(newName)
        }
    },
    // 方法列表
    methods:{
        changeObj(){
            this.setData({
                'obj.name':'jerry'  // 修改obj里面的name字段
            })
        }
    }
})

// 组件JS中
Component({
    // 组件初始数据
    data:{    
        rgb:{  // rgb 的颜色值对象
            r:0,
            g:0,
            b:0
        },
        fullColor:'0,0,0'  // 根据rgb对象的三个属性，动态计算fullColor的值
    }
})

// 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>

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

// 组件JS中
Component({
    data:{...},
    methods:{
      changeR(){  // 修改 rgb 对象上 r 属性的值
        this.setData({
                'rgb.r':this.data.rgb.r +5 > 255 ? 255 : this.data.rgb.r+5
            })
    },
        changeG(){  // 修改 rgb 对象上 g 属性的值
        this.setData({
                'rgb.g':this.data.rgb.g +5 > 255 ? 255 : this.data.rgb.g+5
            })
    },
        changeB(){  // 修改 rgb 对象上 b 属性的值
        this.setData({
                'rgb.b':this.data.rgb.b +5 > 255 ? 255 : this.data.rgb.b+5
            })
    }
  }
})

// 组件JS中
Component({
    data:{...},
    methods:{...},
    observers:{
      // 监听 rgb 对象上 r,g,b 三个子属性的变化
      'rgb.r,rgb.g,rgb.b':function(r,g,b){
        this.setData({
                // 为data中的fullColor 重新赋值
                fullColor:`${r},${g},${b}`
            })
      }
    }
})

// 组件JS中
Component({
    data:{...},
    methods:{...},
    observers:{
        // 监听 rgb 里面所有属性的变化
        'rgb.**':function(obj){
            this.setData({
                // 为data中的fullColor 重新赋值
                fullColor:`${obj.r},${obj.g},${obj.b}`
            })
        }
    }
})

// 组件的JS中
Component({
  options:{
    // 指定所有_开头的数据字段为纯数据字段
    pureDataPattern:/^_/
  },
  data:{
    a:true,   // 普通数据字段
    _b:true  // 纯数据字段
  }
})

// 组件JS中
Component({
  options:{
    // 指定所有_开头的数据字段为纯数据字段
    pureDatePattern:/^_/
  },
  data:{
    // 将rgb改造为以_开头的纯数据字段
    _rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:'0,0,0'
  },
  methods:{
    changeR(){  // 修改 _rgb 对象上 r 属性的值
      this.setData({
          '_rgb.r':this.data._rgb.r +5 > 255 ? 255 : this.data._rgb.r+5
      })
  },
    changeG(){  // 修改 _rgb 对象上 g 属性的值
      this.setData({
          '_rgb.g':this.data._rgb.g +5 > 255 ? 255 : this.data._rgb.g+5
      })
  },
    changeB(){  // 修改 _rgb 对象上 b 属性的值
      this.setData({
          '_rgb.b':this.data._rgb.b +5 > 255 ? 255 : this.data._rgb.b+5
      })
  }
  },
  observers:{
    // 监听 rgb 对象上 r,g,b 三个子属性的变化
    '_rgb.**':function(obj){
        this.setData({
            // 为data中的fullColor 重新赋值
            fullColor:`${obj.r},${obj.g},${obj.b}`
        })
    }
  }
})

// 组件JS里面
Component({
    // 在lifetimes 字段中声明钩子函数
    lifetimes:{
        attached(){
            console.log('在组件实例进入页面节点树')
        },
        detached(){
            console.log('在组件实例被从页面节点树移除')
        }
    },
    // 老写法
     attached(){
         console.log('~~~~在组件实例进入页面节点树')
     },
    detached(){
        console.log('~~~~在组件实例被从页面节点树移除')
    }
})

// 组件JS里面
Component({
  // 在组件内部的pageLifetimes 节点中，监听组件在页面的生命周期函数
  pageLifetimes:{
    show(){},  // 在页面被展示的时候，调用该方法
    hide(){},  // 页面被隐藏
    resize(){} // 页面尺寸变化
  }
})

<!--组件的wxml-->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
    <!--对于不确定的内容，可以使用<slot> 进行占位，具体的内容由组件的使用者决定-->
    <slot></slot>
</view>

<!--组件使用者的wxml-->
<component-tag-name>
    <!--这部分内容将被放置在组件<slot>的位置上-->
    <view>这里是插入到组件 slot 中的内容</view>
</component-tag-name>

// 组件JS中
Component({
    options:{
        multipleSlots:true // 在组件定义时的选项中启用多slot支持
    },
    properties:{...},
    methods:{...}
})

<!--组件的wxml-->
<view class="wrapper">
    <!-- name为before的slot插槽 -->
    <slot name="before"></slot>
  <view>这里是组件的内部节点</view>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- name为after的slot插槽 -->
    <slot name="after"></slot>
</view>

<!--组件使用者的wxml-->
<component-tag-name>
    <!--渲染到name为before的slot标签位置-->
    <view slot="before">我是内容AAA</view>
    <!-- 默认插槽内容-->
    <view>这里是插入到组件 slot 中的内容</view>
    <!--渲染到name为after的slot标签位置-->
    <view slot="after">我是内容CCC</view>
</component-tag-name>

// 父的JS
data:{
    count:1  // 父组件中的数据
}

<!--父的wxml-->
<view>
  <myTest02 count="{{count}}"></myTest02>
    <view>父组件传递的数据为：{{count}}</view>
</view>

// 子组件的JS
Component({
    // 组件的属性列表
    properties:{
        count:{
            type:Number,
            value:0
        }
    }
})

<!--子组件的wxml-->
<view>{{count}}</view>

// 父组件JS
Page({
  // 定义回调函数
  changeCount(e){
    console.log('触发')
  }
})

<!--父的wxml-->
<!--使用bind:自定义事件名(推荐：结构清晰)-->
<myTest02 count="{{ count }}" bind:event="changeCount"></myTest02>
<!--或在bind 后面直接写上自定义名称-->
<myTest02 count="{{ count }}" bindevent="changeCount"></myTest02>

<!--子的wxml-->
<view>
  <button bindtap="setData">传值给父组件</button>
</view>

// 子的JS
Component({
    // 组件初始数据
    data:{
        age:10
    },
    // 组件方法列表
    methods:{
        setDate(){
              this.triggerEvent('event',{age:this.data.age})
        }
    }
})

// 父组件JS
Page({
  // 定义回调函数
  changeCount(e){
    // 获取子组件传递过来的数据
    console.log(e.detail.age)
  }
})

<!--父的wxml-->
<view>
    <!--使用bind:自定义事件名(推荐：结构清晰)-->
    <myTest02 count="{{ count }}" id="box" class="box" bind:event="changeCount"></myTest02>
    <button bindtap="getSonObj">获取子组件实例</button>
</view>

// 父的JS
Page({
    getSonObj(){
        // 切记： 选择器的参数不能传递标签选择器，不然返回的是null
        // const child = this.selectComponent('.box') 
        const child = this.selectComponent('#box') 
        console.log(child)
    }
})

// 调用 Behavior() 方法，创建实例对象
// 并使用module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
    // 属性节点
    properties:{},
    // 私有数据节点
    data:{ username:'德玛西亚' },
    // 事件处理函数和自定义方法节点
    methods:{},
    // 其他节点...
})

// 1. 使用require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behaviors/my-behavior')
Component({
    // 2. 将导入的behavior实例对象，挂载到behaviors 数组节点中，即可生效
    behaviors:[myBehavior],
    // 组件其他节点
})