0基础小白第五个微信小程序：高校新闻网

最新推荐文章于 2024-09-04 19:43:55 发布
最新推荐文章于 2024-09-04 19:43:55 发布
阅读量878 收藏 8
点赞数 14
文章标签： 微信小程序 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iahsjs/article/details/141827778
版权

一、程序效果实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、实验目标

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

三、实验步骤

列出实验的关键步骤、代码解析、截图。
1.创建项目，删除模板中自带的多余的代码
在这里插入图片描述

2.在app.json中修改pages属性，Ctrl+s保存即可生成另外两个子文件

{
  "pages": [
  	"pages/index/index",
 	"pages/detail/detail",
  	"pages/my/my"
  ],

3.添加图片素材，创建images文件夹，选择资源文件打开，把图片素材复制粘贴到里面。

同上，创建utils文件，存放公共js文件。

图片和js资源：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip

4.导航栏设计：

在app.json中：

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

编译运行效果：

在这里插入图片描述

5.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": "我的"
      }
    ]
  }

编译运行效果：

在这里插入图片描述

6.页面设计：

在index.wxml中设计幻灯片播放和新闻列表：

<swiper indicator-dots="true" autoplay 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='new-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_date}}</text>
  </view>
</view>

在index.wxss调整布局参数中：

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:'/images/newsimage1.jpg'},
    {src: '/images/newsimage2.jpg'},
    {src: '/images/newsimage3.jpg'}
    ],
   

   newsList:[{
    id: '264698',
   title: '省退役军人事务厅来校交流对接工作',
   poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
   content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
   add_date: '2022-08-19'}]
  },

编译运行后结果：
在这里插入图片描述

7.个人中心页面设计：

在my.wxml中：

<view id='mylogin'>
  <block>
    <image id='myIcon'src='{{src}}'></image>
    <text id='nickname'>{{nickName}}</text>
  </block>
</view>
<view id='myFavorites'>
<text>我的收藏</text>
  <view id='new-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_date}}</text>
    </view>
  </view>
</view>

在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;
}

由于新闻列表样式与index中完全相同，我们直接把index.wxss中新闻部分挪到全局中：

在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: '264698',
     title: '省退役军人事务厅来校交流对接工作',
     poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
     content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
     add_date: '2022-08-19'}]
  },

编译运行后的结果：

在这里插入图片描述

8.新闻页设计：

由于我们目前没制作从 首页’index’到 新闻页’detail’的逻辑，所以我们将编译模式从’普通编译’调为’添加编译模式’，然后确定，即可直接编译运行新闻页

在这里插入图片描述

9.设计新闻页：

在detail.wxml中：

<!--pages/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>

在wxss中：

