微信小程序 - 在自定义组件中请求后端 API 数据接口（引入该组件的页面触发）组件在哪个生命周期钩子函数中请求接口数据呢？

已于 2025-01-18 17:25:47 修改
阅读量7.4k 收藏 6
点赞数 4
CC 4.0 BY-SA版权
分类专栏： + Wechat 文章标签： 微信小程序 javascript 自定义组件 请求接口 没有onLoad
于 2020-08-18 08:59:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/108069074
+ Wechat 专栏收录该内容
122 篇文章 ¥19.90 ¥99.00
订阅专栏
本文探讨了在微信小程序中，当自定义组件需要在加载时请求后端API数据的问题。由于组件内没有onLoad，作者提出了使用组件的`attached`生命周期钩子来代替，此阶段组件已初始化并进入页面节点树，适合进行数据请求和初始化工作。

前言

我开发了一个 A 页面，然后在 A 页面引入了一个组件 B ，我想在 B 组件中加载进来的时候执行一个后端请求，获取数据进行 B 组件渲染。

今天遇到这么一个问题，我写好的小程序 组件(component) 中，需要请求后端数据接口，但组件中没有 onLoad 怎么办？下面是解决方案。

支持 Vue2 / Vue3 语法

解决方案

解决方

了解本专栏 订阅专栏 解锁全文
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数，像onMounted（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
🏆 前端领域优质创作者
09-29 1434
在微信小程序中，用户回退页面触发更新数据的操作，一般都是在 页面onShow()中写上执行更新的函数即可。但如果咱们把数据和方法都写在了自定义子组件中，那么用户回退页面时，更新数据就成了问题，因为子组件中没有onShow， 执行不到更新数据操作的函数。详细示例代码及说明。
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
🏆 前端领域优质创作者
05-24 3705
前言 在微信小程序中，用户回退页面触发更新数据的操作，一般都是在页面onShow()中写上执行更新的函数即可。 但如果咱们把数据和方法都写在了自定义子组件中，那么用户回退页面时， 更新数据就成了问题，因为子组件中没有onShow，执行不到更新数据操作的函数。 但是有一种方式可以解决，如下图所示： 示例代码 代码干净整洁，可直接复制或整合到您的项目中。 打开您想要更新数据的子组件， 参考以下代码完成改造， //子组件代码 //1.要更新数据的组件中 //2.加入pageLi
微信小程序组件和接口测试demo
03-13
开发微信小程序中遇到的一些组件的使用效果的展示,到微信开发小程序中下载ide,然后将代码解压直接导入到ide中就能使用
微信小程序 组件的自定义数据属性+请求接口+导航栏loading和标题+页面转发
MR_BC的博客
01-15 996
（一） 1. 组件的自定义数据属性 当事件处理函数需要当前组件的一些关键数据的时候，就可以将这些关键数据在这个组件上，以data-的方式申明的自定义数据属性进行设置 例： data-movie-id =“{{XX}}” <view bindtap="f1" data-movie-id="{{movie-id}}"> </view> 在event.currentTarget中，可以获取到的dataset里面的内容，而且会进行转换成驼峰命名 ，例： f1:function(e
微信小程序请求后台接口(完整版)
bigpatten的博客
07-20 2万+
按照我写的Demo阐述下，三种方法都可以，看各自的需求使用吧 方式一： 以点击事件的形式 : // 其他页面内容就不展示了，按照自己的结构去渲染数据 <button type="button" bindtap="test">点击请求接口</button > Page({ data: { // 接收请求过来的数据 listDate: '' } }); test: function () { // 为确保this指向不发生改变，可以固定下this指向
微信小程序接口调用{基本框架}
weixin_30846599的博客
04-11 452
1.先调用封装好的方法: const server = require('../../utils/server'); 2.调用接口 data: { listdata: {}, }, loadData: function() { let that = this; server.sendRequest({ url: '/.....
微信小程序 网络请求接口 及 生命周期
weixin_52139966的博客
06-24 3146
前言:前期我们对微信小程序有些基本了解,像标签,样式,组件....等. 今天我们继前期进行继续的了解 一. 网络请求 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。 计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务HTTP 目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求， 然后Web服务
微信小程序-美观的页面
最新发布
11-10
5. **生命周期方法**: 每个微信小程序页面都有自己的生命周期，包括`onLoad`, `onShow`, `onHide`等方法，开发者可以根据这些生命周期钩子函数进行初始化、更新或销毁页面的操作。6. **组件化开发**: 微信小程序支持...
微信小程序调用微信支付API（使用wechatpay-java SDK）
Galaxy的博客
02-03 3236
采用新版微信SDK进行基本的微信支付接口调用。
微信小程序调用服务器接口,微信小程序调用自定义接口
weixin_39585761的博客
08-04 2087
微信小程序提供了wx.request方法发起请求，具体文档参照 微信小程序api。使用的api为自建api，使用node搭建的restfiy接口服务器 服务器搭建方法1.全局接口定义在app.js中，定义接口aeHttp,在代码其他地方调用时可以直接使用app.aeHttp()方法调用，无需require等aeHttp:function(args,resolve,reject){let param...
小程序示例 包含组件使用说明和接口使用说明
09-28
展示小程序官方组件能力 组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参考小程序开发文档
微信小程序获取后台接口数据教程
qq_72023758的博客
08-30 939
这里写目录标题一级目录二级目录三级目录 一级目录 二级目录 三级目录
微信小程序的API应用
m0_74842053的博客
04-08 4319
1.网络API•(1)（2）（3）
微信小程序，自定义三级picker选择器，从java后台远程获取数据源
Coo~的博客
04-17 2014
最终目的 远程获取选项数据 获得所选项对应id 基本原理 其实就仔细研读一下官方文档，搞懂它就好实现了。 虽然没有专门介绍多列选择器multiSelector ，但在官方示例代码中有示例。 主要要搞清楚每个属性的含义、multiArray、multiIndex。别把自己绕晕了~ 具体实现 ...
小程序组件的生命周期，以及在小程序中进行接口请求的方法设置
u013712343的博客
07-28 926
小程序组件的生命周期，以及在小程序中进行接口请求的方法设置
小程序API与生命周期总结
m0_72474345的博客
11-14 306
小程序API与生命周期总结
微信小程序自定义组件同步调用
a309785147的博客
08-14 462
目前微信官方的推荐写法一般都是用triggerEvent来抛出数据，用bind...来接收。这里提供组件的同步调用不适用bind来接收triggerEvent抛出的数据。(借助了co.js，不想使用的可以用async和await代替)例子：自定义弹窗，同步调用自定义弹窗组件返回当前用户操作结果。
【微信小程序】自定义组件Component的使用
热门推荐
Ho博客
07-25 8万+
之前有一篇博文介绍了小程序中模板template的使用。在使用的时候，虽然可以实现与组件相同的显示功能，但是template没有自己的生命周期，在操作模板上的控件时，事件的传递不好处理，而这些不方便都可以通过组件component来代替。
【小程序】循环调用接口API
@point
08-10 1784
在一些需求场景中，需要我们不断的循环调用接口，来查看当前的状态。这种我们都知道使用计时器是一个非常棒的方法。一般会考虑服务器的感受，我们会设置5秒钟。即5000 //循环调取API状态 startTimer() { if (app.globalData.timer) { clearInterval(app.globalData.timer) } app.globalData.timer = setInterval(() => { if (
微信小程序引入组件无法触发组件中生命周期函数处理
04-15
### 微信小程序组件生命周期不触发的原因分析与解决方案 在微信小程序中，组件的生命周期函数可能不会被正常触发的情况通常是由以下几个原因引起的： #### 原因一：未正确绑定属性或事件 如果组件中的 `properties` 或者其他配置项没有按照预期设置，则可能导致某些生命周期函数无法正常工作。例如，在父页面引入组件时，如果没有传递必要的初始数据或者绑定方法，可能会导致组件内部逻辑未能按计划执行。 #### 解决方案： 确保在父页面中正确初始化并传入所需的数据到子组件中去[^1]。可以通过如下方式实现： ```javascript // 父页面wxml文件 <view> <my-component data="{{parentData}}"></my-component> <!-- parentData 是从父页面传递过来 --> </view> // 子组件js文件 Component({ properties: { data: { type: Object, value: {}, observer(newVal, oldVal) { this.logInfo(); } }, }, methods:{ logInfo(){ console.log('接收到新值',this.properties.data); } } }); ``` #### 原因二：错误理解组件生命周期 不同于页面(Page)，组件(Component)并没有像 `onLoad()` 那样的特定加载周期。取而代之的是几个关键阶段如 `attached()`, `ready()`, 和 `detached()` 等。其中最常用的就是 `attached()` 函数，它会在组件实例进入节点树之后立即调用一次[^3]。 #### 解决方案： 利用合适的生命周期钩子完成相应的操作。对于大多数情况下需要做的初次渲染前准备工作来说，应该放在 `attached()` 方法里面去做；而对于那些依赖于DOM结构完全构建完毕后的任务则更适合安排至 `ready()` 当中进行处理。 ```javascript Component({ attached() { // 执行一些仅需运行一次的操作比如网络请求等 wx.request({ url:'https://example.com/api', method:"GET", success:(res)=>{ this.setData({serverResponse:res.data}) } }) }, ready(){} }); ``` 另外需要注意的一点就是关于跨域以及HTTPS的要求问题[^2]。由于安全策略上的考量，所有的API接口都必须采用加密传输协议即使用SSL证书保护起来的服务端地址来进行通信交互才行。 --- ### 问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力Code

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值