我要评论自定义组件的使用
若该页面存在大量重复内容可以使用自定义组件，可以理解为封装函数，避免重复性减少工作量。
创建自定义组件
可以观察到自定义组件的josn配置文件中的component项是true，而普通的page.josn文件中的配置里面的component都是空的
{
"component": true,
"usingComponents": {}
}
普通page文件.josn
{
"usingComponents": {}
}
components和page的连接部位在page的josn文件中
**{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}**
在josn文件中配置过后，调用components中的Tabs就会显示出在Tabs文件中封装好的内容
自定义组件小案例
正常写法是把标签的内容写死
WXML
<view class="tabs">
<view class="tabs_title">
<view class="title_item active">首页</view>
<view class="title_item">原创</view>
<view class="title_item">分类</view>
<view class="title_item">关于</view>
</view>
<view class="tabs_content">内容</view>
</view>
WXSS
.tabs{
}
.tabs_title{
display: flex;
padding: 10rpx;
}
.title_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color: red;
border-bottom: 10rpx solid currentColor;
}
自定义组件把内容放在JS文件的data 中
JS
data: {
Tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
}
]
},
WXML
<view class="tabs">
<view class="tabs_title">
<!-- <view class="title_item active">首页</view>
<view class="title_item">原创</view>
<view class="title_item">分类</view>
<view class="title_item">关于</view> -->
<view
wx:for="{{Tabs}}"
wx:key="id"
class="title_item {{item.isActive ? 'active' : ' ' }}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view>
</view>
1.普通页面的JS回调函数放在data的同层中即可，但是在组件中的JS文件写法稍有不同，我们必须把回调函数放在methods里面！
methods: {
handleItemTap(e)
{
console.log(e)
const index=e.currentTarget.dataset.index;
let tabs=this.data.tabs;
tabs.forEach((v,i)=>i===index? v.isActive=true : v.isActive=false);
this.setData({
tabs:tabs
})
}
}
2.在这样一个循环的view中加入一个参数 data-index={{index}}，就是循环时候的索引值，随着循环的发生而改变。
<view >
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive ? 'active' : ' ' }}"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view>
</view>
循环中添加点击事件的原理
因为是一个循环view在其中绑定事件，我们可以在控制台打印一下这个event的情况，我们可以在 e.currentTatget.dataset.index里面找到此时选中的循环索引
微信开发中的遍历数组 array.forEach(element => { });
而这里的索引值其实和data的tabs中的id有关联，当两者相同是就触发active激活WXSS样式。这里用到了微信中的写给数组的循环方法
array.forEach=((v,i)=> 加入条件语句)
这里的v就是array数组中遍历的单位，而这个例子中则是使用三目运算符 如果两者相同时 就把 isActive 设置成 true 否则设置为 false，在用setData方法事实更新数组里的控制激活的bool值。
自定义组件父组件向子组件传递数据
子组件中有专门接受传递数据的接口
父类传递
<Tabs aaa="abc"></Tabs>
子类接受接口，需要定义上传数据的名称，类型，value，如果value为空默认上传的值
properties: {
aaa:{
type:String,
value:""
}
},
可见在微信开发中 父类组件向子类传递数据的接口规定的开发者传递数据的方式。
如果觉得aaa这样的数据太简单，那么传递一个醒目一点的。
首先把数据放到页面的js文件中去
JS文件
// pages/demo12/demo12.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"论坛",
isActive:false
},
{
id:2,
name:"应用",
isActive:false
},
{
id:3,
name:"我的",
isActive:false
}
]
},
组件中接受传递数据接口
properties: {
tabs:{
type:Array,
value:[]
}
},
WXML上传参数
<Tabs tabs="{{tabs}}"></Tabs>
由此实现了父类组件向子类组件传递数据的方法，如果小程序存在一些重复的组件我们就可以在page.js中准备好数组，在子类组件中根据类型写好需要传递的数据接口完成传递，使得开发减少了重复工作，大大提高了灵活性。
子类组件向父类组件中传递数据
问题引入：在选中后，data里面的数据没有更新，比如选中了我的，但是首页的isActive还是true
解决方法子类触发父类组件的自定义事件，同时传递参数给父类组件 this.triggerEvent(“父组件中自定义事件名称”,要传递的参数)
修改子类JS，以前子类是用来修改tabs但是父类触发的事件也会修改到tabs，这时就会造成 数据不能动态改变。现在子类的工作就是触发父类事件，传递index参数也就是当前选中的项
methods: {
handleItemTap(e)
{
const index=e.currentTarget.dataset.index;
this.triggerEvent("itemChange",{index})
}
}
})
给父类绑定自定义事件（要和子类组件触发的名称一致属性名字是：bind+子类中定义的父类触发事件）
子类JS完成触发父类自定义事件和传递当前选择的index，现在父类来完成对于tabs的数据修改
JS
handleItemChange(e){
console.log(e)
const index=e.detail.index;
let tabs=this.data.tabs;
tabs.forEach((v,i)=>i===index? v.isActive=true : v.isActive=false);
this.setData({
tabs:tabs
})
},
通过以上步骤我们实现了 tabs数组数据的动态变化
自定义组件slot标签
可以理解为一个占位符，和上面的tabs一样，多个page可以使用，内容数据放在page用专门接口上传，再调用到slot时就会显示
子类WXML
<view class="tabs_content">
<slot></slot>
</view>
父组件的WXML
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<view>父组件传递来的</view>
</Tabs>
由上每个页面的内容一样，使用控制语句改变每个页面的内容
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<view>
<block wx:if="{{tabs[0].isActive}}">选中首页，显示首页内容</block>
<block wx:if="{{tabs[1].isActive}}">选中论坛，显示论坛内容</block>
<block wx:if="{{tabs[2].isActive}}">选中应用，显示应用内容</block>
<block wx:if="{{tabs[3].isActive}}">选中我的，显示我的内容</block>
</view>
</Tabs>
应用生命周期
1.onLaunch（）
小程序启动就会触发
onShow（）
当应用被用户看到的时候，比如切换页面的时候，对应用进行页面效果重置
onHide()
页面被隐藏的时候触发，暂停或清除定时器避免浪费内存
onError()
在应用发生代码错误的时候触发，收集用户的错误信息
onPageNotFound（）
当小程序启动找不到入口页面就会触发，也就是小程序启动后进入一个不存在小程序中的page页面就会触发
页面生命周期
data
onLoad
发送异步请求初始化页面
onShow
页面显示触发
onReady
页面渲染完毕触发
onHide
页面隐藏触发，如果小程序hide也意味着页面隐藏，页面跳转页是页面隐藏
onUnload
页面卸载的时候触发，navigator的opentype中的关闭当前页面就会触发页面卸载
onPullDownRefresh
监听用户的页面下拉，页面下拉刷新页面
onReachBottom
监听用户页面上拉触底， 往往就是处理上拉触底触发加载下一页数据
onShareAppMessage
用户右上角转发时触发，监听转发操作
onPageScroll
监听页面滚动，页面滚动就可以触发
onResize
页面尺寸发生变化的时候触发，当小程序在手机中发生横屏竖屏的时候页面触发大小改变
在全局josn中配置后小程序可以支持自动旋转
onTabltemTap
监听用户使用tabbar页面时触发，点击当前页面也是tabbar页面，点击自己的tab导航栏就会触发
本文地址：https://blog.csdn.net/qq_45031555/article/details/107424139
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论