高校新闻网-微信小程序

这篇具有很好参考价值的文章主要介绍了高校新闻网-微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Github仓库地址 : https://github.com/xiaoli-guan/lab4.git

一、实验目标

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

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

二、实验步骤

1、项目创建

使用测试号,JavaScript基础模板创建新项目。

2、页面配置

基础模板初始化会自动生成一个简易的小程序,首页是index。我们还需要创建3个页面文件,包括index(首页页面)、detail(新闻页面)、my(个人中心页面)。

(1)将app.json文件内pages属性中“pages/logs/logs”删除

(2)在app.json文件pages属性中继续追加pages/detail/detail和pages/my/my

(3)删除utils文件夹和pages下的logs文件夹及其内部所有内容

(4)删除index.wxml和index.wxss、app.wxss中全部代码

(5)删除index.js中全部代码,并且输入关键词page,找到后面带有“function”字样的,选中让其自动补全函数

(6)删除app.js中全部代码,并且输入关键词app,找到后面带有“function”字样的,选中让其自动补全函数

本次实验中,已经提供了index页面的代码及图标素材和common.js文件。

下载地址如下:

https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip

接下来我们将index页面的代码替换掉原来的。将图片素材放到images文件夹内。将common.js放入utils文件夹内。再在项目列表中刷新资源管理器即可。

3、视图设计

(1)导航栏设计

小程序默认导航栏是黑底白字的效果 ,我们在app.json中的window属性进行修改。

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "我的新闻网",
    "navigationBarTextStyle":"white"
  },
(2)tabBar设计

首先在app.json中追加tarBar的相关属性代码。

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

由于首页代码已经给出,所以接下来我们只需要设计个人中心页及新闻页。

个人中心页主要包含两个版块,登录面板和“我的收藏“。

my.wxml的代码如下:

<!--登陆面板-->
<view id = "myLogin">
  <block>
    <image id = "myIcon"src="{{src}}"></image>
    <text id = "nickName">{{nickName}}</text>
  </block>
</view>

<!--我的收藏-->
<view id = "myFavorites">
  <text>我的收藏(1</text>
  <!--收藏的新闻列表-->
  <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>·{{news.title}} -- {{news.add_dat}}</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;
}

在app.wxss中加入代码:

/*新闻列表区域样式*/
/*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;
}

在my.js中加入临时测试数据:

/**
   * 页面的初始数据
   */
  data: {
    //临时微信用户昵称和头像
    nickName:"未登录",
    src:"/images/index.png",
    //临时收藏夹新闻数据
    newsList:[{
      id: '305670',
      title: '我校在第八届安徽省“互联网+”大学生创新创业大赛再创佳绩',
      poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',
      add_date: '2022-08-11'
    }]
  },

此时的个人中心页面的效果如下:

接下来就是新闻页的设计。新闻页是用于给客户浏览新闻全文的,需要用户点击首页的新闻列表,然后在新窗口打开该页面。

由于此时还没有做点击跳转,我们可以在顶端工具栏中找到“普通编译”下拉 选项。选择“添加编译模式”。然后追加detail页面的直接浏览效果。

高校新闻网-微信小程序

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>
</view>

detail.wxss的代码如下:

/* pages/detail/detail.wxss */
/*整体容器*/
.container{
  padding: 15rpx;
  text-align: center;
}
/*新闻标题*/
.title{
  font-size: 14pt;
  line-height: 80rpx;
}

/*新闻图片*/
.poster image{
  width:100%;
}

/*新闻正文*/
.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;
}

detail.js中data代码如下:

  /**
   * 页面的初始数据
   */
  data: {
    article:{id: '305670',
    title: '我校在第八届安徽省“互联网+”大学生创新创业大赛再创佳绩',
    poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',
    content: '7月4日—8月10日,由安徽省教育厅、合肥市人民政府、淮北市人民政府联合主办的第八届安徽省“互联网+”大学生创新创业大赛暨中国国际“互联网+”大学生创新创业大赛选拔赛在线上举办。我校参赛项目团队历经省级复赛网评、决赛路演答辩、金奖排位赛等多轮次比拼,斩获金奖3项、银奖10项、铜奖23项,其中3个项目由省赛组委会推荐入围国赛。',
    add_date: '2022-08-11'}
  },

此时detail页面的效果如下:

然后把编译模式换回普通编译。

4、逻辑实现

(1)公共逻辑

comnon.js文件已经提供好了。我们只需要在各个js文件顶部加入这行代码就能引用了。

var common = require('../../utils/common.js') //引用公共JS文件
(2)首页逻辑

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

index文件已经写好了。我们只需在detail.js内添加goToDetail函数的内容即可。

/**
   * 
   * 自定义函数--跳转新页面浏览新闻内容
   */
  goToDetail:function(e){
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    //携带新闻的ID进行页面的跳转
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },

现在已经可以从首页跳转到新闻页了。

(3)新闻页逻辑

新闻页只要有两个功能,一是显示对应新闻,二是可以添加/取消新闻收藏。

