一、实验内容

本次实验基于高校新闻网项目，综合运用微信小程序的视图布局、页面路由、本地缓存及事件绑定机制，模仿主流新闻客户端实现了一个功能完备的简易高校新闻小程序。结合个人创意想法，主要完成了以下核心内容的设计与实现：

1. 项目整体架构与配置：

   • 创建新闻网小程序项目，配置浅蓝色（#328EEB）自定义顶部导航栏与底部 tabBar 导航。
   • 完成 index（首页）、detail（详情页）以及 my（个人中心页）的三大核心页面目录与基础文件搭建。

2. 首页功能设计：

   • 引入支持自动轮播与圆点指示器的 <swiper> 幻灯片组件。
   • 设计并实现海大新闻图文列表，严格规范每条新闻的排版样式（如正文段首空两格）。
   • 增加专题分类导航栏、带搜索记录功能的智能搜索栏，以及右下角“回到顶部”的快捷悬浮按钮。
   • 采用带有模糊效果的定制背景图，提升整体界面的清新视觉质感。
     

3. 新闻详情与拓展功能：

   • 实现点击任意新闻列表项无缝跳转至详情页，并准确传递与接收新闻 ID。
   • 完善本地收藏与取消收藏夹功能，支持通过便捷手势或列表右滑快速移除收藏。
   • 增加将新闻文字内容下载并导出为 Word 文档的创新功能。
     

4. 个人中心（我的）功能设计：

   • 实现底部授权弹窗与微信用户信息授权登录，成功获取并动态渲染微信头像与昵称。

   • 支持点击头像或昵称旁的修改符号自定义更改个人资料。

   • 实现本地缓存数据（StorageSync）的高效读取，动态展示“我的收藏”列表并支持直接点击浏览。
     
     为了更直观地展示整个高校新闻网小程序的数据流向与页面跳转逻辑，其整体结构设计如下所示：

[ 用户端操作 ]
      │
      ├─► 1. 首页 (index)
      │     ├── 幻灯片轮播 (Swiper)
      │     ├── 专题分类与智能搜索 (带有搜索记录)
      │     └── 新闻列表 ──(点击跳转/传递ID)──► 2. 新闻详情页 (detail)
      │                                             ├── 图文正文展示
      │                                             ├── 本地收藏 / 右滑取消
      │                                             └── 导出Word文档
      │
      └─► 3. 个人中心 (my)
            ├── 微信授权登录 (获取头像与昵称)
            ├── 个人资料修改 (自定义头像/昵称)
            └── 我的收藏夹 ──(读取本地缓存)──► 直接点击查看详情

二、问题总结与体会

在本次微信小程序开发实验过程中，遇到了以下问题及相应的解决方法：

1. 图片样式适配与显示异常：
   • 问题：在 detail 详情页面的 WXSS 样式中，若将 .poster image 的 width 属性设置为 100%，在部分真机或特定布局下图片会出现无法正常渲染或显示异常的情况。
   • 解决：根据实验指导与实际调试，将图片宽度调整为 700rpx，并结合 mode="widthFix" 属性后，图片能够稳定自适应显示。
2. 本地缓存与收藏状态的实时同步：
   • 问题：在个人中心页（my）中，当用户在详情页取消收藏后返回“我的”页面，收藏列表无法实时刷新。
   • 解决：通过在 my.js 的 onShow 生命周期中调用获取收藏列表的 getMyFavorites 函数，确保每次页面显示时都能重新加载本地缓存（StorageSync），从而保证了收藏状态的实时同步。
3. 拓展功能的逻辑闭环：
   • 体会：在实现文字下载为 Word 以及右滑“取消收藏”等个性化想法时，需要理清前端组件事件绑定（如 bindtouchstart/bindtouchend 或自定义交互）与本地文件 API 的配合。通过查阅微信小程序官方文档并结合基础组件，顺利打通了数据交互链路。

通过本次实验，我系统地掌握了微信小程序的页面生命周期、数据绑定、本地缓存（StorageSync）、组件化布局（Flexbox）以及事件传参机制。不仅完整复现了高校新闻网的基本架构，还通过融入个人想法（如搜索记录、快速右滑取消收藏、一键导出Word等）大幅提升了应用的实用性与交互体验，对移动端混合开发有了更深刻的理解。