欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

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

发布：2018-01-25 17:17浏览： 次来源：网络 作者：tianshu

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

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

 
  1. @RequestMapping(value="findOne")  
  2.     @ResponseBody  
  3.     public Object edit(@RequestParam(value="id") String id){  
  4.         try {  
  5.             WxData wxData = wxDataService.findOne(WxData.class,Long.valueOf(id));  
  6.             Map<String, Object> resultMap = new HashMap<String, Object>();  
  7.             resultMap.put("id", wxData.getId());  
  8.             resultMap.put("title", wxData.getTitle());  
  9.             resultMap.put("content", wxData.getContent());  
  10.             resultMap.put("src", wxData.getImageUrl());  
  11.             resultMap.put("time", wxData.getCreatedDate());  
  12.             return gson.toJson(resultMap);  
  13.         } catch (Exception e) {  
  14.             e.printStackTrace();  
  15.         }  
  16.         return null;  
  17.     }  

 

微信小程序，详情页面：detail.wxml 。变量和list.wxml页面不同，结构是 arg.key 的形式。
 
  1. <view class="page">  
  2.     <view class="page__bd">  
  3.         <view class="weui-article">  
  4.             <view class="weui-article__h1">{{msgDetail.title}}</view>  
  5.             <view class="weui-article__section">  
  6.                 <view class="weui-article__section">  
  7.                     <view class="weui-article__h3">{{msgDetail.time}}</view>  
  8.                     <view class="weui-article__p">  
  9.                     {{msgDetail.content}}  
  10.                     </view>  
  11.                     <view class="weui-article__p">  
  12.                         <image class="weui-article__img" src="{{msgDetail.src}}" mode="aspectFit" style="height: 180px" />  
  13.                     </view>  
  14.                 </view>  
  15.                   
  16.             </view>  
  17.         </view>  
  18.     </view>  
  19. </view>  

detail.js:
 
  1. // pages/detail/detail.js  
  2. var app = getApp();  
  3. Page({  
  4.   data:{  
  5.     msgDetail:{}  
  6.   },  
  7.   onLoad:function(options){  
  8.     var that = this;  
  9.     app.ajax.req('/itdragon/findOne',{  
  10.       id: options.id  
  11.     },function(res){   
  12.       that.setData({  
  13.         msgDetail:res  
  14.       })  
  15.     });  
  16.   },  
  17.   onReady:function(){  
  18.     // 页面渲染完成  
  19.   },  
  20.   onShow:function(){  
  21.     // 页面显示  
  22.   },  
  23.   onHide:function(){  
  24.     // 页面隐藏  
  25.   },  
  26.   onUnload:function(){  
  27.     // 页面关闭  
  28.   }  
  29. })  

 

 

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

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

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

 

这样完成了，效果图：

微信小程序入门（四）详情页面(图1)

学习的过程中遇到了一个 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 代码如下：

  1. var rootDocment = 'https://www.itit123.cn';  
  2. function req(url,data,cb){  
  3.     wx.request({  
  4.       url: rootDocment + url,  
  5.       data: data,  
  6.       method: 'post',  
  7.       header: {'Content-Type':'application/x-www-form-urlencoded'},  
  8.       success: function(res){  
  9.         return typeof cb == "function" && cb(res.data)  
  10.       },  
  11.       fail: function(){  
  12.         return typeof cb == "function" && cb(false)  
  13.       }  
  14.     })  
  15. }  

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



免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有