实验5：高效新闻网

一、实验目标

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

二、实验步骤

1.创建小程序项目

2.在app.json文件pages属性中将pages/logs/logs删除，并追加pages/detail/detail和pages/my/my语句，保存生成detail和my目录

3.删除不必要的系统默认文件和函数

4.创建images文件夹和utils文件夹，其中images文件夹存放图标文件

5.在app.json文件中设置导航栏背景颜色、字体和标题，并追加tarBar属性代码

6.页面设计：首页包括幻灯片滚动和新闻列表两部分，其中幻灯片使用swiper组件实现，新闻列表使用view容器搭配数组循环实现，在pages/index/index.wxml文件中添加相应组件实现代码后再在pages/index/index.wxss文件中添加相应的属性设置代码；个人中心页包括登录面板和我的收藏两部分，在pages/my/my.wxml文件中添加相应组件实现代码后再在pages/my/my.wxss文件中添加相应属性设置代码即可；新闻页即为用户点击首页新闻列表后进入的页面，包括新闻标题、新闻图片、新闻日期三部分，在detail相关文件中添加布局代码和属性格式代码即可

7.将老师给的common.js文件复制到utils文件夹目录下

8.逻辑设计：在pages/detail/detail.js文件添加自定义跳转新闻页面函数geTodetail、点击收藏函数addFavorites、取消收藏函数cancelFavorites，并在相应的wxml文件中绑定点击事件；在pages/my/my.js文件中添加获取用户信息函数getUserProfile、获取收藏列表函数getMyFavorites和浏览新闻函数geTodetail，并在并在相应的wxml文件中绑定点击事件

9.各文件代码如下：

pages/index/index.js

var common=require('../../utils/common.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})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

pages/index/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>

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

pages/my/my.js

// pages/my/my.js
var common=require('../../utils/common.js')
Page({

    /**
     * 页面的初始数据
     */
    data: {
        nickName:'',
        src:'',
        num:0,
        name:'立即登录'
    },
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:function(e){
    let id=e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
},
getUserProfile(e){
    wx.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
            console.log("res.userInfo",res)
            let user = res.userInfo;
            this.setData({
                src:user.avatarUrl,
                name:user.nickName
            })
        },
        fail: (res) => {
            console.log("获取用户信息失败",res)
        }
      })
      this.getMyFavorites();
},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let user=wx.getStorageSync('user')
        this.setData({
            userInfo:user
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        if(this.data.isLogin){
            this.getMyFavorites()
        }
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

pages/my/my.wxml

<!--pages/my/my.wxml-->
<!--登录面板-->
<view id='myLogin'>
    <block >
        <image id='myIcon' src="{{src}}"></image>
        <text  bindtap='getUserProfile' id='nickName'>{{name}}</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="id">
            <image src="{{news.poster}}"></image>
            <text bindtap='goToDetail'data-id='{{news.id}}'>{{news.title}}--{{news.add_date}}</text>
        </view>
    </view>
</view>

pages/my/my.wxss

/* pages/my/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;
}

pages/detail/detail.js

const common = require("../../utils/common");

// pages/detail/detail.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        num:0
    },
    goToDetail:function(e){
        let id=e.currentTarget.dataset.id;
        wx.navigateTo({
          url: '../detail/detail?id='+id,
        })
    },
    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});
    },
    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]);
        }
        this.setData({
            newsList:myList,
            num:num
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    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
                })
        }
        }
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

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

pages/detail/detail.wxss

/*整体容器*/
.container{
    padding:15rpx;
    text-align: center;
}
/*新闻标题*/
.title{
    font-size: 14pt;
    line-height: 80rpx;
}
/*新闻图片*/
.poster image{
    width:700rpx;
}
/*新闻正文*/
.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;
}

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",
          "text": "首页",
          "iconPath": "images/index.png",
          "selectedIconPath": "images/index_blue.png"
      },
      {
          "pagePath":"pages/my/my",
          "iconPath": "images/my.png",
          "selectedIconPath": "images/my_blue.png",
          "text": "我的"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

三、程序运行结果

四、问题总结与体会

​ 通过这次实验，我学会了用swiper组件来实现图片滚动功能以及用tabBar来将小程序下面分成几个页面，更熟悉了获取用户信息、页面跳转等功能的实现。