点击跳转到详情页
获取新闻详情 ku.qingnian8.com/dataApi/new…
| 参数名 | 介绍 | 是否必填 |
|---|---|---|
| cid | 栏目id | 必填 |
| id | 当前新闻id | 必填 |
返回值：
| 参数名 | 介绍 |
|---|---|
| id | id唯一标识 |
| title | 标题 |
| picurl | 缩略图地址 |
| posttime | 发布时间 |
| classid | 栏目id |
| author | 作者 |
| hits | 阅读量 |
| content | 详情内容 |
在点击事件中传值
先在标签中传递一个item，这个值就是接口自带的数据，网络数据请求方法之前已经写好了，只是没有获取具体参数，现在写上就行
<view class="content">
<view class="row" v-for="item in newsArr" :key = "item.id">
<newsStyle :item="item" @click.native="goDetail(item)"></newsStyle>
</view>
</view>
传参可以通过navigateto的url直接携带参数 在数据请求方法里打印这个item能获取到什么内容：
// 跳转到详情页
goDetail(item){
console.log(item);
uni.navigateTo({
url:"/pages/detail/detail"
})
},
随意在首页点击任意一条新闻进入详情页后，打印出来的接口数据如下：
用es6的模板字符串语法，把id拼进url里,这样，在新闻列表页面通过接口获取到的id就能通过url携带到详情页面去了
// 跳转到详情页
goDetail(item){
console.log(item);
uni.navigateTo({
url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
})
},
搜索框地址栏里就是从新闻列表页面携带过来的参数id和cid 现在无论从哪一个栏目，点击新闻列表进入到详情页，都能获取到cid和id了，接下来，通过cid和id，就能从接口拿到具体的内容，渲染到页面了
在详情页detail中接收参数
在detail页面中的onload函数中直接就可以拿到这个参数
onLoad(e) {
console.log(e);
}
进入detail页面后获取到的值
onload是uniapp自带的页面生命周期函数，能拿到其他页面传递的参数，文档在教程-页面-页面生命周期中
在data中声明一个变量接收这个值，声明的这个变量默认值为null 这个options就是一个对象了，把options赋值到data，整个detail页面都能拿到这个对象了
<script>
export default {
data() {
return {
options: null
};
},
onLoad(e) {
this.options = e
}
}
</script>
拿到id之后，就可以通过接口携带这个id去获取到对应这个页面的具体新闻内容了，每一条新闻列表对应一个新闻详情，就是通过id对应起来的
写好了方法之后，在onload中调用，就可以拿到属于这个页面的数据了
<script>
export default {
data() {
return {
options: null
};
},
onLoad(e) {
this.options = e;
// 在这里调用获取网络数据的方法,一进去页面就能执行
this.getDetail();
},
methods:{
getDetail(){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/detail.php",
// 这里url携带的参数就是cid和id，在options里，它是一个对象,data的参数也是一个对象
// 可以把options直接放到这里来,就是url要携带的参数
data:this.options,
success: res=>{
console.log(res);
}
})
}
}
}
</script>
其中，我们需要的数据就在data里
拿到接口返回数据之后，在获取接口数据的request方法中，就把他传出来，在data中定义一个变量detail接收这个值，这个值是一个对象，detail也定义成一个对象
现在detail这个自定义对象里的值就是接口获取回来的数据中data的值
现在接口中的data数据赋到detail对象中之后，在页面中就可以通过detail拿到需要的数据进行下一步的工作了
接下来就是通过插值表达式，把之前写死的数据替换成从接口拿到的数据
接口返回数据的一些问题：
1.接口获取到的时间是一个时间戳，需要先定义一个函数把时间戳转换成时间格式
2.返回的内容部分是一段富文本格式的数据，需要用uniapp自带的容器--基础容器：
rich-text标签来解析，插值表达式就写在这个标签的nodes属性里
3.获取的图片大小不一，在页面中需要用css重新写图片的渲染模式
1.解析富文本标签
<rich-text :nodes="detail.content"></rich-text>或者v-html也可以
<view v-html="detail.content"></view>
2.图片大小 使图片按最大宽度进行展示，高度自动等比缩放 解决文档：blog.csdn.net/weixin_4054…
通过给img设置最大宽度为100%不可信，在h5端有效，小程序端无效
用组件穿透的方法也不行，组件穿透就是通过父组件给子组件设置样式
因为微信小程序中，对自定义组件的rich-text标签，仅对class类型生效，而img是element属性，这个属性专门选择标签名，不选择标签内的属性名，所以通过img给图片设置最大宽度不生效
这篇文档的解决办法是通过类属性，直接获取img标签的属性alt，对页面内的alt添加属性就可以解决这个问题
[alt]{
max-width: 100%;
}
视频中是在获取网络数据的方法中，通过正则表达式，用全局匹配gi把图片部分的标签代码匹配出来，然后把max-width:100%加给style，用自己写的style替换从接口获取到的
getDetail(){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/detail.php",
// 这里url携带的参数就是cid和id,而且data的参数就是一个对象,options也是一个对象
// options直接放到这里来,就是这里要携带的参数
data:this.options,
success: res=>{
console.log(res);
// 解决微信小程序图片显示不全的问题
res.data.content = res.data.content.replace(/<img/gi,'<img style="max-width: 100%"')
// 将接口获取到的数据data赋值给自定义变量detail,在页面中就可以拿到值了
this.detail = res.data
}
})
}
3.时间戳
可以在uni的插件市场导入uni-dateformat 日期格式化组件，然后直接在项目中使用即可，不需要import引入，视频中是自己写一个库来用
时间戳变量要*1000才行，不知道什么原因
<view class="info">
<view class="author">编辑： {{detail.author}}</view>
<!-- <view class="time">发布日期： {{detail.posttime}}</view> -->
<uni-dateformat :date="detail.posttime*1000" format="yyyy/MM/dd hh:mm:ss"></uni-dateformat>
</view>
detail.posttime就是通过接口获取到数据的变量，h5端和小程序端都没问题
将详情页的顶部title显示成新闻标题，如下
可以通过之前学过的uni.setNavigationBarTitle来实现
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/detail.php",
// 这里url携带的参数就是cid和id,而且data的参数就是一个对象,options也是一个对象
// options直接放到这里来,就是这里要携带的参数
data:this.options,
success: res=>{
console.log(res);
// 解决微信小程序图片显示不全的问题
// res.data.content = res.data.content.replace(/<img/gi,'<img style="max-width: 100%"')
// 将接口获取到的数据data赋值给自定义变量detail,在页面中就可以拿到值了
this.detail = res.data
uni.setNavigationBarTitle({
title:this.detail.title
})
}
})
效果：h5端和小程序端都可用
