2018-07-10  591 views 1

ASP.NET WebAPI 开发小程序(列表页)开发之前端绑定列表页数据实例(五)

ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例(四)中已经讲解如何编写一个ASP.NET WebApi为小程序提供服务端数据源,那本篇幅就来讲一下,如何将API获取到的数据绑定到前端页面上。

本系列教程的结构如下:

 1 )小程序基础知识(常用且浅显)

2)小程序基础布局知识

3)小程序列表页布局实例

 4)ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例

5)小程序请求ASP.NET WebAPI数据并在前端实现数据绑定实例

6)小程序数据提交Post的使用

1、对应的API请求我们应该写在对应page的 js中,通常请求写在onLoad方法中,同时我们要在data中定义一个变量,用于存储获取到的数据并在前端绑定。

如此处的实例

list.js

data: {
  listData:[]
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  var that = this;
  wx.request({
    url: 'http://localhost:26798/Article/GetArticleList',
    data:{

    },
    method:"GET",
    success:function(res){
      if(res.data.Code == 0){
        that.setData({
          listData:res.data.Result
        })
      }
    }
  })
},

以上代码实现了 在data中定义一个变量为listData 用于存储列表数据(数组类型),在onLoad方法(页面加载事件)中,使用wx.request方法请求API(此处使用Get方式请求,并且无参数)

请求的结果如下:

需要注意的是,在开发环境中,我们没有使用https,会报错,需要关闭校验合法域名,操作方法:

菜单栏  →  单击设置  →  项目设置  →  勾选“不校验合法域名”

至此,js中请求API获取数据,并复制就已经完成了,接下来就是要在前端绑定数据了。

2、小程序数据绑定可能会用到 wx:for,wx:for-items,wx:for-item,wx:key

此处简单讲解以下分别的使用方式和区别:

现有数组:

[
        {
            "Id": 1,
            "Title": "文章标题111111111111",
            "ReadNums": 2979
        },
        {
            "Id": 2,
            "Title": "文章标题2222222222222",
            "ReadNums": 8888
        },
        {
            "Id": 3,
            "Title": "文章标题33333333333333",
            "ReadNums": 1791
        }
]

1)使用wx:for (主要用于循环输出数组,对象等;)

<view wx:for="{listData}" wx:key="{{item.Id}}">
  {{item.Title}}
</view>

这样会输出:

文章标题111111111111

文章标题2222222222222

文章标题33333333333333

需要注意的是: 由于小程序里面没有指定对应的循环参数, 所以默认是由item来指代,所以在多层循环当中,第n层的循环会把第n-1层的item覆盖掉;

2)wx:key

主要用于在动态生成的列表当中,保持一些栏位的状态不变; 
官方的解释是: 
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。 
保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如: 
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

3)wx:for-item

一般用于指定第二层及以上循环当中的指代字段名; 
相对于angularJs循环:

ng-repeat="{{ item in array}}"

明确的指定字段来取值来说,小程序为了弥补这个缺陷,特意定义了wx:for-item来指代具体的字段名,当然啦,你可以随便定义; 

4)wx:for等价与wx:for-items是循环数组用的;而wx:for-item则是给列表赋别名用的

 

实例,本次项目中的列表绑定如下:

<view class='list-item' wx:for='{{listData}}' wx:key='itemArticle.Id' wx:for-item='itemArticle'>
  <view class='list-left'>
    <view class='list-title'>
      {{itemArticle.Title}}
    </view>
    <view class='list-readnum'>
      {{itemArticle.ReadNums}}次阅读
    </view>
  </view>
  <view class='readMore' data-id='{{itemArticle.Id}}' bindtap='rdDetail'>
    详情
  </view>
</view>

其中wx:key属性可以不添加

 

3、需要着重注意的是,在js中使用wx.request请求API ,并且在success后赋值的时候,不能直接使用this.data.*** = ****进行赋值,会提示this.setData is not a function,我们需要先在方法体内声明一个变量,通常为that 设置为this,如下:

var that = this;
wx.request({
  url: 'http://localhost:26798/Article/GetArticleList',
  data:{

  },
  method:"GET",
  success:function(res){
    if(res.data.Code == 0){
      that.setData({
        listData:res.data.Result
      })
    }
  }
})

这样调用赋值就不会报错了。

 

本文主要讲了如何请求ASP.NET WebAPI 获取数据,并将数据绑定到页面上,后续还将讲解如何提交数据等。

系列教程未完,待续。。。

1 条留言  访客:0 条  博主:0 条   引用: 1 条

来自外部的引用: 1 条

  • ASP.NET API 开发小程序(列表页)开发之列表布局实例(三) | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: