姓名：张世冲 学号：24020007158
| 姓名和学号？ | 张世冲，24020007158 |
|---|---|
| 本实验属于哪门课程？ | 中国海洋大学26夏《移动软件开发》 |
| 实验名称？ | 实验3：高校新闻网 |
| GitHub | iscreamiscream-art/Mobile_Software_Development_Lab |
一、实验内容
一、实验目的
1、综合运用微信小程序开发知识，完成高校新闻网小程序的完整前端开发。 2、掌握页面路由、数据绑定、本地存储、用户授权等核心 API 与组件的使用。 3、实现新闻列表浏览、详情查看、收藏管理、个人中心的完整业务闭环。 4、熟练开发者工具调试与真机预览，提升小程序项目工程实践能力。
二、实验步骤
一、前期准备
新建小程序项目，模板选择 JS 基础，不使用云服务。 在app.json的pages数组添加pages/detail/detail、pages/my/my，自动生成详情页、个人中心页。 清空初始模板代码：清空index、app的 wxml/wxss/js，js 使用编辑器自动补全Page()、App()。 下载素材包demo4_file.zip，解压后把images、utils文件夹放到项目根目录，utils/common.js提供模拟新闻数据接口。
二、视图配置（app.json 全局配置）
导航栏 window 配置：设置导航栏背景色#328EEB、标题 “我的新闻网”、文字白色。 tabBar 底部栏配置：配置两个 tab，首页pages/index/index、我的pages/my/my，配置普通 / 选中状态图标，设置文字颜色与选中高亮色。
三、页面视图开发
1、首页 index wxml：使用<swiper>组件实现自动轮播（指示点、自动播放、切换间隔）；使用wx:for循环渲染轮播图。 新闻列表：wx:for循环渲染新闻条目，绑定点击事件goToDetail，携带新闻 id。 wxss：设置轮播容器、图片尺寸；新闻列表样式写进app.wxss作为全局样式，供个人中心复用。
2、个人中心页 my wxml：登录模块用wx:if/wx:else，未登录显示登录按钮，登录后展示头像昵称；收藏区复用全局news‑list样式，循环渲染收藏新闻，绑定跳转详情事件。 wxss：设置登录区域背景、头像圆形样式、收藏区边距。新闻详情页 detail wxml：布局新闻标题、海报图片、正文、发布日期；两个按钮wx:if/wx:else切换 “已收藏 / 未收藏”，分别绑定收藏、取消收藏函数。 wxss：页面边距、标题居中等排版；海报图片宽度改为 700rpx 解决图片不显示问题。
四、业务逻辑实现
所有页面 js 头部引入工具模块：var common = require('../../utils/common.js')
1、首页 index.js onLoad：调用common.getNewList()获取模拟新闻数据，setData 赋值给页面newsList；轮播图数据源也在此处赋值。 goToDetail(e)：获取点击新闻的data‑id，调用wx.navigateTo跳转到 detail 页面，url 拼接新闻 id 参数。
2、新闻详情 detail.js onLoad(options)：接收传过来新闻 id； 读取本地缓存wx.getStorageSync(id)，如果有数据，代表已收藏，渲染新闻，设置isAdd:true； 无缓存则调用common.getNewsDetail(id)获取新闻详情，设置isAdd:false。 addFavorites()：把当前新闻对象存入本地存储wx.setStorageSync(id,article)，标记为已收藏。 cancelFavorites()：wx.removeStorageSync(article.id)删除本地缓存，标记未收藏。
3、个人中心 my.js getUserInfo()：调用wx.getUserProfile获取微信用户头像、昵称，修改isLogin登录状态。 getMyFavorites()：读取全部本地 storage keys，遍历取出所有收藏新闻，组装成收藏列表，更新收藏数量与列表数据。 onShow()：页面每次显示时，如果已经登录，调用getMyFavorites()刷新收藏列表。 goToDetail(e)：拿到新闻 id，跳转新闻详情页面。
五、功能测试
调试：首页轮播自动播放，点击新闻跳转详情。 详情页：收藏、取消收藏，本地存储生效。 个人中心：点击登录获取微信头像昵称；登录后展示收藏新闻；未登录收藏列表为空；点击收藏新闻可以跳转详情。
六、实验注意点
detail 页面 poster 图片不要写 width:100%，改为 700rpx。 页面跳转使用wx.navigateTo，id 通过 url 参数传递。 收藏依靠小程序本地 Storage 存储，清除缓存收藏会丢失。
二、实验结果
首页
登录并点赞收藏
搜索
退出登录后包括评论在内很多功能禁用
三、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
问题：首页页面不显示
解决办法：
函数填错文件，检查并更改后显示成功
问题：游客登录和微信登录混淆
解决办法：
删除游客登录选项
