OUC软件开发实验4

最新推荐文章于 2023-01-09 12:02:28 发布

雨君老师

最新推荐文章于 2023-01-09 12:02:28 发布

阅读量304

点赞数

分类专栏：软件开发实验文章标签：前端 html javascript

本文链接：https://blog.csdn.net/yujun1_11/article/details/126462796

版权

微信小程序新闻模拟前端开发数据模拟用户交互

关键词由CSDN通过智能技术生成

软件开发实验专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实验4：高校新闻网

本实验来自于周文洁老师的《微信小程序开发实战》第十五章。在学习了小程序的基础知识和各类API以后，尝试独立动手创建一个小程序前端综合设计实例。我们将从零开始详解如何模仿网易新闻实现一个基于模拟数据的简易高校新闻小程序。

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

项目创建

创建一个空白文件夹

页面配置

相比于前两个实验，此实验的页面多了两个，所以需要额外创建创建其他文件。在app.json文件pages属性中继续追加detail和my目录，添加图片文件和创建公共js文件。

之后是很常规的删除和修改文件。

视图设计

导航栏和tabBar设计

在app.json中对Window属性进行重新配置来自定义导航栏效果，同时追加tarBar的相关属性代码

首页设计

首页主要包括两部分内容，即幻灯片滚动和新闻列表。使用如下组件：

幻灯片：组件

新闻列表：容器，内部使用数组循环

个人中心页设计

个人中心页主要包含两个板块，即登录面板和“我的收藏”。登录面板用于显示用户的微信头像和昵称，“我的收藏”用于显示收藏在本地的新闻列表。

新闻页设计

新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。

由于暂时没做点击跳转的逻辑设计，所以可以先在开发者工具中增添编译模式，追加对于detail页面的直接浏览效果。

计划使用组件进行整体布局

逻辑实现

公共逻辑

数据原本应该使用由网站群管理平台提供的新闻接口，由于隐私安全等一系列问题，采用了模拟数据进行代替。

在公用文件common.js中添加自定义函数getNewsList和getNewsDEtai，分别用于获取新闻列表信息和指导ID的新闻正文内容。

//获取新闻列表
function getNewsList() {
  let list = [];
  for (var i = 0; i < news.length; i++) {
    let obj = {};
    obj.id = news[i].id;
    obj.poster = news[i].poster;
    obj.add_date = news[i].add_date;
    obj.title = news[i].title;
    list.push(obj);
  }
  return list; //返回新闻列表
}

//获取新闻内容
function getNewsDetail(newsID) {
  let msg = {
    code: '404', //没有对应的新闻
    news: {}
  };
  for (var i = 0; i < news.length; i++) {
    if (newsID == news[i].id) { //匹配新闻id编号
      msg.code = '200'; //成功
      msg.news = news[i]; //更新当前新闻内容
      break;
    }
  }
  return msg; //返回查找结果
}

最后还需要在common.js中使用module.exports语句暴露函数出口

// 对外暴露接口
module.exports = {
  getNewsList: getNewsList,
  getNewsDetail: getNewsDetail
}

首页逻辑

首页主要有两个功能需要实现，一是展示新闻列表，二是点击新闻标题可以跳转对应的内容页面进行浏览。

新闻列表使用了{{newsList}}，因此需要在页面JS文件的onLoad函数中获取新闻列表，并更新到data属性的newsList参数中。

同时要使点击新闻标题即可实现跳转，需要为新闻列表项目添加点击事件，为组件添加了自定义触摸事件函数goToDetail，并使用data-id属性携带新闻ID编号。

新闻页逻辑

新闻页主要有两个功能需要实现，一是显示对应新闻，二是可以添加/取消新闻收藏。

在首页逻辑中已经实现了页面跳转并携带了新闻ID编号，现在需要在新闻业接收ID编号，并查询对应的新闻内容。

修改detail.wxml代码，追加两个组件作为添加/取消收藏新闻的按钮，并使用wx:if和wx:else属性使其每次只存在一个。

个人中心页面

个人中心页主要有三个功能需要实现，一是获取微信用户信息，二是获取收藏列表，三是浏览收藏的新闻。

修改my.wxml代码，追加组件作为登录按钮，并且使用wx:if和wx:else属性让未登录时只显示按钮，登录后只显示头像和昵称。

按照教程得到下图所示，原因是原先获取头像和昵称的方法过期，要使用和实验1中的方法一样才可行。

点击浏览已经收藏的新闻和首页的点击跳转新闻内容功能类似。

后续也为其增加了退出功能。

      goLogout() {
        wx.showModal({
            title: '提示',
            content: '您确定要退出登录吗',
            success: (res) => {
                if (res.confirm) { //这里是点击了确定以后
                    console.log('用户点击确定')
                    wx.setStorageSync('islogin', false)
                    this.setData({
                        src: '',
                        nickName: '',
                        isLogin: false
                    })
                } else { //这里是点击了取消以后
                    console.log('用户点击取消')
                }
            }
        })
    },