微信小程序开发—高校新闻网页制作

最新推荐文章于 2024-09-02 17:24:12 发布

Sslyda

最新推荐文章于 2024-09-02 17:24:12 发布

阅读量824

点赞数 15

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

本文链接：https://blog.csdn.net/Sslyda/article/details/141822838

版权

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

姓名：林舒坦学号：22020007056 课程名称：中国海洋大学24夏《移动软件开发》实验5：高校新闻网

一、实验目标

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

二、实验步骤

1.预先准备

本次实验所要使用的图片素材与样例下载链接如下

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

解压后将images和utils文件夹替换到新建的项目中的相应位置即可

2.创建微信小程序项目以及内部文件修改配置

使用微信开发者工具创建一个新项目，并进行如下操作：

(1)删除utils文件夹及其内部所有内容。
(2)删除 pages文件夹下的 logs目录及其内部所有内容。
(3)删除index. wxml和 index. wxss中的全部代码。
(4)删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
(5)删除app. wxss中的全部代码。
(6)删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。
(7)添加一个新文件夹，命名为images，用下载的文件夹替换其内容。
(8)utils文件夹同上

3.初始化配置

(1)导航栏和下方的tab设计
在app.json中添加代码如下:

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "每🐏新闻-咩~",
    "navigationBarBackgroundColor": "#328EEB"
  },
  "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)首页设计
index.WXML代码片段修改如下：

<!--幻灯片-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
    <block wx:for="{{swiperImg}}"wx:key='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="id">
        <image src='{{news.poster}}'></image>
        <text bindtap='goToDetail'data-id='{{news.id}}'>⬘{{news.title}}--{{news.add_date}}</text>
    </view>
</view>

index.WXSS修改如下：

swiper{
    height: 400rpx;
}
swiper image{
    width: 100%;
    height: 100%;
}

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

同时在index.js对数据进行初始化如下：

Page({
    data:{
        swiperImg:[
            {src:'https://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg'},
            {src:'https://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg'},
            {src:'https://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg'}
        ],
        newsList:[{      //这里的list你可以从提供的utils里面随便拿一个过来套上做测试样例
            id: '',
            title: '',
            poster: '',
            content: '',
            add_date: ''
        }]
    },
})

效果如图
在这里插入图片描述

(2)个人中心页面设计
将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'wx:if='{{num}}'>
        <view class='list-item'wx:for="{{newsList}}"wx:for-item="news"wx:key="id">
            <image src='{{news.poster}}'></image>
            <text bindtap='goToDetail'data-id='{{news.id}}'>⬘{{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;
}

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

js文件中对数据初始化如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    nickName:'未登录',
    src:'/images/index.png',
    newsList:[{               //这里同上随便拿一条数据放进去当作样例
        id: '',
        title: '',
        poster: '',
        content: '',
        add_date: ''
    }],
    num:0
  },
})

在这里插入图片描述

(3)新闻页面设计
将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 bindtap='cancelFavorites'>❤已收藏</button>//这两处的button
    <button wx:else plain bindtap='addFavorites'>❤点击收藏</button>//先注释掉便于调整外观
</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;
}
button{
    width: 250rpx;
    height: 100rpx;
    margin: 20rpx auto;
}

JS文件与之前相同：

Page({

  /**
   * 页面的初始数据
   */
  data: {
        article:{    //记得填数据测试
            id: '',
            title: '',
            poster: '',
            content: '',
            add_date: ''
            },
    },
})

此时效果如图
在这里插入图片描述

5.逻辑实现

(1)首先在每个文件夹的js中最上方添加如下代码引用存在utils里面的数据和函数

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

(2)首页逻辑
将首页index.js文件添加代码如下：

Page({
    ······
    goToDetail(e){    //该函数实现跳转至新闻页
        let id=e.currentTarget.dataset.id;
        wx.navigateTo({
          url: '../detail/detail?id='+id,
        })
    },
    onLoad:function(options){    //该函数实现获取新闻列表信息
        let list=common.getNewsList()
        this.setData({newsList:list})
    }
  })

(3)新闻页逻辑
将detail.js文件添加代码如下：

Page({
    ······
    onLoad(options) {             //获得跳转时携带的ID编号，同时显示点击的新闻内容
        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
                })
            }
        }
    },
    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});
  },
  })

注意：现在把之前WXML中的button的注释去掉
在这里插入图片描述

在这里插入图片描述

(4)个人中心页逻辑
在my.js文件中追加代码如下：

getMyInfo:function(e){ //获取用户个人信息
      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(e){         //实现从收藏列表点击跳转到新闻页面
        let id=e.currentTarget.dataset.id;
        wx.navigateTo({
        url: '../detail/detail?id='+id,
        })
    },

在这里插入图片描述

同时在onShow函数中添加监听：

  onShow() {    //用于检测是否已经登陆，如果已经登陆就刷新收藏列表
    if(this.data.isLogin){
        this.getMyFavorites()
    }
  },

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

在本次实验中按照实验方案进行微信小程序新闻网的制作，在实验过程中遇见的主要问题在于还是微信更新后getuserInfo接口无法再次使用，这里我调整了工具的版本为2.20.3.才能够调用接口
通过本次实验能够让我在开发过程中熟练掌握真机预览、调试等操作，同时掌握了本地缓存的使用方法，为我后期的项目数据存储提供了技术指导，收获颇丰。

Sslyda

关注

15
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发—高校新闻网页制作

在本次实验中按照实验方案进行微信小程序新闻网的制作，在实验过程中遇见的主要问题在于还是微信更新后getuserInfo接口无法再次使用，这里我调整了工具的版本为2.20.3.才能够调用接口通过本次实验能够让我在开发过程中熟练掌握真机预览、调试等操作，同时掌握了本地缓存的使用方法，为我后期的项目数据存储提供了技术指导，收获颇丰。
复制链接

扫一扫