一、实验内容1. 实验目的本实验主要学习微信小程序多页面开发的基本流程通过制作一个以“中国海洋大学新闻网”为主题的高校新闻小程序进一步熟悉微信开发者工具的使用方法。通过本次实验学习掌握微信小程序中 WXML、WXSS 和 JavaScript 三部分内容的作用了解多页面结构设计、页面样式调整、数据传递、事件处理、页面跳转以及本地数据存储等功能的实现方法。同时在完成实验基本要求的基础上对新闻网进行了适当的功能和界面优化增加新闻收藏、取消收藏、我的收藏、浏览历史、用户登录和退出登录等功能使最终的小程序更加完整。此外本次实验将新闻内容更新为2026年中国海洋大学近期新闻并根据校园新闻类应用的特点对页面 UI 进行优化使整体界面更加简洁、美观。2. 实验环境本实验使用的软件和开发环境如下项目内容操作系统Windows开发工具微信开发者工具开发语言JavaScript页面文件WXML、WXSS数据存储微信小程序本地缓存文档工具Typora图片工具AI图片生成工具开发过程中主要使用 WXML 编写页面结构WXSS 完成页面样式设计JavaScript 实现数据处理、事件响应、页面跳转、新闻收藏以及登录状态管理等功能。3. 新闻数据及图片资源准备实验开始阶段首先准备新闻网所需要的新闻数据和图片资源。为了使小程序更加贴近实际校园新闻网本次实验将新闻内容更新为2026年中国海洋大学近期新闻。目前使用的新闻图片包括news1.jpg news2.jpg news3.jpg news4.jpg news5.jpg news6.jpg同时准备了首页新闻轮播图片swiper1.jpg swiper2.jpg swiper3.jpg首页和个人中心还使用了index1.png index2.png my1.png my2.png等图片资源。所有图片统一保存在项目的images文件夹中。通过统一管理图片资源并保证代码中的图片名称与实际文件名称一致解决了新闻图片无法正常显示的问题。4. 微信小程序项目创建使用微信开发者工具创建新的微信小程序项目。项目主要目录结构如下高校新闻网 ├── images │ ├── index1.png │ ├── index2.png │ ├── my1.png │ ├── my2.png │ ├── news1.jpg │ ├── news2.jpg │ ├── news3.jpg │ ├── news4.jpg │ ├── news5.jpg │ ├── news6.jpg │ ├── swiper1.jpg │ ├── swiper2.jpg │ └── swiper3.jpg │ ├── pages │ ├── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ │ │ ├── detail │ │ ├── detail.js │ │ ├── detail.json │ │ ├── detail.wxml │ │ └── detail.wxss │ │ │ └── my │ ├── my.js │ ├── my.json │ ├── my.wxml │ └── my.wxss │ ├── utils │ └── common.js │ ├── app.js ├── app.json ├── app.wxss └── sitemap.json本次实验主要使用index、detail和my三个页面。其中index页面用于显示新闻网首页detail页面用于显示新闻详情my页面用于显示用户信息、收藏新闻和浏览历史。在app.json中配置对应页面使微信开发者工具能够正确加载各个页面。5. 高校新闻网首页设计本实验通过修改index页面完成高校新闻网首页设计。首页主要包括以下几个部分1新闻网顶部区域在首页顶部设置“中国海洋大学新闻网”标题。为了使界面更加简洁顶部导航区域采用白色背景并使用较深颜色的文字。同时通过调整字体大小、间距以及页面边距使顶部区域与下面的新闻内容保持统一。2新闻轮播图在首页顶部设置新闻轮播区域。使用微信小程序的swiper组件实现图片自动轮播。轮播图片使用swiper1.jpg swiper2.jpg swiper3.jpg通过设置自动播放和轮播指示点使用户进入首页以后能够直观看到校园新闻。同时对图片增加圆角效果使页面视觉效果更加美观。3关键词搜索框为了方便用户快速查找新闻在首页增加关键词搜索功能。用户可以在搜索框中输入新闻关键词例如科研 研究生 调研 基金输入关键词以后程序会根据用户输入的内容对新闻进行筛选。例如输入“科研”系统会自动查找标题中包含“科研”的相关新闻。当没有符合条件的新闻时页面会显示相应的空状态提示。通过增加搜索功能使用户能够更加快速地找到自己感兴趣的校园资讯。4新闻分类在搜索框下方增加新闻分类功能。目前设置全部 学校 科研三个分类。“全部”用于显示所有新闻“学校”主要显示学校会议、学校工作以及学校相关活动等资讯“科研”主要显示科研成果、科研项目以及科技创新等相关资讯。用户点击不同分类后新闻列表会根据当前分类自动进行筛选。同时选中的分类会使用主题色进行突出显示使用户能够清楚地知道当前所选择的分类。5校园资讯轮播区域下方设置“校园资讯”模块。通过 JavaScript 获取新闻数据并使用wx:for循环显示新闻列表。每条新闻主要包括新闻图片新闻标题发布日期收藏状态。用户点击对应新闻以后可以进入新闻详情页面。6. 新闻数据管理为了方便统一管理新闻信息本实验将新闻数据放在utils/common.js文件中。每条新闻包含id title poster content add_date例如{id:2026082801,title:山东省人民政府副省长、党组成员闫剑波来校调研,poster:/images/news1.jpg,content:2026年8月山东省人民政府副省长、党组成员闫剑波来中国海洋大学调研。,add_date:2026-08-28}本次实验使用的主要新闻包括山东省人民政府副省长、党组成员闫剑波来校调研中国船舶集团有限公司董事长、党组书记徐鹏来校调研学校2026年度国家自然科学基金再创佳绩中国海洋大学2026级研究生开学典礼举行中国海洋大学2026级研究生入学报到学校领导班子2026年暑期工作会召开。同时在common.js中设计getNewsList()用于获取新闻列表。设计getNewsDetail(newsID)用于根据新闻编号获取新闻详情。通过这种方式使首页新闻列表和详情页面能够使用同一份新闻数据。7. 新闻详情页面设计首页新闻列表中的每一条新闻都绑定点击事件。点击新闻以后通过data-id保存当前新闻编号并使用wx.navigateTo()跳转到新闻详情页面。详情页面根据传递过来的新闻编号调用getNewsDetail(newsID)获取对应新闻内容。新闻详情页面主要包括新闻标题新闻图片新闻发布日期新闻正文收藏按钮。这样用户可以从首页快速进入新闻详情并查看完整的新闻内容。8. 新闻收藏功能实现为了增加小程序的实用性在新闻详情页面中加入了收藏功能。用户点击收藏按钮后程序会将当前新闻保存到微信小程序本地缓存中。主要使用wx.setStorageSync()保存收藏数据。当用户再次进入新闻详情页面时程序会读取本地缓存并判断当前新闻是否已经收藏。如果已经收藏则显示已收藏如果没有收藏则显示收藏再次点击已经收藏的新闻可以取消收藏。取消收藏时使用wx.removeStorageSync()删除对应收藏数据。通过这种方式实现新闻收藏和取消收藏功能。9. 收藏状态同步在实现收藏功能的过程中对收藏状态进行了进一步优化。最初开发时曾出现所有新闻都显示“已收藏”的问题。经过检查发现收藏状态判断没有正确根据每一条新闻的id进行判断。修改以后程序根据新闻唯一编号判断当前新闻是否存在于收藏列表中。因此实现未收藏新闻 → 显示“收藏” 已收藏新闻 → 显示“已收藏”不同新闻之间的收藏状态互不影响。同时收藏数据保存到本地缓存中因此重新进入页面以后仍然能够正确读取收藏状态。10. 个人中心页面设计为了方便用户查看自己的信息和收藏内容本实验设计了“我的”页面。未登录状态下页面显示登录界面。登录界面主要包括海大新闻网标识登录提示微信登录按钮暂不登录选项。用户完成登录以后页面会显示用户信息。登录后的个人中心主要包括用户头像用户昵称登录状态我的收藏数量浏览历史数量我的收藏浏览历史退出登录。通过这些内容使个人中心具有较完整的用户管理功能。11. 用户登录与退出登录功能为了使小程序具有完整的用户操作流程本实验增加了登录和退出登录功能。在未登录状态下isLogin false页面显示登录界面。点击“微信登录”以后程序修改登录状态并显示用户个人中心。登录以后可以看到用户头像 用户昵称 微信用户 海大新闻网等信息。同时增加“退出登录”按钮。用户点击退出登录以后程序重新设置登录状态并返回未登录界面。这样形成完整的登录 → 使用小程序 → 退出登录操作流程。12. 我的收藏功能在个人中心页面中设计“我的收藏”模块。当用户收藏新闻以后该新闻会自动出现在个人中心的收藏列表中。收藏列表主要显示新闻图片新闻标题新闻日期进入详情的箭头。用户点击收藏新闻后可以再次进入新闻详情页面。同时在个人中心顶部显示当前收藏数量。例如1 我的收藏表示当前已经收藏1条新闻。进入个人中心时通过onShow()生命周期函数重新读取本地缓存使收藏数据能够及时同步。13. 浏览历史功能为了进一步完善小程序功能在个人中心增加了“浏览历史”。当用户进入新闻详情页面以后程序会将当前浏览的新闻保存到本地历史记录中。个人中心的“浏览历史”区域会显示用户之前浏览过的新闻。同时提供“清空”功能。用户点击“清空”以后可以删除之前保存的浏览记录。通过该功能可以方便用户再次查看之前浏览过的校园新闻。14. TabBar底部导航设计为了方便用户在不同功能页面之间进行切换在小程序底部设置 TabBar。主要包括首页 我的两个入口。首页对应新闻网首页我的对应个人中心。同时使用index1.png index2.png my1.png my2.png作为底部导航栏相关图标使选中和未选中状态更加明显。通过 TabBar用户可以快速切换首页和个人中心。15. 页面样式设计为了提升小程序整体视觉效果对页面进行了优化设计。主要包括1采用海洋蓝作为整体主题颜色2使用卡片式布局展示新闻和用户信息3增加圆角和阴影效果4优化新闻图片比例5调整字体大小和颜色6优化页面间距7优化登录按钮布局8统一首页、详情页和个人中心的视觉风格。通过以上优化使小程序整体界面更加简洁、统一也更加符合移动端应用的视觉特点。二、问题总结与体会1. 实验过程中遇到的问题在本次实验开发过程中虽然基本功能能够正常实现但是在新闻数据加载、图片资源、页面跳转、收藏功能、登录界面以及真机调试等方面遇到了一些问题。通过不断检查代码和进行调试最终解决了这些问题。1校园资讯无法正常显示问题实验初期运行小程序时首页“校园资讯”区域没有显示新闻内容。经过检查发现首页没有正确获取common.js中保存的新闻数据。后来在index.js中正确引入公共数据文件并调用getNewsList()获取新闻列表。然后使用this.setData()将新闻数据传递到 WXML 页面。最终解决了校园资讯为空的问题。通过这个问题我进一步理解了公共数据文件与页面数据之间的联系。2新闻无法点击进入详情页面问题新闻列表正常显示以后最初点击新闻无法进入详情页面。经过检查发现新闻列表没有正确绑定点击事件同时没有正确传递当前新闻的id。后来使用bindtap>wx.navigateTo()跳转到详情页面。详情页面获取新闻编号以后再通过getNewsDetail()获取对应新闻。最终实现了新闻列表到详情页面的正常跳转。3所有新闻都显示“已收藏”问题在实现新闻收藏功能以后曾经出现明明没有收藏新闻但是所有新闻下面都显示“已收藏”的问题。经过检查发现收藏状态判断逻辑存在问题没有根据当前新闻id判断新闻是否真正存在于收藏列表。后来重新修改判断逻辑根据每条新闻唯一的id进行判断。修改以后没有收藏 → 收藏 已经收藏 → 已收藏不同新闻之间不会相互影响。最终解决了所有新闻都显示“已收藏”的问题。4收藏以后没有记录问题在修改收藏逻辑以后又出现收藏新闻以后个人中心没有及时显示记录的问题。经过检查发现个人中心页面没有及时重新读取最新的收藏缓存。因此使用onShow()生命周期函数。每次进入“我的”页面时重新读取本地收藏数据并更新收藏数量和收藏列表。最终实现了收藏数据的正常同步。通过这个问题我进一步理解了微信小程序页面生命周期函数的作用。5真机调试上传失败问题在进行真机调试时曾出现以下错误Error: 上传失败网络请求错误 错误码80051 source size 5139KB exceed max limit 2MB该错误表示当前小程序真机调试需要上传的源码包大小超过了允许的限制。虽然images文件夹中的单张图片通常只有几十 KB但微信开发者工具计算的是整个项目源码包的大小而不仅仅是某一张图片。因此对项目文件进行了检查并清理无关文件和不需要上传的资源。通过排查项目整体资源大小可以减少源码包体积提高真机调试成功率。通过这个问题我认识到小程序开发不仅需要关注代码功能还需要注意项目资源管理和源码包大小。2. 实验收获与体会通过本次实验我完整体验了微信小程序从项目创建、页面设计、功能开发到调试优化的基本过程。相比实验2的个人名片小程序本次实验涉及多个页面以及更多交互功能因此对微信小程序开发有了更加深入的理解。首先我进一步掌握了 WXML、WXSS 和 JavaScript 三部分内容之间的配合方式。其中WXML 主要负责页面结构设计WXSS 主要负责页面样式控制JavaScript 主要负责页面逻辑和交互功能。通过新闻首页和详情页面的开发我学习了如何使用wx:for循环显示新闻列表以及如何使用事件绑定和wx.navigateTo()实现页面跳转。其次通过common.js新闻数据文件我进一步理解了公共数据的管理方式。通过新闻id将新闻列表和详情页面联系起来使页面之间能够共享同一份新闻数据。在收藏功能开发过程中我学习了微信小程序本地缓存的使用方法。通过wx.setStorageSync()wx.getStorageSync()wx.removeStorageSync()实现收藏数据的保存、读取和删除。同时通过onShow()实现个人中心数据刷新使收藏数据能够及时同步。此外本次实验还增加了用户登录、退出登录和浏览历史等功能使我进一步了解了小程序中的状态管理和页面生命周期。在页面设计方面我也对界面进行了比较多的调整。通过海洋蓝主题、卡片式布局、圆角、阴影、字体层次和合理间距使最终页面相比基础页面更加美观。在解决图片路径、收藏状态、新闻跳转以及真机调试等问题的过程中我也认识到程序开发不仅需要关注代码本身还需要注意项目文件结构、资源管理以及实际运行效果。当程序出现问题时需要结合控制台错误信息、页面显示效果和代码逻辑进行综合分析。通过本次实验我进一步提高了自己的微信小程序开发能力和问题分析能力也为后续学习网络请求、云数据库以及更加复杂的移动应用开发功能打下了基础。