微信小程序搭建新闻列表(跟进上一篇博客案例)

本文旨在完善上一篇博客案例
后台接口文档
主要会用到的新语法罗列[

{发送请求篇:微信小程序如何向后端发送请求},

{页面跳转传递参数和接收参数:微信小程序页面跳转和接收参数},

{修改data中变量:拿到数据后如何对data中变量进行赋值},

]

微信小程序如何向后端发送请求

微信内置请求方法`wx:request({})`

wx.request({url: '请求地址',data: {请求携带参数},method: '请求方法',success: (res) => {请求成功后执行的回调函数}})

这么着配置还没有完全完成，这样发送请求会报当前域名不在合法的request 的合法域名列表中，需要进行以下操作

项目上线阶段可以这么玩

进入主页拖动找到以下模块

找到下面的服务器域名

将要请求的域名进行上述配置就可以正常发送请求了

在开发阶段也可以在编译器中进行配置

微信小程序页面跳转和接收参数

两种跳转详情页方式,区别在于头部导航不同

1.wx.navigateTo这种导航跳转是带返回的

2.wx.redirectTo这种导航方式是带返回主页的

通过什么方式将上级页面的参数传过来呢？
通过自定义属性赋值方法（我也不知道这么叫对不对）
例如：
在主页面结构中

<view class="post-container" data-id='{{item.id}}' bind:tap='goDetail'>

在.js文件中这样拿到当前data-id的传参是结果

  goDetail(event){const id=event.currentTarget.dataset.id}

