微信小程序，实现一个简易的新闻网

誓言唯美RQL

已于 2022-05-24 14:50:10 修改

阅读量6.3k

点赞数 12

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

于 2022-05-16 15:28:08 首次发布

本文链接：https://blog.csdn.net/qq_45780016/article/details/124800470

版权

废话不多说，先上效果图，功能实现了广播、轮播图、登入微信用户、获取收藏列表、获取新闻详情页面、页面跳转…
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
项目结构图：

模拟数据库页面data

data.js

/**存放公共js文件 */
//临时新闻数据
const news = [{
  id: '1',
  title: '标题一',
  
  poster: '在线图片链接地址',
  add_date: '2022-05-07',
  detail: '详细内容'
},
{
  id: '2',
  title: '标题2',
  poster: '在线图片链接地址',
  add_date: '2022-05-08',
  detail:'详细内容'
},
{
  id: '3',
  title: '标题三',
  poster: '在线图片链接地址',
  add_date: '2022-05-09',
  detail:'详细内容'
}
]

//获取新闻列表
function getNewList() {
let list = [];
for(var i = 0; i < news.length; i++) {
  let obj = {};
  obj.id = news[i].id;
  obj.poster = news[i].poster;
  obj.content = news[i].detail;
  obj.add_date = news[i].add_date;
  obj.title = news[i].title;
  // console.log('obj',obj);
  list.push(obj);
}
return list;
}

//获取新闻内容
function getNewsDetail(newsID) {
let message = {
  code: '404',
  news: {}
};
for (var i = 0; i < news.length; i++) {
  if (newsID == news[i].id) {
    message.code = '200',
      message.news = news[i];
    break;
  }
}
return message;
}

module.exports = {
getNewList : getNewList,
getNewsDetail : getNewsDetail
}

app.json

{
  "pages": [
    "pages/index/index",
    "pages/mefa/mefa",
    "pages/details/details",
    "data/data.js"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "大学新闻网",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "images/1a.png",
        "selectedIconPath": "images/1b.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/mefa/mefa",
        "iconPath": "images/3a.png",
        "selectedIconPath": "images/3b.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

index.js

var common = require('../../data/data.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
      imageUrl:[
        "../../images/b.jpg",
        "../../images/c.jpg",
        "../../images/d.jpg"
      ],
      indicatorDots:true,        // 是否显示面板指示点
      indicatorColor:'rgba(0, 0, 0, .3)',    // 指示点颜色
      indicatorActiveColor:'rgba(0, 0, 0,1)',    // 当前选中的指示点颜色
      autoplay:true,    // 是否是自动切换
      current:0,    // 初始展示的图片
      interval:3000,   // 自动切换时间间隔
      duration:1000,   // 播放时长
      vertical:false,  // 滑动方向是否为纵向(默认false)
      circular:false,  // 是否采用衔接滑动
      previousMargin:"20px",  // 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
      nextMargin:"20px",     // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
      snapToEdge:true,        // 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素
      displayMultipleItems:"2",  // 同时显示的滑块数量（同屏轮播多个图片）
      easingFunction:"easeInOutCubic",  // 指定 swiper 切换缓动动画类型(default--默认值，linear--线性动画，easeInCubic--缓入动画，easeOutCubic--缓出动画，easeInOutCubic--缓入缓出动画)  
      newsList:[]
  },
  goToDetail:function(e){
    //获取携带data-id的数据
    let id = e.currentTarget.dataset.id
    //携带新闻ID进行页面跳转
    wx.navigateTo({
        url:'../details/details?id='+id,
    })
},
/**生命周期函数--监听页面加载*/
onLoad:function (options) {
  let list = common.getNewList( )
  this.setData({
      newsList:list
  })
},
})

index.wxml

<van-notice-bar left-icon="volume-o" text="欢迎来到大学新闻网，本网收录一切大学校园的精彩新闻故事！" />
<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" current="{{current}}" circular="false" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imageUrl}}">
    <swiper-item>
      <image src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>
<view class="maintop">
  <view class="main1">
    <view class="a1">
      <view class="tupian1">
        <image src="../../images/a.png" />
      </view>
      <view class="wenzi">校园书刊</view>
    </view>
    <view class="a2">
      <view class="tupian1">
        <image src="../../images/b.png" />
      </view>
      <view class="wenzi">名人传记</view>
    </view>
    <view class="a3">
      <view class="tupian1">
        <image src="../../images/c.png" />
      </view>
      <view class="wenzi">民间传说</view>
    </view>
  </view>
  <view class="main2">
    <view class="a1">
      <view class="tupian1">
        <image src="../../images/d.png" />
      </view>
      <view class="wenzi">历史文化</view>
    </view>
    <view class="a2">
      <view class="tupian1">
        <image src="../../images/e.png" />
      </view>
      <view class="wenzi">歇后语</view>
    </view>
    <view class="a3">
      <view class="tupian1">
        <image src="../../images/f.png" />
      </view>
      <view class="wenzi">诗词</view>
    </view>
  </view>
