高校新闻网

 

2022年夏季《移动软件开发》实验报告

​

 

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

首页视图层设计

首页使用swiper组件来实现幻灯片效果,并在内部使用view组件实现数组循环。在swiper内部的block组件中使用wx:for属性,将js文件中的新闻数据复制到列表中,并在index.wxss文件中设计swiper组件和block组件等的样式。在js文件的data属性中预先录入几个实验数据,数据包括swiperImg,newsList的id,title,poster,add_date属性等。

个人中心页设计

个人中心页包括登录面板和我的收藏两个版块。登录面板用于显示用户的微信头像和昵称,"我的收藏“用于显示收藏在本地的新闻列表。在view的block组件中加入Image组件录入图片,同样使用wx:for属性将js文件中收藏栏中的新闻显示在个人中心页中。my.wxss文件中的样式与首页相同。同样在js文件中录入临时数据。

新闻页设计

当用户点击首页或收藏页内的新闻时,便会自动跳转到对应的新闻页,在detail.js文件中录入每条新闻对应的数据。

公共逻辑

将所有新闻的数据统一放在utils文件夹下的common.js文件中,在common.js文件中添加函数getNewsList和getNewsDetail,分别用于获取新闻列表信息和指定ID的新闻内容。最后使用module.exports语句暴露函数出口,方便各文件引用函数,然后在各界面的js文件顶端引用公共js文件,以便引用common.js中的函数。

首页逻辑

首页主要有两个功能需要实现,一是展示新闻列表,二是点击新闻标题可以跳转对应的内容界面进行浏览。新闻列表展示使用了{{newsList}},因此需要在js文件的onLoad函数中获取新闻列表,并更新到data属性的newsList参数中。为实现点击新闻实现跳转,为text组件添加goToDetail事件,使用wx.navtigatoTo函数进行页面的跳转,此时点击主页新闻时可跳转到对应的新闻页面。

新闻页逻辑

新闻业需要实现显示对应新闻和添加/取消新闻收藏两个功能。为了显示对应新闻,在detail.js文件中的onLoad函数中使用common.js文件中的getNewsDetailhh函数来获取对应新闻的id,并通过接受结果的code属性决定是否显示新闻界面。在detail.wxml文件中加入两个button属性并使用wx:if和wx:else属性,通过isAdd的值在页面中显示已收藏还是未收藏,同时更改onLoad函数,使用wx.getStorageSync函数获取缓存中的数据,判断当前新闻是否在收藏夹中,如果已存在则将内容更新为收藏夹中的内容,否则将内容更新为主页点击的新闻内容。添加addFavorites和cancelFavorites函数,将新闻内容添加或移除缓存并更换isAdd的值。

个人中心页逻辑

个人中心页需要实现获取用户信息,获取收藏列表和浏览收藏的新闻三个功能。为获取微信用户信息,在my.wxml文件中加入button组件并使用wx:if和wx:else属性,根据用户的登录状态显示对应内容。同时在button中添加getUserInfo和bindgetUserInfo事件,通过点击按钮使系统获取到用户信息。此时点击登录后会在页面中显示个人信息。为获取收藏列表,在my.js文件中加入getMyFavorites函数,通过wx.getStorageInfoSync函数读取addFavorites函数中的信息,将新闻内容添加到数组中,并更新新闻列表。并在getMyInfo函数中加入getMyFavorites函数来获取收藏列表。为浏览收藏的新闻,在my.wxml文件的text组件中加入goToDetail事件,根据新闻的id来跳转到对应的页面。

三、程序运行结果

主页

 

个人中心

 

新闻页

 

四、问题总结与体会

本次实验中,我学习了如何编写一个较为完整的、具有多页面的小程序。程序功能比较复杂,在实现各页面的逻辑功能时要注意各页面之间的联系,把需要用到的数据存储到缓存中,同时编写代码时要规范合理,不要出现代码拼写错误这种低级失误。同时要多使用样式布局,使界面更加美观。