高校新闻微信小程序开发

m0_74074068

已于 2024-09-03 19:17:45 修改

阅读量1.1k

点赞数 22

文章标签：微信小程序小程序

于 2024-09-02 17:08:20 首次发布

本文链接：https://blog.csdn.net/m0_74074068/article/details/141824536

版权

2024年夏季《移动软件开发》实验报告

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

步骤1：创建项目

创建微信小程序项目：
- 打开微信开发者工具，选择“创建小程序”。
- 输入项目名称为“高校新闻小程序”，设置存储位置，选择合适的 AppID 或使用测试 AppID。
- 点击创建，工具将自动生成项目的基本目录结构，包括 pages 目录。
创建页面文件：
- 在 pages 目录下新建三个文件夹：index、detail 和 my，分别用于首页、新闻详情页和个人中心页。
- 在每个文件夹下创建对应的页面文件：.wxml、.wxss、.js 和 .json。

步骤2：配置小程序

配置 app.json：

在项目根目录找到 app.json 文件，配置页面路径、导航栏和 tabBar 设置。

具体配置如下：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/my/my"
  ],
  "window": {
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的新闻网"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/index.png",
        "selectedIconPath": "images/index_blue.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_blue.png",
        "text": "我的"
      }
    ]
  }
}

确保配置的页面路径和文件名准确无误，以避免页面加载失败。

步骤3：实现首页功能

首页布局（index.wxml）：

实现首页布局，包括幻灯片和新闻列表展示。
使用 <swiper> 组件创建幻灯片，包含三张自动播放的新闻图片。
使用 <view> 组件显示新闻列表，通过 wx:for 动态渲染新闻数据。

首页布局代码：

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
    <swiper-item>
      <image src="{{item.src}}" class='slide-image'/>
    </swiper-item>
  </block>
</swiper>
<view id='news-list'>
  <view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
    <image src='{{news.poster}}'></image>
    <text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}--{{news.add_date}}</text>
  </view>
</view>

首页样式（index.wxss）：

为幻灯片和新闻列表设置样式，保证页面美观一致。

首页样式代码：

swiper {
  height: 400rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}
#news-list {
  min-height: 600rpx;
  padding: 15rpx;
}
.list-item {
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid gray;
}
.list-item image {
  width: 230rpx;
  height: 150rpx;
  margin: 10rpx;
}
.list-item text {
  width: 100%;
  line-height: 60rpx;
  font-size: 10pt;
}

首页逻辑（index.js）：

引入公共逻辑模块 common.js，在页面加载时获取新闻列表数据并更新页面显示。
实现跳转到新闻详情页的功能。

首页逻辑代码：

var common = require('../../utils/common.js'); // 引用公共JS文件

Page({
  data: {
    swiperImg: [
      {src: 'http://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg'},
      {src: 'http://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg'},
      {src: 'http://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg'}
    ],
    newsList: []
  },

  onLoad: function(options) {
    let list = common.getNewsList();
    this.setData({
      newsList: list
    });
  },

  goToDetail: function(e) {
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    });
  }
});

步骤4：实现新闻详情页功能

新闻详情页布局（detail.wxml）：

设计新闻详情页的结构，显示新闻标题、图片、正文和日期。
添加收藏和取消收藏的按钮。

新闻详情页布局代码：

<view class='container'>
  <view class='title'>{{article.title}}</view>
  <view class='poster'>
    <image src='{{article.poster}}' mode='widthFix'></image>
  </view>
  <view class='content'>{{article.content}}</view>
  <view class='add_date'>时间:{{article.add_date}}</view>
  <button wx:if='{{isAdd}}' plain bindtap='cancelFavorites'>♥已收藏</button>
  <button wx:else plain bindtap='addFavorties'>♥点击收藏</button>
</view>

新闻详情页样式（detail.wxss）：

设置新闻详情页的样式，包括整体布局、标题、图片、正文、日期和按钮样式。

新闻详情页样式代码：

.container {
  padding: 15rpx;
  text-align: center;
}
.title {
  font-size: 14pt;
  line-height: 80rpx;
}
.poster image {
  width: 700rpx;
}
.content {
  text-align: left;
  font-size: 12pt;
  line-height: 60rpx;
}
.add_date {
  font-size: 12pt;
  text-align: right;
  line-height: 30rpx;
  margin-right: 25rpx;
  margin-top: 20rpx;
}
button {
  width: 250rpx;
  height: 100rpx;
  margin: 20rpx auto;
}

新闻详情页逻辑（detail.js）：

引入公共逻辑模块 common.js，实现新闻数据加载和收藏功能。

新闻详情页逻辑代码：

var common = require('../../utils/common.js');