</view>
<!--新闻列表-->
<view id='news-list'>
  <view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{item.id}}">
      <image src="{{news.poster}}"></image>
      <text bindtap='goToDetail' data-id="{{news.id}}">{{news.title}}
        ——{{news.add_date}}</text>
  </view>
</view>

index.wxss

swiper,swiper-itemm,swiper-item image{
  width: 100%;
  height: 400rpx;
}
image{
  width: 30%;
  height: 50%;
}
.maintop{
height: 300rpx;
width: 90%;
margin-left: 5%;
margin-top: 5%;
border-radius: 5px;
background-color:beige;
}
.main1{
  height: 150rpx;
  width: 100%;
}
.main2{
  height: 150rpx;
  width: 100%;
}
.main3{
  height: 150rpx;
  width: 100%;
}
.a1{
  float: left;   
  width: 30%;
  height: 100%;
}
.a2{
  float: left; 
  margin-left: 5%;  
  width: 30%;
  height: 100%;
}
.a3{
  margin-left: 5%;
  float: left;   
  width: 30%;
  height: 100%;
}
.tupian1
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70%;
}
.wenzi
{
  display: flex;
  justify-content: center;
  font-size: 12px;
  width: 100%;
  height: 30%;

}

/*news-list组件*/
#news-list{
  min-height: 600rpx;
  padding: 15rpx;
  margin-top: 20rpx;
}
/**/
.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: 12pt;
}

mefa.js

Page({
  data: {
      isLogin: false,
      number: 0,
      nickName: "未登录",
      src: "../../images/login.png",
      newsList: [],
  },
  getUserProfile(e) {
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          //   console.log("用户信息",res)
            let info = res.userInfo
          this.setData({
              src:info.avatarUrl,
              nickName:info.nickName,
              isLogin:true
          });
          //获取新闻列表
          this.getMyFavorites()
        }
      })
    },
  //更新number
  getMyFavorites: function () {
      let info = wx.getStorageInfoSync() //读取本地缓存信息
      console.log('更新number', info);
      let keys = info.keys //获取全部key信息
      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,
          number: num
      })
  },
  goToDetail: function (e) {
      //获取携带data-id的数据
      let id = e.currentTarget.dataset.id
      //console.log(e)
      //携带新闻ID进行页面跳转
      wx.navigateTo({
          url: '../details/details?id=' + id,
      })
  },
  onShow: function () {
      if (this.data.isLogin) {
          this.getMyFavorites()
      }
  },
})

mefa.wxml

<!--登陆页面-->
<view class="myLogin">
  <block wx:if="{{isLogin}}">
    <image src="{{src}}"></image>
    <text>{{nickName}}</text>
  </block>

  <button wx:else bindtap="getUserProfile">未登录，点此登录</button>
</view>
<!--收藏列表-->
<view class="myFavorite">
  <text>我的收藏({{number}})</text>
  <view id='news-list'>
    <view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{item.id}}">
      <image src="{{news.poster}}"></image>
      <text bindtap='goToDetail' data-id="{{news.id}}">{{news.title}}
        ——{{news.add_date}}</text>
    </view>
  </view>
</view>

mefa.wxss

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

.myLogin image {
  height: 200rpx;
  width: 200rpx;
  border-radius: 50%;
}

.myLogin text {
  color: white;
}

/*收藏列表*/
.myFavorite {
  padding: 20rpx;
}
/*news-list组件*/
#news-list{
  min-height: 600rpx;
  padding: 15rpx;
  margin-top: 20rpx;
}
/**/
.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: 12pt;
}

details.js

var common = require('../../data/data.js')
Page({
    data: {
        article: {},
        isAdd :false
    },
    //添加收藏
    addFavorites:function(){
        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
        })
    },
    /**生命周期函数--监听页面加载*/
    onLoad:function (options){
        let id = options.id
        //检查当前新闻是否在收藏夹中
        var newarticle = wx.getStorageSync(id)
        //已存在
        if(newarticle != ''){
            this.setData({
                isAdd :true,
                article : newarticle
            })
        }
        //不存在else{
        else{
            let result = common.getNewsDetail(id)//获取新闻内容
            console.log(result.news)
            if(result.code == '200'){
                this.setData({
                    article:result.news,
                    isAdd :false
                })
            }
        }
    },
    
})

details.wxml

<view class="container">
    <view class="title">{{article.title}}</view>
    <view class="poster">
        <image src="{{article.poster}}"></image>
    </view>
    <view class="content">
        <text>{{article.detail}}</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>

details.wxss

/* pages/detail/detail.wxss */
.container {
  padding: 15rpx;
}

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