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

 

 

前三章基本完成文章列表页面的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<String, Object> resultMap = new HashMap<String, Object>();
			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 的形式。

 

<view class="page">
    <view class="page__bd">
        <view class="weui-article">
            <view class="weui-article__h1">{{msgDetail.title}}</view>
            <view class="weui-article__section">
                <view class="weui-article__section">
                    <view class="weui-article__h3">{{msgDetail.time}}</view>
                    <view class="weui-article__p">
                    {{msgDetail.content}}
                    </view>
                    <view class="weui-article__p">
                        <image class="weui-article__img" src="{{msgDetail.src}}" mode="aspectFit" style="height: 180px" />
                    </view>
                </view>
                
            </view>
        </view>
    </view>
</view>

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()打印出来看看

<navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

 

 

 

这样完成了，效果图：

学习的过程中遇到了一个 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

 

 

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