高校新闻网

最新推荐文章于 2024-11-15 19:51:40 发布

33鹅

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量205

点赞数

文章标签：前端 javascript json

本文链接：https://blog.csdn.net/m0_53114829/article/details/126452460

版权

一、实验目标

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

二、实验步骤

一、项目创建

二、页面配置

创建页面文件

detail: 新闻页面 my: 个人页面

创建其他文件
- 添加图片文件
  
  用于存放图片素材。

创建公共JS文件

用于存放公共JS文件。

三、视图设计

导航栏设计

app.json:

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

效果如下：

tabBar设计

在app.json中追加tabBar相关代码。

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

三、页面设计

首页

index.wxml:

<!-- 幻灯片滚动 -->
<swiper indicator-dots 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='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.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: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
      add_date: '2022-08-19'
    }]
  },

个人中心页设计

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

效果如下：

新闻页设计：用于给用户浏览新闻全文。

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

效果如下：

四、逻辑实现

首页逻辑：
- 新闻列表展示：需要在页面JS文件的onload函数中获取新闻列表，并更新到newsList参数中。
```
onLoad: function (options) {
    let list = common.getNewsList()
    this.setData({newsList:list})
  },
```
- 点击跳转新闻内容：先为新闻列表项目添加点击事件。
  
  效果如下：

新闻页逻辑：

显示对应新闻：需要在新闻页接收ID编号，并查询对应的新闻内容。

detail.js:

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

此时可以跳转到正确的页面，效果如下。

添加/取消新闻收藏

添加两个button组件作为添加/取消收藏新闻的按钮。

效果如下：

个人中心页逻辑

获取用户信息

在html文件中增加登录选项按钮：

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

然后在js文件中将myLogin函数补全。

myLogin() {
    wx.getUserProfile({
      desc: '获取个人信息',
      success: res => {
        console.log(res);
        this.setData({
          isLogin: true,
          src: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
        this.getMyFavorites();
      }
    })
  },

此时效果：

获取收藏列表

在my.js文件中写入getMyFavorites函数，用于展示真正的新闻收藏列表。

getMyFavorites:function(){
    let info = wx.getStorageInfoSync();
    let keys = info.keys;
    let num = keys.length-1;
    let myList = [];
    for(var i=0;i<num;i++){
      let obj=wx.getStorageSync(keys[i]);
      myList.push(obj);
    }
    this.setData({
      newsList:myList,
      num:num
    });
  },

再在myLogin函数中加入getMyFavorites函数引用。

登陆成功后手动更改新闻的收藏状态：

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

此时效果：

浏览收藏的新闻

修改my.wxml中代码：

之后在my.js文件中添加goToDetail函数的内容。

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

清除临时数据

将所有文件中的临时数据删除后即可得到最终运行结果。

三、程序运行结果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WXtrPSiG-1661071379624)(C:\Users\金知霖\AppData\Roaming\Typora\typora-user-images\image-20220821162900394.png)]$

最终运行结果如上。

四、问题总结与体会

本次实验花费了较长时间，除了很基础、低级的拼写错误、大小写错误之外，也遇到了很多较为艰难的错误。首先是登录又出了问题，忘记getMyInfo函数已经被废弃，因此在登录时花费了很多时间。后来自己写了一个函数myLogin可以运行了。收藏时也遇到了一个问题：我的收藏列表中一直有一个多余的空白收藏，收藏总数也变多了。我们的解决方法是将num值-1，这样最终得出的结果是正确而合理的。

本次实验对我的启发很大，我认为对我自己写小程序也能有很大帮助。