微信小程序开发（一）：服务器获取数据列表渲染操作示例

2024-04-11 05:23:05

本文实例讲述了微信小程序服务器获取数据列表渲染操作。分享给大家供大家参考，具体如下：

在实际项目开发中，有很多时候，前台页面的数据需要后台服务器传递过来。而前台需要循环铺值，类似如下页面：

请求后台数据：

wx.request({
   url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //请求后台地址
   data: {
    //请求后台的分页数据
    pageNum: that.data.page,
    pageSize: that.data.pageSize
   },
   method: "post",
   success(res) {
    console.log(res.data);
   }
})

后台返回数据类型：

接下来是前台页面铺值，在普通网站页面铺值的时候我会用到JS字符串拼接技术，将数据拼到页面，外面包一层for循环就可以循环铺出这样的列表页面。现在在微信小程序中，我们可以在wxml里面写一部分js代码，将for循环写在wxml中：

 <view bindtap="jumpPages"
    wx:for="{{contentlist}}"
    wx:key="{{index}}"
    wx:for-index="index"
    wx:for-item="item"
  >
  <van-card
   num=" {{item.prjcount}}人 "
   price="课程小组"
   title="{{item.project_name}}"
   desc="{{item.name}}"
   centered=true
   currency=""
   custom-class="custom-g"
   thumb-class="thumb"
   title-class="title-g"
   desc-class="desc-g"
  >
  </van-card>
 </view>

注释：代码中的<van-card>是我引用的一个组件库，此处不用考虑。

希望本文所述对大家微信小程序设计有所帮助。

微信小程序上传图片到服务器实例代码

上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <
微信小程序数据交互与渲染实例详解

微信小程序数据交互与渲染实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:
微信小程序实现打开并下载服务器上面的pdf文件到手机

谈一谈ios的bug: 关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看.所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧! 先看一下不兼容ios系统的下载柚子是怎么实现的吧: 首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件 //查看并下载 See_download() { wx.downloadF
微信小程序使用for循环动态渲染页面操作示例

本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text
微信小程序搭建自己的Https服务器

一.注册微信小程序进入微信公众平台,使用邮箱账号,选择注册小程序账号.一个邮箱只能注册一个类型的微信账号(订阅号.服务号.小程序). 二.搭建Https服务器 1.域名注册 1.1.登录腾讯云平台,并注册账号. 1.2.选择"云产品"-"域名服务"-"域名管理" 1.3.选择"域名"注册,根据提示进行注册.需要缴纳一定费用. 2.SSL证书管理 2.1.选择"云产品"-"域名服务"-&
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun
微信小程序遇到修改数据后页面不渲染的问题解决

微信小程序遇到修改数据后页面不渲染的问题解决前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,
微信小程序条件渲染详解

1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: <view wx.if="{{条件}}">True</view> 也可以用wx.elif和wx.else来添加一个else块,事例如下: <view wx:if="{{a>1}}"> 1 </view> <view wx:elif="{{a>2}}">
微信小程序教程之列表渲染

系列文章: 微信小程序教程之WXSS 微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view wx:for="{{items}}"> {{index}}:
微信小程序消息推送php服务器验证实例详解

微信小程序消息推送php服务器验证实例详解微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名比如:
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能.分享给大家供大家参考,具体如下: 昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求. 微信小程序文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl 头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个.下面是app.json文件代码和相关注释 { &qu
微信小程序模版渲染详解

微信小程序的界面程序支持html语法,多加了一部分标签,如view.block.templete等. 模版渲染 index.wxml <view> <p>{{helloWord}}</p> </view> 其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量在index.js 中注册这个变量 var json = { data:{ "helloWord" : "hello world&

微信小程序开发（一）：服务器获取数据列表渲染操作示例

相关推荐

随机推荐