前三章基本完成文章列表页面的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
微信小程序入门教程集合：微信小程序入门教程全集
