​姓名张世冲 学号24020007158​姓名和学号张世冲24020007158本实验属于哪门课程中国海洋大学26夏《移动软件开发》实验名称实验3高校新闻网GitHubiscreamiscream-art/Mobile_Software_Development_Lab一、实验内容一、实验目的1、综合运用微信小程序开发知识完成高校新闻网小程序的完整前端开发。 2、掌握页面路由、数据绑定、本地存储、用户授权等核心 API 与组件的使用。 3、实现新闻列表浏览、详情查看、收藏管理、个人中心的完整业务闭环。 4、熟练开发者工具调试与真机预览提升小程序项目工程实践能力。二、实验步骤一、前期准备新建小程序项目模板选择 JS 基础不使用云服务。 在app.json的pages数组添加pages/detail/detail、pages/my/my自动生成详情页、个人中心页。 清空初始模板代码清空index、app的 wxml/wxss/jsjs 使用编辑器自动补全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.navigateToid 通过 url 参数传递。 收藏依靠小程序本地 Storage 存储清除缓存收藏会丢失。二、实验结果首页登录并点赞收藏搜索退出登录后包括评论在内很多功能禁用三、问题总结与体会描述实验过程中所遇到的问题以及是如何解决的。有哪些收获和体会对于课程的安排有哪些建议。问题首页页面不显示解决办法函数填错文件检查并更改后显示成功问题游客登录和微信登录混淆解决办法删除游客登录选项