泉州网站制作哪个好微,做网站一般做多大的,郑州网课老师,看网站的关键词文章目录 ⾃定义组件创建⾃定义组件声明组件编辑组件注册组件 声明引⼊⾃定义组件⻚⾯中使⽤⾃定义组件定义段与⽰例⽅法组件-⾃定义组件传参过程 小程序生命周期应用生命周期页面生命周期页面生命周期 ⾃定义组件 类似vue或者react中的自定义组件 ⼩程序允许我们使⽤⾃定义组件… 文章目录 ⾃定义组件创建⾃定义组件声明组件编辑组件注册组件 声明引⼊⾃定义组件⻚⾯中使⽤⾃定义组件定义段与⽰例⽅法组件-⾃定义组件传参过程 小程序生命周期应用生命周期页面生命周期页面生命周期 ⾃定义组件 类似vue或者react中的自定义组件 ⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
创建⾃定义组件 类似于页面一个自定义组件由 json wxml wxss js 4个文件组成 可以在微信开发者⼯具中快速创建组件的⽂件结构
在⽂件夹内 components/myHeader 创建组件 名为 myHeader
声明组件
首先需要在组件的json文件中进行自定义组件声明 myHeader.json
component : true编辑组件
同时还要在组件的wxml文件中编写组件模板。在wxss文件中加入组件样式 slot表示插槽类似vue中的slot myHeader.wxml !-- 这是自定义组件的内部WXML结构 --
view classinner{{innerText}}slot/slot
/view在组件的 wxss ⽂件中编写样式 注意在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。 myHeader.wxss /* 这里的样式只应用于这个自定义组件 */
.inner {color: red;
}注册组件
在组件的 js ⽂件中需要使⽤ Component() 来注册组件并提供组件的属性定义、内部数据和⾃定义⽅法 myHeader.js Component({properties: {// 这里定义了innerText属性属性值可以在组件使用时指定innerText: {// 期望要的数据是 string类型type: String,value: default value,}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod: function(){}}
})
声明引⼊⾃定义组件
⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径 index.wxml
{// 引用声明usingComponents: {// 要使用的组件的名称 // 组件的路径my-header:/components/myHeader/myHeader}
}⻚⾯中使⽤⾃定义组件
view!-- 以下是对一个自定义组件的引用 --my-header inner-textSome textview用来替代slot的/view/my-header
/view定义段与⽰例⽅法
Component 构造器可⽤于定义组件调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。
定义段类型是否必填描述propertiesObject Map否组件的对外属性是属性名到属性设置的映射表参⻅下⽂dataObject否组件的内部数据和 properties ⼀同⽤于组件的模板渲染observersObject否组件数据字段监听器⽤于监听 properties 和 data 的变化参⻅ 数据监听器methodsObject否组件的⽅法包括事件响应函数和任意的⾃定义⽅法关于事件响应函数的使⽤参⻅ 组件事件createdFunction否组件⽣命周期函数在组件实例刚刚被创建时执⾏注意此时不能调⽤ setData 参⻅ 组件⽣命周期attachedFunction否组件⽣命周期函数在组件实例进⼊⻚⾯节点树时执⾏参⻅ 组件⽣命周期readyFunction否组件⽣命周期函数在组件布局完成后执⾏参⻅ 组件⽣命周期movedFunction否组件⽣命周期函数在组件实例被移动到节点树另⼀个位置时执⾏参⻅ 组件⽣命周期detachedFunction否组件⽣命周期函数在组件实例被从⻚⾯节点树移除时执⾏参⻅ 组件⽣命周期
组件-⾃定义组件传参
⽗组件通过属性的⽅式给⼦组件传递参数⼦组件通过事件的⽅式向⽗组件传递参数
过程
⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中⽗组件 监听 onMyTab 事件⼦组件 触发 bindmytap 中的 mytap 事件 ⾃定义组件触发事件时需要使⽤ triggerEvent ⽅法指定 事件名 、 detail 对象⽗ - ⼦ 动态传值 this.selectComponent(“#tabs”);
父组件代码
// page.wxml
tabs tabItems{{tabs}} bindmytaponMyTab 内容-这里可以放插槽
/tabs
// page.jsdata: {tabs:[{name:体验问题},{name:商品、商家投诉}]},onMyTab(e){console.log(e.detail);},
子组件代码
// com.wxml
view classtabsview classtab_title block wx:for{{tabItems}} wx:key{{item}}view bindtaphandleItemActive data-index{{index}}{{item.name}}/view/block/viewview classtab_contentslot/slot/view
/view
// com.js
Component({properties: {tabItems:{type:Array,value:[]}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemActive(e){this.triggerEvent(mytap,haha);}}
})效果
小程序生命周期
分为应⽤⽣命周期和⻚⾯⽣命周期
应用生命周期
属性类型默认值必填说明onLaunchfunction否监听⼩程序初始化。onShowfunction否监听⼩程序启动或切前台。onHidefunction否监听⼩程序切后台。onErrorfunction否错误监听函数。onPageNotFoundfunction否⻚⾯不存在监听函数。
页面生命周期
属性类型说明dataObject⻚⾯的初始数据onLoadfunction⽣命周期回调—监听⻚⾯加载onShowfunction⽣命周期回调—监听⻚⾯显⽰onReadyfunction⽣命周期回调—监听⻚⾯初次渲染完成onHidefunction⽣命周期回调—监听⻚⾯隐藏onUnloadfunction⽣命周期回调—监听⻚⾯卸载onPullDownRefreshfunction监听⽤⼾下拉动作onReachBottomfunction⻚⾯上拉触底事件的处理函数onShareAppMessagefunction⽤⼾点击右上⻆转发onPageScrollfunction⻚⾯滚动触发事件的处理函数onResizefunction⻚⾯尺⼨改变时触发详⻅ 响应显⽰区域变化onTabItemTapfunction当前是 tab ⻚时点击 tab 时触发
页面生命周期
