移动软件开发——高校新闻网

最新推荐文章于 2024-09-02 23:23:23 发布

plumageee

最新推荐文章于 2024-09-02 23:23:23 发布

阅读量510

点赞数 15

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

本文链接：https://blog.csdn.net/plumageee/article/details/141831244

版权

2024年夏季《移动软件开发》实验报告

Gitee仓库地址？ | https://gitee.com/plumagee/summerWeb

一、实验目标

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

二、实验步骤

页面配置：在创建项目完成后，对初始页面进行删除和修改，并引入images文件夹用于存放图片素材，引入utils文件夹用于存放common.js公共函数，全部完成后的目录结构如下所示：

在这里插入图片描述

视图设计

导航栏设计

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

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

页面设计——首页设计：分为两部分，幻灯片使用swiper组件，新闻列表使用view组件，内部使用数组循环。在JS文件的data中写入幻灯片素材和临时新闻数据，用于效果预览。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:for-item="news" wx:key="{{news.id}}">
     <image src="{{news.poster}}"></image>
     <text bind:tap="goToDetail" data-id="{{news.id}}">{{news.title}} -- {{news.add_date}}</text>
   </view>
 </view>

页面设计——个人中心页设计：分为登录面板和我的收藏两部分，整体使用view组件进行布局。在JS文件的data中临时录入测试数据用于效果预览。my.wxml代码如下：

<!--pages/my/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>
<!-- 我的收藏 -->
<view id="myFavorites">
  <text>我的收藏{{num}}</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 bind:tap="goToDetail" data-id="{{news.id}}">{{news.title}} -- {{news.add_date}}</text>
    </view>
  </view>
</view>

此外，由于新闻列表的样式和首页完全相同，因此可以把index.wxss中新闻列表样式相关的代码挪到app.wxss中共同使用。
页面设计——新闻页设计：首先添加编译模式，追加对于detail页面的直接浏览效果。新闻页整体使用view组件布局，同样可以在data中临时录入测试数据用于效果预览。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>
  <button wx:if="{{isAdd}}" plain bind:tap="cancelFavorites">已收藏</button>
  <button wx:else plain bind:tap="addFavorites">点击收藏</button>
</view>

逻辑实现

公共逻辑部分：使用提供的common.js文件。
首页逻辑：一是新闻列表展示，需要在onload函数中获取新闻列表，并更新到data属性的newList参数中；二是点击新闻标题实现页面跳转，添加goToDetail函数实现并携带新闻ID编号。具体代码如下：

 //跳转新页面浏览新闻内容
 goToDetail:function(e){
   //获取携带的data-id数据
   let id = e.currentTarget.dataset.id;
   //携带新闻ID进行页面跳转
   wx.navigateTo({
     url: '../detail/detail?id='+id
   })
 },
 /**
* 生命周期函数--监听页面加载
*/
 onLoad: function (options) {
   //获取新闻列表
   let list = common.getNewsList()
   //更新列表数据
   this.setData({newsList:list})
 },

新闻页逻辑：一是显示对应新闻，需要在新闻页接收ID编号，并查询对应新闻内容；二是添加/取消新闻收藏，需要在detail.wxml中添加两个button组件，并使用wx:if和wx:else属性使其每次只存在一个，然后添加addFavorites和cancelFavorites函数用于点击添加/取消新闻收藏。具体detail.js代码如下：

//添加到收藏夹
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 });
},
/**
* 生命周期函数--监听页面加载
*/
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
      })
    }
  }  
},

个人中心页逻辑：一是获取微信用户信息：修改button组件，追加用户信息事件，然后追加getMyInfo函数，控制台输出成功后，将信息更新到动态数据上；二是获取收藏列表，追加getMyFavorites函数，用于展示新闻收藏列表，然后修改onShow函数，判断如果是登录状态就刷新收藏列表；三是添加goToDetail函数，与首页的点击跳转类似，用于实现点击浏览已经收藏的新闻。具体my.js代码如下：

//获取微信用户信息
getMyInfo:function(e){
  console.log(e.detail.userInfo);
  let info = e.detail.userInfo;
  this.setData({
    isLogin:true,
    src:info.avatarUrl,
    nickName:info.nickName
  })
  //获取收藏列表
  this.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
  });
},
goToDetail: function(e) {
  //获取携带的data-id数据
  let id = e.currentTarget.dataset.id;
  //携带新闻id进行页面跳转
  wx.navigateTo({
    url: '../detail/detail?id=' + id
  })
},
/**
* 生命周期函数--监听页面显示
*/
onShow:function() {
  if(this.data.isLogin){
    this.getMyFavorites()
  }
},

清除测试过程中录入的临时数据

三、程序运行结果

首页
个人页——未登录
个人页——已登录
新闻页
收藏/取消收藏新闻
收藏/取消收藏新闻——个人页相应展示

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

遇到问题：当没有收藏任何一条新闻时，用于存放收藏数量的num数组仍显示为1
解决办法：清理缓存，重新编译后num初值变为0
收获：通过本次实验，我对如何开发一个较为完善可用的前端小程序，有了更加深刻的认识，提高了我的小程序开发的综合能力。

plumageee

关注

15
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
移动软件开发——高校新闻网

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。解决办法：清理缓存，重新编译后num初值变为0收获：通过本次实验，我对如何开发一个较为完善可用的前端小程序，有了更加深刻的认识，提高了我的小程序开发的综合能力。
复制链接

扫一扫