• 【已验证-直接用】微信小程序wx.request请求服务器json数据并渲染到页面

    微信小程序的数据总不能写死吧，肯定是要结合数据库来做数据更新，而小程序数据主要是json数据格式，所以我们可以利用php操作数据库，把数据以json格式数据输出即可。

    现在给大家讲一下微信小程序的wx.request请求服务器获取数据的用法。

    官方文档给出了示例代码，但是我这边自己进行了简单的处理：
     

    data.json

    1. [
    2.     {
    3.         "id":"100",
    4.         "title":"中国载人航天工程三十年成就展",
    5.         "pv":"490.1万"
    6.     },
    7.     {
    8.         "id":"101",
    9.         "title":"上海80后夫妻攒300万决定退休",
    10.         "pv":"488.0万"
    11.     },
    12.     {
    13.         "id":"102",
    14.         "title":"医保改革引关注 官方回应民众顾虑",
    15.         "pv":"446.9万"
    16.     },
    17.     {
    18.         "id":"103",
    19.         "title":"餐厅接网吧10个订单收到9个差评",
    20.         "pv":"406.0万"
    21.     },
    22.     {
    23.         "id":"104",
    24.         "title":"三亚买3888元海鲜被提醒多花1700",
    25.         "pv":"340.1万"
    26.     },
    27.     {
    28.         "id":"105",
    29.         "title":"警方回应女子高铁站殴打威胁女童",
    30.         "pv":"264.7万"
    31.     }
    32. ]

    Json.wxml

    2. <view class='container'>
    3.  
    4.  <view class="header">小程序渲染数据示例view>
    5.  
    6.  <view class="card" wx:for="{{dataList}}" wx:key="dataList">
    7.      <view class="title">{{index+1}} . {{item.title}}view>
    8.      <view class="pv">{{item.pv}}view>
    9.  view>
    10.  
    11. view>
    12.  
    13. <view class="author">BY TANKINGview>

    Json.wxss

    1. /* pages/Json/Json.wxss */
    2. .container{
    3.   width: 90%;
    4.   margin:30px auto;
    5. }
    6.  
    7. .container .header{
    8.   text-align: center;
    9.   font-size: 20px;
    10.   margin-bottom: 25px;
    11. }
    12.  
    13. .container .card{
    14.   width: 100%;
    15.   height: 45px;
    16.   background: #eee;
    17.   border-bottom: 1px solid #fff;
    18. }
    19.  
    20. .container .card .title{
    21.   width: 80%;
    22.   float: left;
    23.   height: 45px;
    24.   line-height: 45px;
    25.   font-size: 15px;
    26.   color: #666;
    27.   text-indent: 15px;
    28.   white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /*超出部分显示...*/
    29. }
    30.  
    31. .container .card .pv{
    32.   width: 20%;
    33.   float: right;
    34.   height: 45px;
    35.   line-height: 45px;
    36.   font-size: 15px;
    37.   color: #666;
    38. }
    39.  
    40. .author{
    41.   text-align: center;
    42.   font-size: 13px;
    43.   color: #ccc;
    44. }

    Json.js

    1. // pages/Json/Json.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     dataList:[]
    9.   },
    10.  
    11.   /**
    12.    * 生命周期函数--监听页面加载
    13.    */
    14.   onLoad(options) {
    15.  
    16. // 避免this指向问题
    17. var that = this
    18.  
    19. // 发起请求
    20. wx.request({
    21.   url: 'http://127.0.0.1:8081/apiwx/jason/data.json', // 这里要替换你的域名的
    22.   headers: {
    23.     'Content-Type': 'application/json'
    24.   },
    25.   success: function (res) {
    26.     //console.log("获取到的用户信息成功: " + res.data);
    27.     // 将获取到的JSON数据存入list数组中
    28.     that.setData({
    29.       dataList: res.data,
    30.     })
    31.  
    32.     // 在控制台打印
    33.     console.log(res.data)
    34.   }
    35. })
    36.  
    37.  
    38.  
    39.  
    40.   },
    41.  
    42.   /**
    43.    * 生命周期函数--监听页面初次渲染完成
    44.    */
    45.   onReady() {
    46.  
    47.   },
    48.  
    49.   /**
    50.    * 生命周期函数--监听页面显示
    51.    */
    52.   onShow() {
    53.  
    54.   },
    55.  
    56.   /**
    57.    * 生命周期函数--监听页面隐藏
    58.    */
    59.   onHide() {
    60.  
    61.   },
    62.  
    63.   /**
    64.    * 生命周期函数--监听页面卸载
    65.    */
    66.   onUnload() {
    67.  
    68.   },
    69.  
    70.   /**
    71.    * 页面相关事件处理函数--监听用户下拉动作
    72.    */
    73.   onPullDownRefresh() {
    74.  
    75.   },
    76.  
    77.   /**
    78.    * 页面上拉触底事件的处理函数
    79.    */
    80.   onReachBottom() {
    81.  
    82.   },
    83.  
    84.   /**
    85.    * 用户点击右上角分享
    86.    */
    87.   onShareAppMessage() {
    88.  
    89.   }
    90. })

    注意，上面的   http://127.0.0.1:8081/apiwx/jason/data.json 就是数据源，替换为你服务器的API接口，我这里用test.json来做演示，返回是JSON格式的数据。

    index.wxml

    wx:for这个是小程序提供的一个指令，相当于遍历JSON数组的每一项。上面test.json有很多个JSON对象，遍历每一项就可以渲染出每一项的数据。

    wx:key是给每一项添加一个标识，相当于每一项都拥有一个身份证的意思，也是唯一的，这样做有助于渲染效率。

    item是相当于JSON数组的每一项，通过wx:for遍历出来的每一个JSON对象，然后读取每一个JSON对象的值。例如下面这个：

    如果要单独读取里面的值，就是item.id，item.title，item.pv

    {{index+1}} 指的是索引值+1，索引值是从0开始算的，即里面的每一项的值，一共有6项，从上到下的索引值是0、1、2、3、4、5，但是我为了每一项有个编号，那就在索引值的基础上+1，就可以实现每一项的编号。
     

    如果我们没有wx:key那么在控制台会提示一些警告信息，但是这个警告信息并不影响页面的渲染，基本可以忽略掉！

    警告信息：Now you can provide attr "wx:key" for a "wx:for" to improve performance

    wx:key用来对列表渲染的数据指定一个"主键”，以加快列表渲染的速度。以下是官方文档原话：如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。如果你一定想去掉这个警告，可以在wx：for的组件属性里增加一个 wx:key="unique"，unique请替换成数据绑定列表里的任意一个字段的字段名，比如文章列表数据中的字段“postId”，即wx:key="postId"。不建议使用wx:key="*this"。
     

    渲染结果如下

  • 相关阅读:
    代码随想录第52天 | 300.最长递增子序列 、 674. 最长连续递增序列 、 718. 最长重复子数组
    java异常
    分布式链路追踪--SkyWalking7.0.0+es7.0.0
    【LeetCode】88. 合并两个有序数组 - Go 语言题解
    从零开始掌握 Java Blade 框架：快速 Web 应用开发之旅
    JS加密工具汇总 你要找的都在这
    淘宝账单导出的手工操作
    postgresql-DML
    iOS 16怎么升级？iPhone升级iOS 16测试版图文教程
    pyplot设置字体格式大小、坐标轴刻度在图内
  • 原文地址：https://blog.csdn.net/zgscwxd/article/details/134347816