微信小程序入门四详情页面

前三章基本完成文章列表页面的UI界面和数据加载，这章介绍内容详情页面的加载和布局。有了之前的知识储蓄，这章就容易多了。废话不多说。

首先是服务端代码，通过id查询数据：接口 https://www.itit123.cn/itdragon/findOne  controller层 源码

@RequestMapping(value="findOne")
	@ResponseBody
	public Object edit(@RequestParam(value="id") String id){
		try {
			WxData wxData = wxDataService.findOne(WxData.class,Long.valueOf(id));
			Map resultMap = new HashMap();
			resultMap.put("id", wxData.getId());
			resultMap.put("title", wxData.getTitle());
			resultMap.put("content", wxData.getContent());
			resultMap.put("src", wxData.getImageUrl());
			resultMap.put("time", wxData.getCreatedDate());
			return gson.toJson(resultMap);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

微信小程序，详情页面：detail.wxml 。变量和list.wxml页面不同，结构是 arg.key 的形式。

    
        
            {{msgDetail.title}}
            
                
                    {{msgDetail.time}}
                    
                    {{msgDetail.content}}
                    
                    
                        
                    
                
                
            
        
    

detail.js:

// pages/detail/detail.js
var app = getApp();
Page({
  data:{
    msgDetail:{}
  },
  onLoad:function(options){
    var that = this;
    app.ajax.req('/itdragon/findOne',{
      id: options.id
    },function(res){ 
      that.setData({
        msgDetail:res
      })
    });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

这里 id 的值，是和导航中传值有关（官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html）

list.wxml页面中，url 是id={{id}} , 所以这里的id取值便是 options.id。如果不放心可以console.log()打印出来看看

这样完成了，效果图：

学习的过程中遇到了一个 400 的错误，问题是在于wx.request 的header （官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject）

服务端不是接收json格式的数据，改成application/x-www-form-urlencoded 

修改util.js 代码如下：

var rootDocment = 'https://www.itit123.cn';
function req(url,data,cb){
    wx.request({
      url: rootDocment + url,
      data: data,
      method: 'post',
      header: {'Content-Type':'application/x-www-form-urlencoded'},
      success: function(res){
        return typeof cb == "function" && cb(res.data)
      },
      fail: function(){
        return typeof cb == "function" && cb(false)
      }
    })
}

下一章介绍文章列表的下拉刷新和上拉加载的功能。 该章节源码地址：http://download.csdn.net/detail/qq_19558705/9774984

微信小程序入门教程集合：微信小程序入门教程全集