微信小程序实践——实验4高校新闻网

已于 2022-08-21 01:02:05 修改
阅读量4.7k 收藏 95
点赞数 11
文章标签： 微信小程序 小程序
于 2022-08-21 00:05:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50960991/article/details/126445483
版权

一、项目创建

本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

1. 首页功能需求

首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。

2. 新闻页功能需求

新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。

3. 个人中心页功能需求

个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。

在Page下新建两个文件夹，index为首页，my为个人中心，detail为新闻页

二、视图设计

新闻数据和图片下载地址：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip

1. 导航栏设计

app.json

  "pages":[
    "pages/index/index",
    "pages/my/my",
    "pages/detail/detail"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#328eeb",
    "navigationBarTitleText": "我的新闻网",
    "navigationBarTextStyle":"white"
  },

2. tabBar设计

app.json

  "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. 页面设计

I. 首页设计

首页由两部分组成：幻灯片和新闻列表

  • 幻灯片：<swiper>组件
  • 新闻列表：<view>容器，内部使用数组循环

index.wxml

<!--幻灯片滚动-->
<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"></image>
    </swiper-item>
  </block>
</swiper>

<!--新闻列表-->
<view id="news-list">
  <view class="list-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
    <image src="{{item.poster}}"></image>
    <text>{{item.title}} ———— {{item.add_date}}</text>
  </view>
</view>

<swiper>组件属性众多，indicator-dots：是否显示面板指示点   ， autoplay:  是否自动切换

  interval：自动切换时间间隔 ，  duration ：滑动动画时长

index.wxss

/*<swiper>区域样式*/
/*1-1 swiper组件*/
swiper{
  height: 400rpx;
}
/*1-2 swiper中的图片*/
swiper image{
  width: 100%;
  height: 100%;
}

