微信小程序如何实时更新数据并在页面显示出来

微信小程序实时更新数据并在页面显示出来，一般可以通过以下步骤实现。

1、前端页面发送请求：在小程序前端页面中，使用wxrequest()等API，向后端服务器发送请求，获取最新的数据。

2、后端服务器响应请求：后端服务器接收到前端发送的请求后，根据请求内容，查询数据库或其他数据源，获取最新的数据，并将数据返回给前端。

3、端页面数据更新：前端页面接收到后端服务器返回的数据后，使用setData()等API，将数据更新到前端页面中。

4、前端页面渲染更新后的数据：前端页面使用wxml语言，在页面中渲染更新后的数据，使其在页面上显示出来。

如图所示是接下来需要完成的效果：

页面结构：2个， index (首页)以及 details (详情页)，首页是产品列表，点击产品后进入对应的详情页。

首页的wxml结构:

首页的js数据：

对于详情页请求数据，核心在于点击对应产品然后请求对应的产品数据，因此这里的 navigator 组件跳转的url至关重要，这里的 /pages/details/detailsgoodsId={{index} 是模拟了后台提供的数据接口，后面的 goodsId 作为产品的辨识符，当点击之后可以获取到当前点击的是哪个产品，以供详情页进行请求数据。

详情页wxml结构：

详情页js数据：

详情页请求数据的重点在于生命周期函数， onLoad 函数，它可以在页面加载的时候进行触发，并可以通过参数获取到跳转链接上面的辨识符，也就是通过 onLoad 函数中的 options ，获取到了刚才在 indexwxml 页面url中的辨识符： goodId ；

通过它可以获取到对应的产品数据，再将数据进行修改更新到详情页结构 detailswxml 即可。

本案例中跨页面传递数据主要是利用了URL传值，在另外一个页面中接收，并将数据渲染到页面中，这个过程就需要用到生命周期函数：onLoad函数。

iOS数据监听很简单，比如登录成功之后首页、个人中心页等很多页面都需要更新数据，只需要首页和个人中心页注册通知，登录成功之后发送通知，首页和个人中心页就能接收到该通知，此时就可以更新数据及界面，退出登录同理。

小程序更新页面数据就比较费劲，之前我都是获取上级页面，然后调用上级页面自定义方法 loadNewData 方法来刷新上级页面数据。

这种方法说实话也挺好用的，但是只能更新 wxnavigateTo 打开的页面。

官方也有页面间通信方法 EventChannel ，同样只能和 wxnavigateTo 打开的页面进行通信。

今天遇到的需求是 tabbar 切换的页面更新首页列表数据，只能各种百度，最终也实现的功能。

在首页调用

在其他页面修改 reloadIndex 的值

小程序组件有 数据监听器 ，也实现了某个功能。

参考文章：

小程序实现数据监听

小程序如何在其他页面监听globalData中值的变化？

微信小程序设置简单的监听器

1、设置id的方法标识跳转后传递的参数值;

2、通过使用data - xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值在要跳转的item处，设置一个id并给当前的id赋值上对应的key值，比如一部**的id(后面带着id去下一个页面查询，详细信息)如：

后我们在js的bindtap的响应事件中获取，并传递到下一个界面中;

获取到id传的值

通过ecurrentTargetid;获取设置的id值，并通过设置全局对象的方式来传递数值，

获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 apprequestDetailid=id;

提示：其实我们也可以在，wxml中查看到我们设置的每一个item的id值

通过使用data - xxxx 的方法标识来传值通过使用data - xxxx 的方法标识来传值，xxxx可以自定义取名 比如data-key等等都可以。

如何获取data-xxxx传递的值

在js的bindtap的响应事件中：

通过数据解析一层层找到数据，var id=etargetdatasetid(根据你的data-id的取名)

微信小程序如何跨页面获取值

依据上面的方式设置要传递的值，页面跳转后，我们就需要在下一个页面拿到传递的数据(这个数据在传递前，就已经被设置成全局变量)

在跳转后的js页面，接收传递过来的数据detailjs

同样通过全局额方式取值出来，(即和appjs中取某个变量的值是一样的)

var movieid=getApp()MovieDetailid;

consolelog(movieid);

到此为止，我们数值传递并接收成功，后面就可以根据我们接收的参数，进行进一步的 *** 作了。

如果你的小程序使用 Webview 来加载网页，那么网页上的数据是不能直接更改小程序本身数据的。在这种情况下，可以通过将小程序和网页数据集成，然后通过后端 API 来读取并更新小程序数据。

以前写了一个公司论坛的阅读器，比你这个复杂的多了，呵呵

建议你搜一下>

以上就是关于微信小程序如何实时更新数据并在页面显示出来全部的内容，包括:微信小程序如何实时更新数据并在页面显示出来、微信小程序：详情页请求不同数据的实现原理、微信小程序数据监听等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！