goDetail(event){const id=event.currentTarget.dataset.idwx.navigateTo({url:`/pages/detail/detail?id=${id}`,// 通过问号传值的方式将id值传递给子页面})// wx.redirectTo({//   url: '/pages/detail/detail',// })},

在子页面的onLoad钩子函数的形参options可以获取到上级页面传递的参数

  /*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(options);},

输出结果为传递的参数对象

{id: "2"}

拿到数据后如何对data中变量进行赋值

这里有两种方法
1.this.setData({}) ：这种方法随模板刷新
2.this.data ：这种方法不随模板刷新
这里主要讲解一下第一种方法，因为第一种方法会响应模板渲染(就是当 data 中存储数据发生变化时模板中数据也会相应刷新)

this.setData({})语法

this.setData({data中变量名:拿到的数据
})

要注意的是如果用到this就必须要先声明

let that=this

因为在page页面内，this指向的页面对象的实例，但是在具体函数中，this指针的作用域已经发生了改变，它已经指向当前这个函数，这时候想指向页面内部数据，就需要再声明一个that变量用来存储页面实例。
举个栗子，this指针总是能告诉你自己身在何处，page页面好比一栋大楼，你在大楼里可以清楚的看到每一个房间的门牌号（相当于内部数据），当你进入一个具体的房间后，this就无法告诉你其他房间在哪里啦
，在这里如果不声明 this 也可以使用箭头函数

利用视图容器下的

scroll-view文档介绍可滚动的视图区域支持横向和纵向滚动

     <!-- 水平滑动类别导航 --><scroll-view class="scroll-view_H" scroll-with-animation="{{true}}" scroll-into-view='{{activeView}}'  scroll-x="true" style="width: 100%"><!-- 这里给scroll-into-view的点击设置动画 --><!-- data-id='demo{{item.id}}'传自定义参数 --><!-- bind:tap='changCate'获取当前点击的id --><!-- data-cateid='{{item.id}}点击后进行样式改变与 {{activeCateId===item.id?'active':''}}连用--><!-- 这里id不能以数字开头 --><view id='demo{{item.id}}' bind:tap='changCate' data-id='demo{{item.id}}' data-cateid='{{item.id}}' wx:for="{{catelist}}" class="scroll-view-item_H {{activeCateId===item.id?'active':''}}">{{item.name}}</view></scroll-view>

/* 水平导航样式*/
.scroll-view_H{position: fixed;/*将导航固定到页面顶部*/top:0;left: 0;background-color: #eee;padding: 10rpx 0 10rpx 0;white-space: nowrap;/*设置超出部分换行*/border-bottom: 1px solid #eee;
}
.scroll-view-item{height: 300rpx;
}/*子元素的设置*/
.scroll-view-item_H{display: inline-blockpadding: 0 20rpx;height: 30rpx;
}

// 点击类别执行操作changCate(event){// 1.获取当前点击的view的id，scroll-into-view='{{activeView}}'这个id主要是应用再scroll-view上的动画属性上的const id=event.currentTarget.dataset.id// 2.获取当前电机的类别id，这个属性来应用点击后样式类的class="scroll-view-item_H {{activeCateId===item.id?'active':''}}"const cateId=event.currentTarget.dataset.cateidconsole.log('当前点击id',cateId);this.setData({activeView:id,activeCateId:cateId,})this.getNewsByCate()},

如何实现以下功能

资讯列表中，点击类别尽情切换时，实现缓存
某个类别下如果没有数据，点击类别，加载数据
某个类别下如果已经有了书，点击类别，则不去请求新的数据，而是展示已有数据（这种方法可以减轻服务器的压力）

实现逻辑data中新创建一个列表，用于存储点击请求过的类别的id和数据对象
我定义在data中一个列表叫activeList,以下是他的数据结构

activeList:[{请求过的id:id值,请求到的数据content:content:content数据}]

在发送请求的事件处理函数中执行判断，当请求所对应的id在activeList中可以找到时就不再重新发送请求而是从activeList中把这个对象找出来再赋值给渲染页面的变量，如果找不到就从新向服务器发送一次请求

请求代码

// 根据类别获取资讯
getNewsByCate() {// 当前activeList中找不到当前用户所点击的类别，向服务器发送请求
if(this.data.activeList.find(item=>item.id===this.data.activeCateId)===undefined){wx.request({url: `http://minipro.daqitc.net/news/all/${this.data.activeCateId}`,data: {page: 1,pageSize: 10},method: 'GET',success: (res) => {const NewObj={id:this.data.activeCateId,content:[res.data.data.result]}this.data.activeList.push(NewObj)// 调用 setData 方法对 data 中的变量赋值this.setData({postsList: this.data.activeList.find(item=>{return item.id===this.data.activeCateId}).content})}})// 当前可以在activeList列表中可以找到用户当前点击的id与之对应，将读到的数据返回给渲染列表这里时postsList}else{this.setData({postsList:this.data.activeList.find(item=>{return item.id===this.data.activeCateId}).content})}},

渲染新闻列表的结构

<!-- 新闻列表 --><view class="news-wrap"><block wx:for="{{postsList[0]}}" wx:key="id"><view class="post-container" data-id="{{item.id}}" bind:tap="goDetail"><!-- 头像和发表日期 --><view class="post-author-date"><image class="post-author" src="https://img0.baidu.com/it/u=2106001853,3367829453&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image><text class="post-date">{{item.pubdate}}</text></view><!-- 标题 --><text class="post-title">{{item.title}}</text><!-- 封面图片 --><view class="post-image-wrap"><image data-img="{{item.cover_img}}" bind:tap="previewImg" wx:if="{{item.cover_type===1}}" class="post-image-one" src="{{item.cover_img}}"></image><image data-img="{{item.cover_img}}" bind:tap="previewImg" wx:if="{{item.cover_type===3}}" wx:for="{{item.cover_img}}" wx:for-item="imgItem" wx:key="index" class="post-image-three" src="{{imgItem}}"></image></view><!-- 文章简介 --><view class="post-desc">{{item.desc}}</view><!-- 收藏和评论数量 --><view class="post-like"><!-- <image class="post-like-image" src="/images/icon/collection.png"></image> --><text class="post-like-image iconfont icon-shoucang"></text><text class="post-like-font">99</text><!-- <image class="post-like-image" src="/images/icon/like.png"></image> --><text class="post-like-image iconfont icon-pinglun"></text><text class="post-like-font">{{item.comm_count}}</text></view></view></block></view>