小程序：新闻网_使用wx:if和wx:else属性让未登录时只显示按钮,登陆后只显示头像和昵称。-CSDN博客

本文链接：https://blog.csdn.net/2201_75450113/article/details/132698401

一、实验目标

1、综合所学知识创建完整的前端小程序项目。

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

（注意事项）

1、提供 common.js、图片文件、以及 index 页面的代码，其它部分的代码大家自己完成，下载地址：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip

2、detail页面的 wxss 文件中， .poster image 中的 width 设置为100% 的话，图片总是无法显示。修改为 700rpx 就可以显示。

本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

2.1 首页功能

2.1.1 首页功能需求

（1）首页需要包含幻灯片播放效果和列表。

（2）幻灯片至少要有3幅图片自动播放。

（3）点击列表可以打开全文。

2.1.2 页面功能需求

（1）阅读全文的页面需要显示标题、图片、正文和日期。

（2）允许点击按钮将当前阅读的添加到本地收藏夹中。

（3）已经收藏过的也可以点击按钮取消收藏。

2.1.3 个人中心页功能需求

（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。

（2）登录后读取当前用户的收藏夹，展示收藏的列表。

（3）收藏夹中的可以直接点击查看内容。

（4）未登录状态下收藏夹显示为空。

2.2 项目准备

创建项目并创建页面文件（将app.json文件内pages属性中的“pags/logs/logs删除，并追加“pages/detail/detail”和“pages/my/my”，ctrl+S保存）。
删除utils和logs目录及其内部所有内容。
删除index.wxml、index.wxss和app.wxss全部代码。
删除index.js和app.js中全部代码。并分别输入page和app回车补全函数。

2.3 页面设计

在app.json中对window属性进行重新配置定义导航栏效果。
在app.json中追加tarBar的相关属性代码。

请添加图片描述

幻灯片：swiper组件；列表：view容器，内部使用数组循环。为组件添加wx:for属性循环显示幻灯片内容和列表数据。具体代码见2.4。
个人中心页设计。包含两个板块，登录页面用于显示用户的微信头像和昵称，“我的收藏”用于显示收藏在本地的列表。接着为其添加内容，代码如2.5所示。app.wxss中样式挪用index.wxss即可。

请添加图片描述

页面设计。在编译模式下添加编译模式，追加detai页面的直接浏览效果。修改detail.wxml和detail.wxss代码， .poster image 中的 width 设置为100% 的话，图片总是无法显示。修改为 700rpx 就可以显示。

2.4 逻辑实现

2.4.1 公共逻辑和首页逻辑

假设已经获得数据，放在js文件（utils/common.js）中，添加自定义函数getNewList和getNewDetail，分别用于获取列表信息和指定ID的正义内容。最后在common.js中使用module.exports语句暴露函数出口。并在各页面的js文件顶端引用公共js文件。
onload函数获取列表，并更新到data属性的newList参数中，并为标题添加点击事件，为text组件添加自定义触摸事件goToDetail，并且使用data-id属性携带了ID编号。
在新闻页接受ID编号，并查询对应的内容，在，detail.wxml中追加button组件添加取消收藏的按钮，并使用wx:if和wx:else属性使其每次只存一个。在detail.js中追加addFavorites和cancelFavorites函数，用于点击添加取消收藏。相关代码件2.4代码。

2.4.2 个人中心逻辑

功能实现：获取微信用户信息，获取收藏列表，浏览收藏的信息。

获取微信用户信息。button作为登录按钮，使用wx:if和wx:else属性让未登录时只显示按钮，登录后只显示头像和按钮。
获取收藏列表。在data.js中追加getMyFavorite函数，展示真正的收藏列表。修改getMyInfo，追加getMyFavorites函数的调用。修改onshow函数，一登陆就刷新收藏列表。
浏览收藏。text组件添加自定义函数goToDetail函数，detail-id携带了ID编号。

2.5 代码

2.5.1 html

<!--pages/index/index.wxml-->
<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500" circular >
  <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>
<!--pages/detail/detail.wxml-->
<view class="container">
  <view class="title">{{article.title}}</view>
  <view class="poster">
  	<image src="{{article.poster}}" mode="widthFix"/>
  </view>
  <view class="content">
      <text>{{article.content}}</text>
  </view>
  <view class="add_date">{{article.add_date}}</view>
  <button wx:if = '{{isAdd}}' plain bindtap = 'cancelFavorites'>❤已收藏</button>
  <button wx:else plain bindtap = 'addFavorites'>❤点击收藏</button>
</view>
<!--pages/my/my.wxml-->
<view id="myLogin">
  <block wx:if="{{isLogin}}">
    <image id="myIcon" src="{{src}}" />
    <text id="nickName">{{nickName}}</text>
  </block>
  <button wx:else  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 bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
        </view>
	</view>
</view>

2.5.2 css

/*新闻列表区域样式*/
/*2-1新闻列表容器*/
swiper{
  height: 400rpx;
  width: 100%;
}

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

.container{
  padding: 15rpx;
  text-align: center;
}

.title{
  font-size: 35rpx;
  line-height: 35rpx;
  text-align: center;
}

.poster image{
  width: 100%;
}

.content text{
  text-align: left;
  font-size: 30rpx;
  line-height: 35rpx;
}

.add_date{
  font-size: 30rpx;
  text-align: right;
  line-height: 30rpx;
  margin-right: 25rpx;
  margin-top: 20rpx;
}

button{
  width: 250rpx;
  height: 100rpx;
  margin: 20rpx auto;
}

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

2.5.3 js

// 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
    })
  }
})
// pages/detail/detail.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
  /**
   * 页面的初始数据
   */
  data: {
     article:{
      id: '304083',
      title: '',
      poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg',
      content: ' ',
      add_date: '2022-08-09'
     }
  },

  gotoDetail:function(e) {
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  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
        })
      }
    }
  },
  addFavorites: function(options) {
    let article = this.data.article;
    wx.setStorageSync(article.id,article);
    this.setData({idAdd:true});
  },
  cancelFavorites:function(){
    let article = this.data.article;
    wx.removeStorageSync(article.id);
    this.setData({idAdd:false});
  }
})
// pages/my/my.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    nickName:'未登录',
    src:'/image/index.png',
    num:0,
    newsList:[]
  },
  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
    });
  },
  getMyInfo:function(e) {
    wx.getUserProfile({
      desc: '展示用户信息',
      success:(res)=>{
            this.setData({
              src:res.userInfo.avatarUrl,
              nickName:res.userInfo.nickName,
              isLogin:true
            })
      }
    })
    
  },
  goToDetail:function(e){
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url:'../detail/detail?id='+id
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(this.data.isLogin){
      this.getMyFavorites()
    }
  }
})