Page({
  data: {},

  addFavorties: function(options) {
    let article = this.data.article;
    wx.setStorageSync(article.id, article);
    this.setData({
      isAdd: true
    });
  },

  cancelFavorites: function() {
    let article = this.data.article;
    wx.removeStorageSync(article.id);
    this.setData({
      isAdd: false
    });
  },

  onLoad: function(options) {
    let id = options.id;
    var newarticle = wx.getStorageSync(id);
    if (newarticle != '') {
      this.setData({
        article: newarticle,
        isAdd: true
      });
    } else {
      let result = common.getNewsDetail(id);

if (result.code == ‘200’) {
this.setData({
article: result.news,
isAdd: false
});
}
}
}
});
```

步骤5：实现个人中心页功能

个人中心页布局（my.wxml）：

设计个人中心页的结构，包括用户登录面板和收藏新闻列表。

个人中心页布局代码：

<view id='myLogin'>
  <block wx:if='{{isLogin}}'>
    <image id='myIcon' src='{{src}}'></image>
    <text id='nickName'>{{nickName}}</text>
  </block>
  <button wx:else open-type='getUserInfo' bindtap='getUserProfile'>未登录，点此登录</button>
</view>
<view id='myFavorties'>
  <text>我的收藏({{number}})</text>
  <view id='news-list'>
    <view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{item.id}}">
      <image src='{{news.poster}}'></image>
      <text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
    </view>
  </view>
</view>

个人中心页样式（my.wxss）：

设置个人中心页的样式，包括登录面板、头像、昵称和收藏列表。

个人中心页样式代码：

#myLogin {
  background-color: #33b7ce;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#myIcon {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
#nickName {
  color: white;
}
#myFavorties {
  padding: 20rpx;
}

个人中心页逻辑（my.js）：

实现用户登录、获取收藏列表和查看收藏详情的功能。

个人中心页逻辑代码：

var common = require('../../utils/common.js');

Page({
  data: {
    isLogin: false,
    number: 0,
    nickName: '未登录',
    src: '/images/index.png',
    newsList: [],
  },

  getUserProfile: function(e) {
    wx.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        let info = res.userInfo;
        this.setData({
          isLogin: true,
          src: info.avatarUrl,
          nickName: info.nickName
        });
        this.getMyFavorties();
      }
    });
  },

  getMyFavorties: function() {
    let info = wx.getStorageInfoSync();
    let keys = info.keys;
    let num = keys.length;
    let myList = [];
    for (var i = 0; i < num - 1; i++) {
      let obj = wx.getStorageSync(keys[i]);
      myList.push(obj);
    }
    this.setData({
      newsList: myList,
      number: num - 1
    });
  },

  goToDetail: function(e) {
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    });
  },

  onShow: function() {
    if (this.data.isLogin) {
      this.getMyFavorties();
    }
  }
});

三、程序运行结果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

四、问题总结与体会

问题总结与心得体会

问题总结

重复请求和数据处理冗余：
在新闻详情页中，存在从缓存获取数据后立即再请求网络数据的情况，这种重复请求会浪费资源，影响性能。应优先使用缓存数据，并确保在缓存不可用时才请求新数据。同时，提取和共享公共样式和逻辑代码，可以减少代码冗余，提升应用性能和可维护性。
用户体验优化：
在收藏和取消收藏功能中，缺少明显的用户反馈，例如操作成功提示。在用户体验方面，适当的反馈机制能够帮助用户确认操作结果，避免用户的困惑或误操作。

心得体会

通过本次实验，我深刻认识到规范的代码编写、逻辑严谨性和用户体验优化在开发中的重要性。在微信小程序开发中，保持代码一致性和良好的命名规范不仅提高了代码的可维护性，还减少了潜在的错误风险。优化数据处理流程、减少冗余请求，以及优先使用缓存数据，是提升小程序性能的有效方法。同时，完善用户交互中的反馈机制和界面美化，不仅能显著提升用户的使用体验，还能增强应用的整体吸引力。此外，重视用户隐私和数据安全，在设计和实现功能时严格控制数据的使用权限，是确保应用合规运营的基本要求。这次实验为我提供了宝贵的实践经验，也让我认识到在前端开发中持续学习和优化的重要性，为未来更复杂项目的开发奠定了坚实的基础。

m0_74074068

关注

22
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
高校新闻微信小程序开发

重复请求和数据处理冗余在新闻详情页中，存在从缓存获取数据后立即再请求网络数据的情况，这种重复请求会浪费资源，影响性能。应优先使用缓存数据，并确保在缓存不可用时才请求新数据。同时，提取和共享公共样式和逻辑代码，可以减少代码冗余，提升应用性能和可维护性。用户体验优化在用户体验方面，适当的反馈机制能够帮助用户确认操作结果，避免用户的困惑或误操作。
复制链接

扫一扫