/*新闻列表区域样式*/
/*2-1 新闻列表容器*/
.news-list{
  min-height: 600rpx;
  padding: 15rpx;
}
/*2-2 列表项目*/
.list-item{
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid gray;
}
/*2-3 新闻图片*/
.list-item image{
  width: 230rpx;
  height: 150rpx;
  margin: 10rpx;
}
/*2-4 新闻标题*/
.list-item text{
  width: 100%;
  line-height: 60rpx;
  font-size: 10pt;
}

 在index.js中加入一些临时数据：

  /**
   * 页面的初始数据
   */
  data: {
    //幻灯片素材
    swiperImg: [
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg'},
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg'},
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg'}
    ],
    newsList:[
  {id: '264698',
  title: '标题',
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
  content: ' 内容',
  add_date: '2022-08-19'}
  },

                        

 II. 个人中心页面设计

个人中心页面包括：登录面板、我的收藏

登录面板：显示用户的微信头像和昵称

我的收藏：显示收藏在本地的新闻列表

自定义id:

  • myLogin: 登录面板
  • myIcon：微信头像图片
  • nickName: 微信昵称
  • myFavorites: 我的收藏

my.wxml

<!--登录面板-->
<view class="myLogin">
  <block wx:if="{{isLogin}}">
    <image class="myIcon" src="{{src}}"></image>
    <text class="nickName">{{nickName}}</text>
  </block>
  <button wx:else open-type="getUserInfo" bindtap="getMyInfo">未登录，点此登录</button>
</view>
<!--我的收藏-->
<view class="myFavorites">
  <text>我的收藏（{{number}}）</text>
  <!--收藏的新闻列表-->
  <view class="news-list">
    <view class="list-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
      <image src="{{item.poster}}"></image>
      <text bindtap="goToDetail" data-id="{{item.id}}">{{item.title}} ———— {{item.add_date}}</text>
    </view>
  </view>
</view>

my.wxss

/*登录面板*/
.myLogin{
  background-color: #328eeb;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
/*1-1 头像图片*/
.myIcon{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
/*1-2 微信昵称*/
.nickName{
  color: white;
}

/*我的收藏*/
.myFavorites{
  padding: 20rpx;
}
/*新闻列表区域样式*/
/*2-1 新闻列表容器*/
.news-list{
  min-height: 600rpx;
  padding: 15rpx;
}
/*2-2 列表项目*/
.list-item{
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid gray;
}
/*2-3 新闻图片*/
.list-item image{
  width: 230rpx;
  height: 150rpx;
  margin: 10rpx;
}
/*2-4 新闻标题*/
.list-item text{
  width: 100%;
  line-height: 60rpx;
  font-size: 10pt;
}

注： 由于新闻列表的样式与首页完全相同,没有必要重复样式代码,否则会造成冗余,可以将index. wxss中新闻列表样式的相关代码挪到app. wxss 中公共使用。

III.新闻页设计


新闻页是用于给用户浏览新闻全文的,需要用户点击首页的新闻列表,然后在新窗口中打开该页面。新闻页包括新闻标题、新闻图片﹑新闻正文和新闻日期。

结构：

自定义class:

  • container：整体容器
  • poster：新闻图片
  • title：新闻标题
  • content：新闻内容
  • add_date：新闻时间

 detail.wxml

<view class="container">
  <view class="title">{{artical.title}}</view>
  <view class="poster">
    <image src="{{artical.poster}}" mode="widthFix"></image>
  </view>  
  <view class="content">
    <text>{{artical.content}}</text>
  </view>
  <view class="add_date">{{artical.add_date}}</view>
</view>

 detail.wxss

.container{
  padding: 15rpx;
}
.title{
  font-size: 35rpx;
  line-height: 35rpx;
  text-align: center;
}
.poster image{
  width: 100%;
}
.content text{
  text-align: left;
  font-size: 30rpx;
  line-height: 35rpx;
}
.add_date{
  font-size: 30rpx;
  text-align: right;
  line-height: 30rpx;
  margin-right: 25rpx;
  margin-top: 20rpx;
}

 detail.js中录入部分新闻数据

  data: {
    artical:{
      id: '264698',
    title: '标题',
    poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
    content: '  内容',
    add_date: '2022-08-19'
    },
}

预览： 

三、逻辑实现

1. 公共逻辑

将数据存入公共JS文件（utils/common.js）

自定义函数getNewsList 和 getNewsDetail分别用于获取新闻列表信息和指定ID的新闻正文内容

module.exports语句用于暴露函数出口

//模拟新闻数据
const news = [
  {id: '264698',
  title: '标题'
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
  content: ' 内容',
  add_date: '2022-08-19'},
  {id: '304083',
  title: '',
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg',
  content: '',
  add_date: '2022-08-09'},
  {id: '305670',
  title: '',
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',
  content: '',
  add_date: '2022-08-11'}
];

//获取新闻列表
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; //返回查找结果
}

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

2. 首页逻辑

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

I.展示新闻列表

在index.js中需要获取到新闻列表，此时就需要使用公共JS文件中的getNewsList函数，

引入common.js文件

var common = require("../../utils/common.js")

index.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list=common.getNewsList()
    this.setData({
      newsList:list
    })
  },

 效果：

 II. 点击新闻跳转

为新闻项目添加点击事件

index.wxml

为整个<view>添加点击事件自定义函数goToDetail()，保证不论点到新闻哪部分都可以跳转，并使用data-id属性携带新闻id

<!--新闻列表-->
<view id="news-list">
  <view class="list-item" wx:for="{{newsList}}" wx:key="{{item.id}}" bindtap="goToDetail" data-id="{{item.id}}">
    <image src="{{item.poster}}"></image>
    <text>{{item.title}} ———— {{item.add_date}}</text>
  </view>
</view>

 index.js

  goToDetail:function(e) {
    //获取data-id的数据
    let id = e.currentTarget.dataset.id
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },

3. 新闻页逻辑

两个功能：

  • 显示对应新闻
  • 可以添加、取消新闻收藏

I. 显示对应新闻

在首页逻辑中，点击新闻跳转时携带了新闻ID，新闻页需接收ID编号，并查询对应的新闻内容

在获取id后，需检查当前新闻是否在收藏夹中来确认isAdd是true还是false，来使收藏按钮显示不同的文本

detail.js

onLoad(options) {
    let id = options.id
   
    //检查当前新闻是否在收藏夹中
    var newartical = wx.getStorageSync(id)
    //存在
    if(newartical != '')
    {
      this.setData({
        isAdd:true,
        artical:newartical
      })
    }
    //不存在
    else{
      let result = common.getNewsDetail(id)
      //获取新闻内容
      if(result.code == '200'){
        this.setData({
          artical:result.news,
          isAdd:false
        })
      }
    }
  },

II.添加、取消新闻收藏

在detail.js中追加addFavorites()  和 cancelFavorites()函数用于点击添加/取消收藏

detail.js

/*添加收藏*/
    addFavorites:function () {
      let artical = this.data.artical
      wx.setStorageSync(artical.id, artical)    //将文章放入缓存区
      this.setData({
        isAdd:true
      })
    },
    /*取消收藏 */
    cancelFavorites:function() {
      let artical = this.data.artical
      wx.removeStorageSync(artical.id)
      this.setData({
        isAdd:false
      })
    },

预览：

添加本地缓存：

 

 删除本地缓存：

4. 个人中心页逻辑

个人中心页需要实现三个方面的内容：

1.获取微信用户信息

2.获取收藏列表

3.浏览收藏的新闻

I. 获取用户信息

添加<button>组件作为登录按钮，并且使用wx:if和wx:else属性让未登录时只显示按钮，登录后显示微信头像和昵称

my.wxml

<!--登录面板-->
<view class="myLogin">
  <block wx:if="{{isLogin}}">
    <image class="myIcon" src="{{src}}"></image>
    <text class="nickName">{{nickName}}</text>
  </block>
  <button wx:else open-type="getUserInfo" bindtap="getMyInfo">未登录，点此登录</button>
</view>

预览：

 获取用户信息的操作同实验1

my.js

getMyInfo: function(e){
    wx.getUserProfile({
      desc: '获取信息',
      success:(res)=>{
        this.setData({
          src:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName,
          isLogin:true
        })
       
      }
    })
    
   },
onLoad(options) {
    if(wx.getUserProfile){
      this.setDate({
        canIUseGetUserProfile: true
      })
    }
  },

II.获取收藏列表

在收藏列表上方动态显示出收藏数目 

my.js

  data: {
    number:0,
    nickName: "未登录",
    src:"/images/index.png",

  },

获取收藏数目：

  //更新number
  getMyFavorites:function() {
    let info = wx.getStorageInfoSync()   //读取本地缓存信息
    let keys = info.keys    //获取全部key信息
    let num = keys.length   //获取收藏全部新闻数量

    let myList = [];
    for(var i=0;i<num;i++)
    {
      let obj = wx.getStorageSync(keys[i])
      myList.push(obj)
    }
    //更新收藏列表
    this.setData({
      newsList:myList,
      number:num
    })
  },

 修改getMyInfo()函数，使其在被调用时调用getMyFavorites()函数，即用户登录后显示用户收藏信息

  getMyInfo: function(e){
    wx.getUserProfile({
      desc: '获取信息',
      success:(res)=>{
        this.setData({
          src:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName,
          isLogin:true
        })
        //获取新闻列表
        this.getMyFavorites()
      }
    })
    
   },

用户登录成功后还可以手动更改新闻的收藏状态，修改my.js中的onShow()函数，判断如果是登录状态就刷新一下收藏列表

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(this.data.isLogin){
      this.getMyFavorites()
    }
  },

 III.浏览收藏的新闻

