微信小程序入门四详情页面
前三章基本完成文章列表页面的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