小程序02/小程序 自定义组件-子传父 方法、生命周期介绍、应用生命周期钩子函数

一. 自定义组件-子传父 

1. 子组件通过 触发事件的同时 向父组件传参

this.triggerEvent('事件名',参数1, 参数2)

2.. 父组件给子组件 在组件标签名内注册一个自定义属性名

注意: 父组件中的事件名要与子组件 this.triggerEvent 内属性名一致

<子组件 bind传递事件名="方法名"> </子组件>

3.接收子组件传递参数

自定义自定义(参数名) {
    console.log(参数名)
  }

二.生命周期介绍

分类

应用生命周期

页面生命周期

组件生命周期

三. 应用生命周期钩子函数

onLaunch  监听小程序初始化

onShow     监听小程序启动 或 在后台 切到 前台

onHide       监听小程序 在前台 切到 后台

onError      监听错误报错

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 ECharts 5.3.3 版本重新封装饼图组件的微信小程序代码示例: 1. 首先,在小程序项目中创建一个新的文件夹,命名为 `echarts-pie`,用于存放饼图组件相关的代码和文件。 2. 在 `echarts-pie` 文件夹中创建三个文件:`echarts-pie.wxml`、`echarts-pie.js` 和 `echarts-pie.wxss`。 3. 在 `echarts-pie.wxml` 文件中,编写以下代码: ```html <view class="echarts-pie"> <ec-canvas id="mychart" canvas-id="mychart"></ec-canvas> </view> ``` 4. 在 `echarts-pie.js` 文件中,编写以下代码: ```javascript const app = getApp(); Component({ properties: { data: { type: Array, value: [] } }, lifetimes: { attached() { this.initChart(); } }, methods: { initChart() { const { echarts } = app.globalData; // 获取全局的 ECharts 对象 const chart = this.selectComponent('#mychart'); chart.init((canvas, width, height) => { const chartInstance = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: app.globalData.systemInfo.pixelRatio // 获取全局的设备像素比 }); this.setChartData(chartInstance); return chartInstance; }); }, setChartData(chart) { const { data } = this.properties; const option = { series: [{ type: 'pie', data: data }] }; chart.setOption(option); } } }); ``` 5. 在 `echarts-pie.wxss` 文件中,编写以下代码: ```css .echarts-pie { width: 100%; height: 300px; } ``` 6. 在需要使用饼图组件的页面的 JSON 配置文件中,添加自定义组件的引用。例如: ```json { "usingComponents": { "ec-canvas": "/components/ec-canvas/ec-canvas", "echarts-pie": "/echarts-pie/echarts-pie" } } ``` 7. 在需要使用饼图组件的页面的 WXML 文件中,使用自定义组件。例如: ```html <echarts-pie data="{{pieData}}"></echarts-pie> ``` 8. 在页面的 JS 文件中,设置饼图的数据。例如: ```javascript Page({ data: { pieData: [ { value: 335, name: 'Category1' }, { value: 310, name: 'Category2' }, { value: 234, name: 'Category3' }, { value: 135, name: 'Category4' }, { value: 1548, name: 'Category5' } ] }, onLoad() { const { echarts } = require('./utils/echarts.min'); // 引入 ECharts 库 const systemInfo = wx.getSystemInfoSync(); // 获取设备信息 getApp().globalData.echarts = echarts; // 将 ECharts 对象存储到全局变量中 getApp().globalData.systemInfo = systemInfo; // 将设备信息存储到全局变量中 } }); ``` 以上示例代码中,我们使用了 `<ec-canvas>` 组件来绘制 ECharts 图表,需要提前将 `<ec-canvas>` 组件的代码放置在小程序项目中的合适位置。 在页面的 `onLoad` 生命周期钩子函数中,我们引入了 ECharts 库,并将 ECharts 对象和设备信息存储到全局变量中,方便在组件中访问。 在自定义的饼图组件中,我们通过全局的 ECharts 对象来初始化和配置饼图,并通过 `setChartData` 方法设置饼图的数据。 请确保在使用前将 ECharts 库文件放置在合适的位置,并根据实际需求调整代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值