微信小程序开发项目实战（微课版）课件 5-2 课件-新闻列表页面的实现.pptx

项目五新闻页面模块开发任务二新闻列表页面的实现Newslistpageimplementation

通过前面的学习，读者已经知道数据可以定义在JS文件的data对象中。当数据较多时，或者当没有条件提供数据接口时，可以采用模拟数据进行代替。例如，可以将数据定义在utils/common.js文件中。项目五新闻页面模块开发任务描述

MOCK数据使用Mock数据可以保护真实数据源中的敏感信息，避免因为开发和测试而导致真实数据泄露的风险。真实数据的保护Mock数据能够提供可用的虚拟数据，使得开发人员和测试人员能够在没有完整的系统和真实数据的情况下进行工作。快速开发和测试Mock数据允许前后端团队并行开发，以提高整个开发过程的效率。独立开发和测试0201Mock数据优点03Mock数据是指在软件开发过程中使用的一种模拟数据，它用于模拟真实数据源的数据，具有相似的数据结构和字段。这种数据通常在真实数据不可用或无法获取时使用，以便在开发、测试和演示过程中提供可用的虚拟数据。

模拟数据的定义其中，id表示每条数据的编号，title表示新闻的标题，cate_id表示新闻分类编号，poster表示卡片新闻的贴图，desc表示卡片新闻的摘要，content表示新闻内容详情，views表示浏览数量，favorites表示收藏数量，addtime表示新闻添加时间，添加时间引入了小程序默认的util文件中定义的时间格式，使用Date()函数获取当前系统时间。bgmusic表示背景音乐，包括了音乐地址和音乐名称。下面提供了1条新闻列表数据作为示例。读者可以根据视图界面的功能，自行添加或修改新闻内容。

模拟数据的定义import?util?from?../utils/utilconst??news=[??{??????id:01,???title:最美梅花园,???cate_id:1,???poster:/images/news/news1.jpg,???desc:“萝岗香雪”曾是羊城八景之一,???content:?不同种类的梅花将陆陆续续开放两个多月...,???views:1250,?????//浏览数量???favorites:?63,?//收藏数量???addtime:util.formatTime(new?Date()),???bgmusic:{?url:/music/4.mp3,title:四季歌}}]

模拟数据的定义 constnews=[代码略] exports.getNewsList=()={ letnewslist=[] for(vari=0;inews.length;i++){ letobj={} obj.id=news[i].id obj.title=news[i].title obj.poster=news[i].poster obj.desc=news[i].desc obj.views=news[i].views obj.favorites=news[i].favorites obj.content=news[i].content obj.addtime=news[i].addtime obj.bgmusic=news[i].bgmusic newslist.push(obj) } returnnewslist; }getNewsList()函数将前面所定义好的news数据使用for循环的方式读取，调用push()方法写到newslist数组里，最后返回newslist数组。

模拟数据的定义 exports.getNewsDetail=(newsid)={ letnewsDetail={}; for(vari=0;inews.length;i++){ if(newsid==news[i].id){ newsDetail=news[i]; break; } } returnnewsDetail; }在utils/common.js文件中定义getNewsDetail()函数通过传入的参数newsid来获取需要读取的新闻详情。

新闻列表页面数据绑定 varcommon=require(../../utils/common.js) Page({ data:{ newsList:[] }, onLoad:function(options){ letnewsLis