一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1、一些初始操作:
本次实验需要用到3个页面,即首页、新闻页和个人中心页,他们的功能需求分别为: 首页功能需求如下:
(3)点击新闻列表可以打开新闻全文。
新闻页功能需求如下:
(1)阅读新闻全文的页面需要显示新闻标题、图片、正文和日期;
(2)允许 点击按钮将当前阅读的新闻添加到本地收藏夹中;
(3)已经收藏过的新闻也可以点击按钮取消收藏。
个人中心页功能需求如下:
(1)未登录状态下显示登录按钮,用户点击以后可以显示微信头像和昵称;
(3)收藏夹中的新闻可以直接点击查看内容;
包括项目创建、页面配置(创建页面文件、删除和修改文件、创建其他文件)、视图设计(导航栏设计、tabBar设计、页面设计),在此不过多赘述,详情请见Docs。
执行上述操作过程中的效果图:
新闻页初步设计效果图(还没有完成点击进入的功能,通过添加编译模式进行该页面):
个人页初步设计效果图:
2、逻辑实现
2.1 公共逻辑
初始新闻数据存放在公共JS文件(utils/common.js),其中自定义函数getNewsList和getiNewsDetail分别用于获取新闻列表信息和指定ID的新闻正文内容:
2.2 首页逻辑
实现:
-
展示新闻列表;
2.2.1 新闻列表展示
最终效果:
-
currentTarget代表触发事件的组件的一些属性值集合,将news.id数据取出来,
-
url:参数与路径之间使用
?
分隔,参数键与参数值用=
相连,不同参数用&
分隔;如 'path?key=value&key2=value2'
2.3 新闻页逻辑
2.3.1 显示对应新闻
最终效果:
2.3.2 添加/取消新闻收藏
最终效果图:
本地存储Storage中内容:
2.4 个人中心页逻辑
与实验一(《移动软件开发》实验报告_m0_53057170的博客-CSDN博客)操作相同,若使用getUserInfo和bindgetuserinfo只会显示灰色头像和“微信用户”,需使用getUserProfile和bindtap。
使用getUserInfo和bindgetuserinfo时Console显示信息:
使用getUserProfile和bindtap时Console显示信息:
使用getUserInfo和bindgetuserinfo时个人页效果图:
使用getUserProfile和bindtap时最终个人页效果图(最终效果,还没进行获取收藏列表时显示的是初始数据(与上图收藏列表相同):
2.4.2 获取收藏列表
2.4.3 浏览收藏的新闻
2.5 清除个人数据
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
遇到的问题
本地存储Storage ”logs“”影响收藏数据,如下图所示,正确收藏数量应为2,实际显示却为3.
解决方法:
删除“logs”栏。
参考文献:
《移动软件开发》实验报告_m0_53057170的博客-CSDN博客
微信小程序之绝对路径、相对路径、返回到某个页面 抛弃../../_幽幽靖的博客-CSDN博客_微信小程序图片相对路径
微信小程序中wxml中用data-id传出的数据在js中的获取方法_岁末Zzz的博客-CSDN博客
微信小程序:wx.navigateTo传值和跳转_Janson_Lin的博客-CSDN博客_微信小程序wx.navigateto传递数据