先在detail.js代码里修改onLoad函数。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //获取页面跳转来时携带的数据
    let id = options.id
    let result = common.getNewsDetail(id)
    //获取到新闻内容
    if(result.code == '200'){
      this.setData({article:result.news})
    }
  },

此时点击新闻已经可以跳转到对应的详细新闻了。

接下来就是设计添加/取消收藏功能

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 ="addFavorites">❤点击收藏</button>
</view>

对应的wxss文件添加代码:

/*“点击收藏”按钮*/
button{
  width:250rpx;
  height:100rpx;
  margin: 20rpx auto;
}

对应js代码的onLoad函数修改为:

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //获取页面跳转来时携带的数据
    let id = options.id

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

继续在js文件中追加addFavorites函数和cancelFavorites函数。

 /**
   * 添加到收藏夹
   */
  addFavorites: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});
  },

此时新闻页已经有收藏功能了。

(4)个人中心页逻辑

个人中心页主要有3个功能需要实现,获取微信用户信息;获取收藏列表;浏览收藏的新闻。

修改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="getUserProfile"bindtap = 'getMyInfo' type = 'primary'>
    未登录,点击登录
  </button>
</view>

注意,getUserInfo函数停止使用了,现在使用最新的getUserProfilr函数。

然后在my.js的page内部追加getMyInfo函数

// 获取用户信息
  getMyInfo: function(e) {
    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) => {
        console.log(res)
        this.setData({
          isLogin: true,
          src: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  },

此时,登录功能已经完成。效果如下:

接下来就是获取收藏列表了。

修改my.wxml中的

<text>我的收藏{{num}}</text>

在my.js文件的data中追加num:0,

紧接着在my.js中追加函数getMyFavorites

//获取收藏列表
  getMyfavorites:function(){
    let info = wx.getStorageInfoSync();
    let keys = info.keys;
    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,
      num:num
    })
  },

然后在my.js中的getMyInfo中追加关于getMyfavorites的调用

this.getMyfavorites();

然后修改onShow函数

 /**
   * 生命周期函数--监听页面显示
   */
  onShow:function() {
    //如果已经登录
    if(this.data.isLogin)
    //更新收藏列表
    this.getMyfavorites()
  },

此时已经可以更新收藏列表了。

最后一步就是点击跳转浏览新闻了。

在my.wxml中的 中追加点击事件

 <text bindtap="goToDetail"data-id = "{{news.id}}">{{news.title}} -- {{news.add_dat}}</text>

在my.js添加goToDetail函数

/**
   * 
   * 自定义函数--跳转新页面浏览新闻内容
   */
  goToDetail:function(e){
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    //携带新闻的ID进行页面的跳转
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },

完成。

最后一步,就是清楚临时数据了。

把index.js中的data.newsList数据清空;

把detail.js的data.article数据清空

把my.js的data.newsList、nickName、src清空。

整个实验完成。

三、程序运行结果


高校新闻网-微信小程序

高校新闻网-微信小程序

四、问题总结与体会

本次实验十分成功,并没有遇到什么大问题。经过这四次小程序实验,我已经对小程序制作有了初步的了解,遇到的小问题也能快速解决。总的来说,实验还是很有趣的,对我的帮助也很大。文章来源地址https://www.toymoban.com/news/detail-483815.html

到了这里,关于高校新闻网-微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于微信小程序的新闻资讯的小程序开发

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,新闻资讯被用户普遍使用,为方便用户能够可以随时进行新闻资讯的数据信息管理,特开发了基于新闻资讯的

    2024年02月03日
    浏览(52)
  • 基于微信小程序的经济新闻资讯的设计与实现

    文末获取源码 开发语言:Java 框架:Spring Boot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 用户信息管理 短视频信息管理 新闻信息管理 论坛信

    2024年02月20日
    浏览(48)
  • 微信小程序|ssm基于微信小程序的高校课堂教学管理系统

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月21日
    浏览(58)
  • 微信小程序|高校宿舍信息管理系统小程序

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月22日
    浏览(63)
  • 案例117:基于微信小程序的新闻资讯系统设计与实现

    文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 目录 前言 系统展示 后台模块的实现 用户信息管理 新闻分类管理 新闻信

    2024年02月02日
    浏览(46)
  • 基于微信小程序的高校跑腿小程序,附源码

    博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝15w+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、Python 技术领域和毕业项目实战✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟 2022-2024年最全的计算机软件毕

    2024年04月10日
    浏览(49)
  • 基于JavaSpringBoot+Vue+uniapp实现微信小程序新闻资讯平台

    博主介绍 : ✌ 全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟  java项目

    2024年02月06日
    浏览(76)
  • 微信小程序毕业设计作品成品(81)微信小程序高校校园疫情防控系统设计与实现

    博主介绍:《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版等

    2024年02月08日
    浏览(42)
  • 微信小程序毕业设计作品成品(80)微信小程序高校校园新生报到系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(47)
  • 微信小程序毕业设计作品成品(32)微信小程序高校校园新生报到系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包