与首页点击新闻跳转相似

预览：

取消收藏：

萝贝萝贝
关注
微信小程序新闻列表详情页，web网页开发
2301_78416672的博客
04-06 1403
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！I0NjkucG5n?完善之： 总控开关控制音乐开关在 post-detail.js 文件 load 函数中添加代码：// 定义一个变量来接受 posts_data.js文件输出的对象// 注意：require 只能使用相对路径！Page({data: {},// 接收post.js传进来的postid值。// 拿到数据文件对应id的数据元素// 数据绑定。
微信小程序——高校新闻网
xmqsysd的博客
08-24 415
微信小程序——高校新闻网
微信小程序——电影推荐（截图+源码）.zip
04-17
微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip
微信小程序新闻客户端开发实战
最新发布
weixin_36231030的博客
09-16 2399
本文还有配套的精品资源，点击获取 简介："weixin-news:前端新闻微信小程序客户端"是一个为微信平台量身定制的新闻应用，提供无需下载的便捷新闻浏览体验。该应用使用WXML和WXSS构建用户界面，并通过微信开发者工具实现预览与调试。它还包括数据管理、二维码分发和用户体验优化等功能，使开发者能够实时监控并调整应用以保证最佳性能和兼容性。 1. 微信小程序开发概...
微信小程序项目——校园新闻网
lijingxiaov5的博客
07-08 5191
微信小程序项目——校园新闻网，实现了与后端链接的增删查改以及图片的上传方式
高校新闻网-微信小程序
m0_53540438的博客
08-24 2251
高校新闻网-微信小程序
微信小程序项目实训
小菜鸟博客
07-27 3097
文章目录小程序项目培训实践周记第一周周记第二周周记 小程序项目培训实践周记 第一周周记   第一周实训很快就过去了，这一周是整个实训的开始，我们知道了整个实训要完成的项目—微信小程序订餐系统，于是，我们这组便开始进行项目。   我们整理项目资料，然后对各自的特长分好工，我主要负责微信小程序部分后端的任务。我觉得不管个人完成什么任务，都要对这个项目有所了解，同时还要处理好信息对等，互相需要沟通好，如...
微信小程序用于显示校内新闻网
08-10
本小程序是用于连接我电的校内新闻网，方便同学们随时随地了解校园动态，掌握最新通知。APP界面设计风格简约，包含前端展示UI和后端服务器部分，此仓库为客户端源码。
移动软件开发四——高校新闻网
Karthus77的博客
08-21 884
移动软件开发实验四
微信小程序快速入门+四个实战小程序（一）——入门准备
weixin_46709219的博客
12-16 716
一）系列达成目标介绍： 在 “ 微信小程序快速入门+四个实战小程序 ”系列中，我们最终会实现四个实战的项目，分别如下： 1）基础功能——点击显示昵称和头像； 2）天气查询小程序（选择不同的省份城市）； 3）视频播放程序（可以发送弹幕）； 4）高校新闻网（浏览高校网中的文章并收藏）； 二）小程序创建的准备 1）注册开发者账号： 打开浏览器——搜索 “ 微信公众平台 ”点击进入官网： 在官网首页右上角选择 “ 立即注册 ”： 选择注册的账号类型为 “ 小程序 ”： 填写注册的信息： 此时会显示注册成功：
微信小程序 源码资源汇总
JxufeCarol的博客
06-08 2161
毕设最终做的是微信小程序的前端，做之前对微信小程序懂的不多（但是经常用hhh），于是乎先看了一些现有的微信小程序源代码，看看框架和各函数的内容。 这也就是为什么会有这么多源码资源的原因啦~分享给大家，同时也给自己记录记录。 一、Video 2018中国高校计算机大赛——微信小程序应用开发赛 华中赛区（决赛）https://www.bilibili.com/video/av26989661 黑马程序员Web前端教程_零基础玩转微信小程序https://www.bilibili.com/video/av7.
（springboot+小程序）心理疗愈 毕业设计源码论文+答辩PPT
TOT_dddd的博客
11-03 1533
前端用户需求。 注册用户的功能如下： 注册账号：用户填写个人信息，并验证手机号码。 登录：根据账号密码进行登录操作。 案例资讯数据：用户可以在线浏览查看搜索相关心理治愈案例资讯信息。 医生信息推荐：相关医生推荐，包括医生姓名、个人描述、工作经理信息等，用户可以查看个别医生资料。 维护个人信息：用户因个人信息的变更可以随时修改自己注册信息。 交流中心：用户可以在交流中心进行问题发表互动等操作。 相关书籍推荐：用户可以查看平台发布的相关心理治愈书籍。 收藏评论：用户可以对感兴趣的文章等进行收藏，可以在线发布评论
微信小程序demo(新闻类)
热门推荐
希望1992的博客
01-19 1万+
1月9号微信小程序正是上线，在网上尝试了一下，发现很厉害。所以研究了一下。下面是我的demo: 包含四个页面:news.js/news.wxss/news.json/news.wxml1.news.wxml：<scroll-view class="news_banner"> <!-- wx:for类似于el表达式 --> <view wx:for="{{selections
微信小程序 新闻列表示例
05-17
我自己收藏的微信小程序新闻资讯类型的源码，很好的学习源码
微信小程序，实现一个简易的新闻网
qq_45780016的博客
05-16 6555
微信小程序实现一个简易新闻网，能够调用微信用户进行登入，查看相关收藏
微信小程序：高校新闻网
qq_18126657的博客
08-24 937
微信小程序入门
【页面案例汇总】新闻资讯类uni-app微信小程序页面
weixin_42317757的博客
05-30 713
【代码】【页面案例汇总】新闻资讯类uni-app微信小程序页面。
展柜设计小程序开发：可运行源码与数据库
uniapp是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、Web（包括微信小程序）等多个平台，具有跨平台、高效开发的特点。 系统功能方面，管理员可以进行账号管理、新闻公告管理、投诉建议管理、...
基于微信小程序的爱心捐赠平台的设计与实现-计算机毕业设计源码64923
vx_bysj1330的博客
11-29 1568
在当今高度发达的信息中，信息管理改革已成为一种更加广泛和全面的趋势。 小程序的爱心捐赠平台是基于Mysql数据库，在JSP程序设计的基础上实现的。为确保中国经济的持续发展，信息时代日益更新，网络平台更是蓬勃发展。同时，随着信息社会的快速发展， 小程序的爱心捐赠平台网站面临着越来越多的信息，因此很难获得他们对高效信息的需求，如何使用方便快捷的方式使查询者在广阔的 小程序的爱心捐赠平台信息中查询，存储，管理和共享信息方面有效，对我们的学习，工作和生活具有重要的现实意义
微信小程序新闻列表详情页
02-20 1万+
微信小程序新闻列表详情页 　　不忘初心，方得始终。初心易得，始终难守　　 首先创建 post-detail 文件夹，创建四种文件。 　　　　 修改 post.wxml 文件代码，给每个新闻块添加一个点击事件。并且我们要知道我们点击的是哪一个新闻块，所以我们需要给数据文件 posts-data.js 文件中的每个新闻数据添加一个键值对postId。修改后的代码如下： post.wxml...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值