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

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

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

@RequestMapping(value="findOne")@ResponseBodypublic 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

微信小程序入门教程集合：微信小程序入门教程全集

微信小程序入门四详情页面相关推荐

微信小程序学习(四)路由页面配置
创建路由,也就是把我们之前几个示例的页面连起来,可以相互跳转在app.json添配置是给主页面添加tab页代码 {"pages": ["pages/todo/to ...
微信小程序入门四：实现table效果
微信小程序中没有table组件,那么怎么实现呢? 其实使用多个view组件就可以实现,接下来就直接看代码吧 <view class="co ...
微信小程序入门（登录页面）
1.首先前往开发者工具下载安装开发工具: 2.安装后微信扫码,并填写自己的AppID选择自己的项目目录后登录: 登陆后点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预 ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
微信小程序跳转详情页面
今天,我们要实现如下的效果,进入详情页,获取产品的具体数据.本文请求的数据是本地的,实际开发是要通过ajax请求服务器中的产品数据,为了避免业务代码扰乱视听,只截取了关键代码~ 1.首先我们需要两个页 ...
微信小程序入门1--新建微信小程序页面
微信小程序入门1–新建微信小程序页面在新建微信小程序后会自动生成一个DEMO实例,我们可以在实例中修改自己所需的内容,当内容过多时,实例中的页面不足以满足我们的需求,因此需要新建微信小程序页面. 本 ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...

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

微信小程序入门四详情页面相关推荐

最新文章

热门文章