微信小程序-解析JSON,实现列表无限加载

第一步

准备工作,后台模拟返回一些json数据
实体类对象

package com.ahutshop.entity;import java.io.Serializable;import java.util.Date;/** *  * @ClassName: GoodsType * @Description: 商品类型实体类 * @author cheng * @date 2017年7月12日 下午5:37:33 */public class GoodsType implements Serializable{    private static final long serialVersionUID = -4039634130866820668L;    private String typeId;//类型id    private String typeName;//类型名称    private Date createTime;//创建时间    private Date updateTime;//更新时间    /**     * 重写tostring     */    @Override    public String toString() {        return "GoodsType [typeId=" + typeId + ", typeName=" + typeName + ", createTime=" + createTime + ", updateTime="                + updateTime + "]";    }    /**     * 无参构造函数     */    public GoodsType() {        super();    }    /**     * 有参构造函数     * @param typeId     * @param typeName     * @param createTime     * @param updateTime     */    public GoodsType(String typeId, String typeName, Date createTime, Date updateTime) {        super();        this.typeId = typeId;        this.typeName = typeName;        this.createTime = createTime;        this.updateTime = updateTime;    }    public String getTypeId() {        return typeId;    }    public void setTypeId(String typeId) {        this.typeId = typeId;    }    public String getTypeName() {        return typeName;    }    public void setTypeName(String typeName) {        this.typeName = typeName;    }    public Date getCreateTime() {        return createTime;    }    public void setCreateTime(Date createTime) {        this.createTime = createTime;    }    public Date getUpdateTime() {        return updateTime;    }    public void setUpdateTime(Date updateTime) {        this.updateTime = updateTime;    }}

返回的实体类

package com.ahutshop.common;/** *  * @ClassName: ReturnObject * @Description: 控制层返回 * @author cheng * @date 2017年6月15日 下午11:15:35 */public class ReturnObject {    private String returnType;//返回类型    private Object returnValue;//返回的数值    private String returnMethodName;//返回的方法    /**     * 取得返回结果 成功:success 失败:error     *      * @return String     */    public String getReturnType() {        return returnType;    }    /**     * 设置返回结果 成功:success 失败:error     *      * @param returnType     */    public void setReturnType(String returnType) {        this.returnType = returnType;    }    /**     * 取得返回值 如果success则是返回值；如果error则是错误信息     *      * @return Object     */    public Object getReturnValue() {        return returnValue;    }    /**     * 设置返回值 如果success则是返回值；如果error则是错误信息     *      * @param returnValue     */    public void setReturnValue(Object returnValue) {        this.returnValue = returnValue;    }    /**     * 取得执行的方法     *      * @return String     */    public String getReturnMethodName() {        return returnMethodName;    }    /**     * 设置执行的方法     *      * @param returnMethodName     */    public void setReturnMethodName(String returnMethodName) {        this.returnMethodName = returnMethodName;    }    /**     * 返回失败信息     *      * @param returnValue     * @param returnMethod     */    public void setErrorMessage(Object returnValue, String returnMethod) {        this.setReturnType("ERROR");        this.setReturnValue(returnValue);        this.setReturnMethodName(returnMethod);    }    /**     * 返回成功信息     *      * @param returnValue     * @param returnMethod     */    public void setSuccessMessage(Object returnValue, String returnMethod) {        this.setReturnType("SUCCESS");        this.setReturnValue(returnValue);        this.setReturnMethodName(returnMethod);    }}

springmvc控制层模拟返回数据

package com.ahutshop.action;import java.util.ArrayList;import java.util.Date;import java.util.List;import java.util.UUID;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.ahutshop.common.ReturnObject;import com.ahutshop.entity.GoodsType;/** *  * @ClassName: DemoAction * @Description:  * @author cheng * @date 2017年7月20日 上午9:09:51 */@Controller@RequestMapping(value="/demo")public class DemoAction {    /**     *      * @Title: getTypesList     * @Description: 模拟返回一些json数据     * @return     */    @ResponseBody    @RequestMapping(value="/getTypesList.action")    public ReturnObject getTypesList(){        ReturnObject returnObject = new ReturnObject();        List<GoodsType> typesList = new ArrayList<GoodsType>();        //模拟一些商品类型信息数据        GoodsType type1 = new GoodsType(UUID.randomUUID().toString().replace("-", ""), "考研资料", new Date(), null);        GoodsType type2 = new GoodsType(UUID.randomUUID().toString().replace("-", ""), "交通工具", new Date(), null);        GoodsType type3 = new GoodsType(UUID.randomUUID().toString().replace("-", ""), "生活用品", new Date(), null);        GoodsType type4 = new GoodsType(UUID.randomUUID().toString().replace("-", ""), "二手教材", new Date(), null);        //添加到集合中        typesList.add(type1);        typesList.add(type2);        typesList.add(type3);        typesList.add(type4);        returnObject.setSuccessMessage(typesList, "demo");        return returnObject;    }}

注意:别忘了使用ngrok映射域名

第二步

小程序js

var app = getApp();Page({  /**   * 页面的初始数据   */  data: {    typeArray: []  },  getJson: function () {//获取json数据    var that = this;//把this对象复制到临时变量that    wx.request({      url: app.globalData.baseUrl + "/demo/getTypesList.action",      header: {        'content-type': 'application/json'      },      success: function (res) {        that.setData({          typeArray: that.data.typeArray.concat(res.data.returnValue)//将返回的数据拼接到现有数据后面        });      }    })  }})

小程序wxml

<view class="page">  <view class="page__hd">  </view>  <view class="page__bd">    <button bindtap="getJson" type="primary">获取json</button>    <text>解析结果</text>    <view wx:for="{{typeArray}}" wx:key="typeId">      {{index}}:{{item.typeId}}:{{item.typeName}}:{{item.createTime}}    </view>  </view></view>