移动软件开发实验4

最新推荐文章于 2024-10-10 10:46:31 发布

weixin_52159653

最新推荐文章于 2024-10-10 10:46:31 发布

阅读量106

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52159653/article/details/127063470

版权

移动软件开发实验4

一、实验目标

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

二、实验步骤

1.创建项目

·创建页面文件

·删除和修改文件

·创建其他文件

2.视图设计

2.1导航栏设计

添加app.json代码，更改导航栏背景色为蓝色、字体色为白色，并可以切换首页和个人中心页。代码实现如下：

//app.json
{
    "pages": [
        "pages/index/index",
        "pages/detail/detail",
        "pages/my/my"
    ],
    "window": {
        "navigationBarBackgroundColor": "#328EEB",
        "navigationBarTitleText": "我的新闻网",
        "navigationBarTextStyle": "white"
    },
    "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": "我的"
            }
        ]
    },
    "sitemapLocation": "sitemap.json"
}

公共页面代码：

 /**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%;
    display:block;
    line-height:60rpx;
    font-size:10pt;
}

2.2页面设计

首页（index）

需求分析：首页需要包含幻灯片播放效果和新闻列表；幻灯片至少要有3幅图片自动播放；点击新闻列表可以打开新闻全文。首页设计代码如下：

<!--pages/index/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 bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
  </view>
</view>

/**index.wxss**/
/*pages/index/index.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;
}

2.3 新闻页（detail）

需求分析：阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；允许点击按钮将当前阅读的新闻添加到本地收藏夹中；已经收藏过的新闻也可以点击按钮取消收藏。新闻页代码如下：

<!--·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='cancleFavorites'>♥已收藏</button>
    <button wx:else plain bindtap='addFavorites'>♥点击收藏</button>
</view>

detail.wxss
/* pages/detail/detail.wxss */
.container{
    padding:15rpx;
    text-align:center;
}

/*新闻标题*/
.title{
    font-weight:800;
    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:300rpx;
    height:100rpx;
    margin:20rpx auto;
}

2.4 个人中心页（my）

需求分析：未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。登录后读取当前用户的收藏夹，展示收藏的新闻列表。收藏夹中的新闻可以直接点击查看内容。未登录状态下收藏夹显示为空。个人中心页设计代码如下：

<!--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" bindtap="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>◇{{news.title}}{{news.add_date}}</text>
        </view>
    </view>
</view>

/* pages/my/my.wxss */

#myLogin{
    background-color:#328EEB;
    height:500rpx;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
}

/*1-1 头像图片*/
#myIcon{
    width:200rpx;
    height:200rpx;
    border-radius:50%;
}

/*1-1 微信昵称*/
#nickName{
    color:white;
}

/*1-1 我的收藏*/
#myFavorites{
    padding:20rpx;
}

3.逻辑实现

3.1首页逻辑

功能分析：展示新闻列表；点击新闻标题可以跳转对应的内容页面进行浏览。

代码实现如下：

// pages/index/index.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
  /**
   * 页面的初始数据
   */
  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'}
    ],
  },
  /**
   * 自定义函数--跳转新页面浏览新闻内容
   */

  goToDetail: function (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.2新闻页逻辑

功能分析：显示对应新闻；可以添加新闻收藏。代码实现如下：

// pages/detail/detail.js

var common = require('../../utils/common')
Page({
    /**
     * 页面的初始数据
     */
    data: {
        
    },

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

    addFavorites:function(options){
        let article=this.data.article;        wx.setStorageSync(article.id,article);
        this.setData({isAdd:true});
    },
    
    cancalFavorites:function(){
        let article=this.data.article;
        wx.removeStorageSync(article.id);
        this.setData({isAdd:false});
},

})

3.3个人中心页逻辑

功能分析：获取微信用户信息；获取收藏列表；浏览收藏的新闻。代码实现如下：

// pages/my/my.js
Page({
    /**
     * 页面的初始数据
     */
    data:{
        num:0
    },

    getMyInfo: function(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，
        // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
          desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            console.log(res)
            this.setData({
                isLogin:true,
                src: res.userInfo.avatarUrl,
                nickName: res.userInfo.nickName
            })
            wx.setStorageSync('islogin', true)
          }
        })
        this.getMyFavorites();
    },
    goToDetail:function(e){
      let id=e.currentTarget.dataset.id;
      wx.navigateTo({
        url:'../detail/detail?id='+id,
      })
    },
    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
        });
      },
        /**
     * 生命周期函数--监听页面显示
     */
    onShow:function() {
        if(this.data.isLogin){
          this.getMyFavorites()
        }
      },  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        if (wx.getUserProfile) {
            this.setData({
                canIUseGetUserProfile: true
            })
        }
	},
}）