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

冷不防 2022-09-27 14:28 197阅读 0赞

![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY][]

前三章基本完成文章列表页面的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][https_mp.weixin.qq.com_debug_wxadoc_dev_component_navigator.html]）

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

这样完成了，效果图：

![20170309100125703][]

学习的过程中遇到了一个 400 的错误，问题是在于wx.request 的header （官方文档：[https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html\#wxrequestobject][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][http_download.csdn.net_detail_qq_19558705_9774984]

微信小程序入门教程集合：[微信小程序入门教程全集][Link 1]

[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY]: /images/20220708/50da67462fae4b638e86efb372e04dcc.png
[https_mp.weixin.qq.com_debug_wxadoc_dev_component_navigator.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html
[20170309100125703]: /images/20220708/a6f00a68aed74ebb9465edc41821c7ed.png
[https_mp.weixin.qq.com_debug_wxadoc_dev_api_network-request.html_wxrequestobject]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject
[http_download.csdn.net_detail_qq_19558705_9774984]: http://download.csdn.net/detail/qq_19558705/9774984
[Link 1]: http://www.itit123.cn/blog/detail/19.html