/* pages/detail/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;
}

在js中添加临时数据来预览效果：

data: {
    article:{
      id: '264698',
     title: '省退役军人事务厅来校交流对接工作',
     poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
     content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
     add_date: '2022-08-19'}
  },

编译后运行效果如下：

在这里插入图片描述

10.逻辑实现：

创建utils文件夹，导入已经编写好的common.js文件，然后在每一个js文件的顶端引用公有js文件：

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

11.首页：逻辑实现获取新闻列表

在index.js中：

 onLoad: function(options) {
    //获取新闻列表
    let list = common.getNewsList()
    //更新列表数据
    this.setData({
      newsList: list
    })
  },

12.逻辑实现跳转新闻：

在index.wxml中实现点击效果：

<view id='new-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>

在detail.js中：

goToDetail: function(e) {
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    console.log(id)
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
  onLoad(options) {
    let id=options.id;
    let result=common.getNewsDetail(id)
    if(result.code=='200'){
      this.setData({article:result.news})
    }
  },

编译运行效果如下：

在这里插入图片描述
在这里插入图片描述

13.新闻收藏和取消逻辑实现：

在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>

在detail.wxss中：

button{
  width:250rpx;
  height:100rpx;
  margin:20rpx auto;
}

在js文件中实现对用的逻辑：

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

编译运行效果如下：

在这里插入图片描述

14.实现个人中心的逻辑：

获取微信信息：

在my.wxml中：

<!--pages/my/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 id='myFavorites'>
  <view id='new-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_date}}</text>
    </view>
  </view>
</view>

在js中添加函数：

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

  },

15.收藏列表逻辑实现：

在my.wxml中：

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

对应，在detail.js中date内添加：

num:0，

在my.js中追加函数：

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

  },
  //获取收藏列表
  getMyfavorites:function(){
    let info = wx.getStorageInfoSync();
    let keys = info.keys;
    let num = keys.length;
    console.log(keys)
    let myList = [];
    for(var i = 0;i<num-1;i++){
      let obj = wx.getStorageSync(keys[i]);
      myList.push(obj);
    }
    //更新收藏列表
    this.setData({
      newsList:myList,
      num:num-1
    })
  },
  
   onShow:function() {
    //如果已经登录
    if(this.data.isLogin === true){
      console.log("更新列表")
    //更新收藏列表
      this.getMyfavorites()
    }
  },

然后给收藏列表的新闻添加点击再浏览的功能，在my.wxml中：

<view id='myFavorites'>
  <text>我的收藏({{num}})</text>
  <view id='new-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>
</view>

在my.js中：

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

编译运行即可：

在这里插入图片描述

四、问题总结与体会

​本次实验着重于逻辑实现和代码从0的迭代设计过程，使我的逻辑能力和动手能力得到了很大的提高。

同时，也发现了老师留下的问题：detail 页面的 wxss 文件中， .poster image 中的 width 设置为 100% 的话，图片总是无法显示。修改为 700rpx 就可以显示，我不清楚什么原因，大家如果知道为什么可以告诉我。

问题反思：.poster的父级容器为.container，使用了 mode="widthFix"，它会按照宽度进行缩放，高度自动变化。如果图片的宽度设置为 100%，但父容器宽度异常（如为 0），图片可能无法正常显示。
额外功能：

按照海大首页三个新闻重新整理：“中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务”，“贵州省人大干部综合能力提升培训班在中国海洋大学举办”，“中国海洋大学开展2024级本科生集中入学教育”

完成截图：

在这里插入图片描述

04年码农
关注
  • 14
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序资源汇总
Vincentyun
08-20 1万+
微信小程序汇总（10月16日更新小程序100+个教程或资讯与50+个Demo） 1：微信小程序官方工具：https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 2：微信小程序简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：微信小程序设计指南：http...
springboot基于微信小程序的安全教育平台面向大学生 计算机毕设源码85871
Innocence_0的博客
04-26 578
绪论。
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
热门推荐
HTML网页设计
09-27 1万+
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现...
qq_365392777
11-06 625
????精彩专栏推荐???????????????????????? ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 ???? 作者主页: ​​【主页——????获取更多优质源码】​​ ???? web前端期末大作业： 【????毕设项目精品实战案例 (1000套) 】 ???? 程序员有趣的告白方式：【????HTML七夕情人节表白网页制作 (110套) 】 ????超炫酷的Echarts...
java-net-php-python-jsp刺绣作品展示网站计算机毕业设计程序
伯仲cxsj985
11-20 556
springboot基于SpringBoot框架的图书分享系统的设计与开发。JSP基于Web的在线文献查阅系统的设计与实现sqlserver。springboot基于springboot的影视资讯管理系统。ssm基于SSM框架的菲特尼斯健身管理系统的设计与实现。ssm基于微信平台的校园汉服租赁系统的设计与实现。ssm基于web的考试资料交易系统的设计与实现。springboot师生共评的作业管理系统。
用python怎么赚钱-python怎么挣钱
weixin_37988176的博客
11-01 613
广告关闭2017年12月，云+社区对外发布，从最开始的技术博客到现在拥有多个社区产品。未来，我们一起乘风破浪，创造无限可能。6年python，期间写了各种奇葩爬虫，挣各种奇葩的钱，写这篇文章总结下几种爬虫挣钱的方式。? 1.最典型的就是找爬虫外包活儿。 这是网络爬虫最通常的的挣钱方式，通过外包网站，熟人关系接一个个中小规模的爬虫项目，一般向甲方提供数据抓取，数据结构化，数据清洗等服务。 各位新入行...
【前端静态页面HTML】
Zhangyongqi77的博客
09-20 3361
HTML基础教程
App Store上架审核过程中常见问题整理
从事上架业务5年，专注APP上架 IOS Google市场
02-25 382
App Store上架审核过程中常见问题整理
SprinBoot+Vue图书馆预约与占座微信小程序的设计与实现
赵广陆
09-03 1417
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javawe
【微信小程序】搭建项目步骤 + 引入Tdesign UI
二豆不要二豆
09-04 313
在下图文件中添加配置，并更改文件后缀wxss改为scss后面如果报错，重新打开一遍编辑器即可。
微信小程序npm扩展能力探究
最新发布
曹定栓的博客
09-04 637
小程序支持使用 npm 安装第三方包。
【微信小程序】小程序的 MobX 绑定辅助库
weixin_40874076的博客
08-30 980
小程序的 MobX 绑定辅助库。此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档。可配合 MobX 的小程序构建版 npm 模块 mobx-miniprogram 使用。
ssm“最多跑一次”微信小程序论文源码调试讲解
u014445459的博客
09-02 1144
Java是由SUN公司推出，该公司于2010年被oracle公司收购。Java本是印度尼西亚的一个叫做爪洼岛的英文名称，也因此得来java是一杯正冒着热气咖啡的标识。Java语言在移动互联网的大背景下具备了显著的优势和广阔的前景，它是面向对象的，分布式的，动态的，具有平台无关性、安全性、健壮性。Java语言的基本语句语法和C++一样，但是它面向对象的技术更加彻底，因为Java要求将所有的内容都必须封装成类，把类作为程序的基本单位。由于不允许类外有变量、方法。
基于微信小程序在线订餐系统
weixin_44308935的博客
09-03 2107
基于微信小程序在线订餐系统
SprinBoot+Vue宠物领养救助微信小程序的设计与实现
赵广陆
09-03 1906
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javawe
SprinBoot+Vue二手回收微信小程序的设计与实现
赵广陆
09-04 766
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javawe
基于STM32的猫狗宠物喂养系统设计(微信小程序)(215)
08-30 1565
本项目提出了一种基于STM32的猫狗宠物喂养系统设计。该系统集成了物联网技术与嵌入式系统设计，通过STM32F103RCT6作为主控芯片，实现了对宠物投食过程的高度智能化管理。用户可以通过微信小程序远程设定定时投喂计划、手动投喂食物、实时监测余粮重量，并且可以精确控制每次投喂的食物量，确保宠物饮食规律和营养均衡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值