OUC2024年夏季《移动软件开发》_高校新闻网

ouc_kirito

已于 2024-09-02 20:16:16 修改

阅读量903

点赞数 21

文章标签：微信小程序前端 javascript

于 2024-09-02 19:59:53 首次发布

本文链接：https://blog.csdn.net/m0_73623734/article/details/141828429

版权

一、实验目标

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

二、实验步骤

1.创建项目，选择不使用云服务。

2.页面配置。
（1）创建页面文件：
将app.json文件pages属性中的pages/logs/logs删除；
在app.json文件pages属性中继续追加pages/detail/detail和pages/my/my;
保存修改后，会在pages文件夹下自动生成detail和my目录。
（2）删除和修改文件：
删除utils文件夹中的所有内容；
删除pages文件夹下的logs目录及其内部所有内容；删除index.wxml和index.wxss中的全部代码；
删除index.js中的全部代码，并且输入关键词“page”找到Page选项按回车让其自动补全函数，如下图；

删除app.wxss中的全部代码；
删除app.js中的全部代码，并且输入关键词“app”找到App选项按回车让其自动补全函数。
（3）创建其他文件：
创建images文件夹，然后在文件管理器中找到它并将实验所需的图片保存进去；
在utils文件夹下新建common.js。
配置完成的文件目录如下：

3.视图设计。
（1）导航栏设计：
将导航栏背景改为蓝色，字体改为白色，app.json中代码如下：

  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的新闻网",
    "navigationBarBackgroundColor": "#328EEB"
  },

效果如图：

（2）tabBar 设计：
在app.json中追加tarBar的相关属性代码，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":"我的"
      }
    ]
  }

效果如图：

4.页面设计。
（1）首页设计：
使用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}}"></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>◇{{news.title}}——{{news.add_date}}</text>
  </view>
</view>

index.wxss中相关代码如下：

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

 onLoad(options) {
    let id=options.id
    let result=common.getNewsDetail(id)
    if(result.code=='200'){
      this.setData({article:result.news})
    }
  },

然后将测试数据即幻灯片素材和临时新闻数据写入index.js的data中。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:...,
      title:...,
      poster:...,
      add_date:...
    }]
  },

效果如图：

(2)个人中心页设计：
使用view组件进行整体布局，myLogin表示登录面板，mylcon表示微信头像图片，nickName表示微信昵称，myFavorites表示我的收藏。
my.wxml中相关代码如下：

<view id='myLogin'>
 <block> 
  <image id='myIcon'src='{{src}}'></image>
  <text id='nickName'>{{nickName}}</text>
 </block>
<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_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;
  }
  #myIcon{
  width:200rpx;
  height:200rpx;
  border-radius:50%;
  }
  #nickName{
  color:white;
  }
  #myFavorites{
  padding:20rpx;
  }

app.wxss中有关新闻列表样式的代码与index.wxss中的相同。
然后在my.js的data中任意录入一条测试数据。
效果如图：

（3）新闻页设计：
首先在顶端工具栏中找到“普通编译”下拉选项，选择“添加编译模式”,然后追加对于detail页面的直接浏览效果，如下图所示：

此时预览就可以直接显示detail页面，设计完毕后再切换回“普通编译”模式即可。
然后使用view组件进行整体布局，container表示整体容器，title表示新闻标题区域，poster表示新闻图片区域，content表示新闻正文区域，add_date表示新闻日期区域。
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中相关代码如下：

.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里录入一条测试数据后效果如图：

5.逻辑实现。
（1）公共逻辑：
首先在common.js中写入需要呈现的新闻信息，然后在common.js中添加自定义函数getNewsList和getNewsDetail,用于获取新闻列表信息和指定ID的新闻正文内容，并在最后使用module.exports语句暴露函数出口。common.js中的相关代码如下：

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) { 
      msg.code = '200'; 
      msg.news = news[i]; /
      break;
    }
  }
  return msg; 
module.exports = {
  getNewsList: getNewsList,
  getNewsDetail: getNewsDetail
}

同时需要在各页面的js文件开头引用如下代码：

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

（2）首页逻辑：
在index.js中的onLoad函数中获取新闻列表，并更新到data属性的newsList参数中。index.js中的相关代码如下：

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

效果如图：

接着为新闻列表项目添加点击事件，实现用户点击新闻标题即可跳转的功能。index.wxml中的相关代码如下：

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

然后在对应的detail.js文件中添加goToDetail函数的内容，代码片段如下：

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

（3）新闻页逻辑：
在新闻页接收ID编号，并查询对应的新闻内容。detail.js中的相关代码如下：

 onLoad:function(options) {
    let id=options.id
    let result=common.getNewsDetail(id)
    if(result.code=='200'){
        this.setData({
          article:result.news
        })
      }
  },

点击新闻标题跳转后效果如图：

修改detail.wxml代码，追加两个button组件作为添加和取消收藏新闻的按钮，detail.wxml中的相关代码如下：

<button wx:if ='{{isAdd}}'plain bindtap ='cancelFavorites'>❤已收藏</button>
<button wx:else plain bindtap='addFavorites'>❤点击收藏</

对应的detail.wxss中的相关代码如下：

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

对应的detail.js中的onLond函数代码片段如下：

onLoad:function(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
        })
      }
    }
  },

继续在detail.js中追加addFavorites和cancelFavorites函数，用于点击添加和取消新闻收藏。detail.js中的相关代码如下：

onLoad:function(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
        })
      }
    }
  },

效果如下：

（4）个人中心页逻辑：
在my.wxml中追加button组件作为登录按钮。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'bindgetuserinfo='getMyInfo'>未登录，点此登录</button>
</view>

效果如图：

在my.js中追加getMyInfo函数，代码片段如下：

getMyInfo:function(e){
    let info=e.detail.userInfo;
    this.setData({
      isLogin:true,
      src:info.avatarUrl,
      nickName:info.nickName
    })
  },

效果如图：

在my.wxml中，将“我的收藏”后面的数字更改为动态数据效果。my.wxml中的相关代码如下：

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

在detail.js中追加getMyFavorites函数，my.js中的相关代码如下：

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函数的调用。my.js中的相关代码如下：

getMyInfo:function(e){
    let info=e.detail.userInfo;
    this.setData({
      isLogin:true,
      src:info.avatarUrl,
      nickName:info.nickName
    })
    this.getMyFavorites();
  },

最后修改my.js中的onShow函数，判断如果是登录状态就刷新一下收藏列表。my.js中的相关代码如下：

onShow() {
    if(this.data.isLogin){
      this.getMyFavorites()
    }
  },

效果如图：

修改my.wxml，实现点击收藏的新闻即可跳转到新闻内容的功能。my.wxml中的相关代码如下：

 <text bindtap='goToDetail'data-id='{{news.id}}'>{{news.title}}--{{news.add_date}}</text>

然后在对应的my.js中添加goToDetail函数，代码片段如下：

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

最后删除掉实验过程中录入的临时数据就完成了。

三、程序运行结果

首页：

个人主页：

新闻页：

点击收藏后：

取消一个收藏：

ouc_kirito

关注

21
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
OUC2024年夏季《移动软件开发》_高校新闻网

使用微信开发者工具构建一个高校新闻网的前端小程序。
复制链接

扫一扫