微信小程序数据交互与渲染实例详解_网络技术

微信小程序数据交互与渲染实例详解

发布时间 - 2026-01-10 22:42:14 点击率：次

微信小程序数据交互与渲染

实现效果图：

微信小程序的api中提供了网络交互的api，我们只要调用即可和后端进行数据交互，该api为wx.request.，具体代码如下。

//list.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  list:[], 
  hiddenLoading: true, 
  url: '' 
 }, 
 loadList: function () { 
  var that = this; 
  that.setData({ 
   hiddenLoading: !that.data.hiddenLoading 
  }) 
  var url = app.urls.CloudData.getList; 
  that.setData({ 
   url: url 
  }); 
  wx.request({ 
   url: url, 
   data: {}, 
   method: 'GET', 
   success: function (res) { 
    var list= res.data.list; 
    if (list == null) { 
     list = []; 
    } 
    that.setData({ 
     list: list, 
     hiddenLoading: !that.data.hiddenLoading 
    }); 
     wx.showToast({ 
     title: "获取数据成功", 
     icon: 'success', 
     duration: 2000 
    }) 
   }, 
   fail: function (e) { 
    var toastText='获取数据失败' + JSON.stringify(e); 
    that.setData({ 
     hiddenLoading: !that.data.hiddenLoading 
    }); 
    wx.showToast({ 
     title: toastText, 
     icon: '', 
     duration: 2000 
    }) 
   }, 
   complete: function () { 
    // complete 
   } 
  }), 
 //事件处理函数 
 bindViewTap: function () { 
  wx.navigateTo({ 
   url: '../logs/logs' 
  }) 
 }, 
 onLoad: function () { 
 
 }, 
 onReady: function () { 
  this.loadList(); 
 }, 
 onPullDownRefresh: function () { 
  this.loadList(); 
  wx.stopPullDownRefresh() 
 } 
})

在loadList函数中进行了网络请求，请求的数据放到了data的list中。我们使用setData来修改list，在该函数调用之后，微信小程序的框架就会判断数据状态的变化，然后进行diff判断，如果有变化就渲染到界面中。这个与react.js的渲染方式相似，主要是内部维护了一个类似于虚拟文档的对象，然后通过对虚拟文档的判断来呈现界面，这样可以大大提高性能。

这里我们还做了一个下拉刷新的触发，即onPullDownRefresh函数，为了能够使用下拉刷新，我们需要进行配置，现在我们只需要当前页面生效，所以只要在对应页的json中配置即可，即在list.json中配置。

list.json

{ 
  "navigationBarTitleText": "产品列表",   
  "enablePullDownRefresh":true 
}

如果需要所有的页面的生效，可以在app.json中的window中配置。

app.json

{ 
 "pages":[ 
  "pages/index/index", 
  "pages/logs/logs", 
  "pages/list/list" 
 ], 
 "window":{ 
  "backgroundTextStyle":"light", 
  "navigationBarBackgroundColor": "#fff", 
  "navigationBarTitleText": "WeChat", 
  "navigationBarTextStyle":"black", 
  "enablePullDownRefresh":true 
 } 
}

在app.json中，还有一个pages，我们需要路由的页面都需要在这里注册，否则无法路由到。

在请求数据的时候，加入了等待和获取成功失败的提示。这需要相应的页面配合，页面代码list.wxm.如下

<!--list.wxml--> 
<view class="container container-ext"> 
 <!--默认隐藏--> 
 <loading hidden="{{hiddenLoading}}">正在加载</loading> 
 <scroll-view scroll-y="true"> 
  <view> 
   <block wx:for="{{list}}" wx:key="no"> 
    <view class="widget"> 
     <view> 
      <text >{{item.no}}({{item.content}})</text> 
     </view> 
    </view> 
   </block> 
  </view> 
 </scroll-view> 
</view>

/**list.wxss**/ 
 
.widget { 
 position: relative; 
 margin-top: 5rpx; 
 margin-bottom: 5rpx; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
 padding-left: 40rpx; 
 padding-right: 40rpx; 
 border: #ddd 1px solid; 
}

/**app.wxss**/ 
.container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: space-between; 
 box-sizing: border-box; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序 # 数据交互与渲染 # 数据交互与渲染详解及实例代码 # 微信小程序上传图片到服务器实例代码 # 微信小程序消息推送php服务器验证实例详解 # 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例 # 微信小程序实现打开并下载服务器上面的pdf文件到手机 # 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例 # 微信小程序搭建自己的Https服务器 # 微信小程序遇到修改数据后页面不渲染的问题解决 # 微信小程序条件渲染详解 # 微信小程序教程之列表渲染 # 微信小程序使用for循环动态渲染页面操作示例 # 微信小程序模版渲染详解 # 微信小程序开发（一）：服务器获取数据列表渲染操作示例 # 就会 # 文档 # 在这里 # 希望能 # 还有一个 # 只需要 # 谢谢大家 # 类似于 # 即在 # 正在加载 # 进行了 # 主要是 # 后端 # 应用实例 # 只要在 # complete # onLoad # navigateTo # logs # bindViewTap

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：濮阳大型网站制作公司有哪些,2025省考濮阳录用公务员公示

下一篇：VPS建站升级攻略：从旧系统迁移到新系统需要注意什么？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：濮阳大型网站制作公司有哪些,2025省考濮阳录用公务员公示

下一篇：VPS建站升级攻略：从旧系统迁移到新系统需要注意什么？

微信小程序 数据交互与渲染实例详解

微信小程序数据交互与渲染实例详解