标签：函数 Mobile 新闻 收藏 terminal experiment js 添加 页面
2022年夏季《移动软件开发》实验报告
| 姓名和学号？ | 王思恩，20020007070 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |
| 实验名称？ | 实验5：高校新闻网 |
| 博客地址？ | https://www.cnblogs.com/wang-si-en/ |
| Github仓库地址？ | https://github.com/w772552092/Mobile-software-development-experiment-4-source-code-.git |
（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
我使用的新闻和图片素材是老师提供的教学视频的作者提供的素材
1.项目创建和页面配置
与以往不同要在pages中添加三个页面(index:主页面，detail:新闻页面，my:收藏页面),还要添加utils文件夹并在其中添加common.js文 件
2.视图设计
导航栏设计
tabBar设计
tabBar设置两个部分一个显示主页另一个显示收藏和登录部分
3.页面设计
幻灯片部分包含可以滚动的视图循环播放swiperImg变量指向的图片
首页新闻部分同上用wx:for循环遍历newlist变量的内容，内部包含图片和文字部分
newsList原本包含新闻的id，地址，内容等信息，但后面为了能在全局使用就放入了commom.js文件中
效果
my页面中的登录页面
收藏页面（前期先把一些数据写死，后面实现了相应逻辑在去转为变量）
新闻页面detail的组件组成有标题，图片，内容，日期等部分
效果
新建utils文件夹并新建common.js文件
将新闻内容放在common.js里面方便其他页面的使用
3.逻辑实现
common.js中获取新闻列表的函数 返回包含所有新闻的数组
获取新闻内容，每个新闻都有独有的id遍历数组查看是否有对应的id的新闻，有即可通过变量message返回
暴露上面两个函数的接口，便于其他页面进行使用
在comon.js中获取新闻内容
在首页的text组件中绑定goToDetail函数，即点击首页新闻文字即可转跳到对应的页面
转跳函数获取id并转跳到相应页面
在新闻页面初始加载就通过得到对应的新闻
在my的页面中添加button组件用于标识是否添加进收藏用wx:if和wx:else控制是否收藏并绑定添加函数和取消收藏两个函数
isAdd变量初始值为false，表明初始值为未收藏
加入收藏的新闻会被加入缓存，取消收藏则会删除
从检测新闻是否在收藏夹里：如果有则从缓存中读取新闻，如果没有从commom.js的data中获取
被取代的部分可以删除了
my的登录部分添加button登录组件
从缓存中读取收藏新闻并更新收藏列表
登录逻辑实现和实验一一致，登陆成功后获取新闻列表
在收藏页面绑定转跳函数，当点击收藏页面的新闻时即可转调到对应的页面
三、程序运行结果
四、问题总结与体会
遇到的问题：
标签：函数,Mobile,新闻,收藏,terminal,experiment,js,添加,页面 来源： https://www.cnblogs.com/wang-si-en/p/16610918.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。