|
前三章基本完成文章列表页面的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 |
