wx新闻网demo

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/my",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#328eeb",
    "navigationBarTitleText": "我的新闻网",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息授权"
    }
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#328eeb",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "./pages/image/4.png",
        "selectedIconPath": "./pages/image/5.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "./pages/image/6.png",
        "selectedIconPath": "./pages/image/7.png",
        "text": "我的"
      }
    ]
  }
}

app.wxss

#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;
}
.news-title{
  width: 100%;
  display: block;
  line-height: 60rpx;
  font-size: 10pt;
}

index.wxml

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
<block wx:for="{{swiperImg}}" wx:key="swiper">
<swiper-item>
<image src="{{item.src}}" class="slide-image"></image>
</swiper-item>
</block>
</swiper>

<view id="news-list">
<view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="news">
<image src="{{news.poster}}"></image>
<text class="news-title" bindtap="goToDetail" data-id="{{news.id}}">{{news.title}}----{{news.add_data}}</text>
</view>
</view>

index.wxss

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

index.js

// index.js
// 获取应用实例
const app = getApp()
var common=require("../../utils/common.js")
  

Page({
  data: {
    swiperImg:[
      {src:'../image/1.jpg'},
      {src:'../image/2.jpg'},
      {src:'../image/3.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})
    }, 
)}

detail.wxml

<view class="container" wx:if="{{article.id}}">
<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 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;
}

detail.js

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

  /**
   * 页面的初始数据
   */
  data: {

  },
  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});
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let id=options.id;
    let result=common.getNewsDetail(id)
    if(result.code=='200'){
      this.setData({article:result.news})
    }
    var article = wx.getStorageInfoSync(id)
    if(article !=''){
      this.setData({isAdd:true})
    }
    else{
      this.setData({isAdd:false})
    }
  },
)}

my.wxml

<!--pages/tabBar/tabBar.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">
<view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
<image src="{{news.poster}}"></image>
<text class="news-title" bindtap="goToDetail" data-id="{{news.id}}">{{news.title}}----{{news.add_data}}</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;
}

my.js

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

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
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.getStorageInfoSync(keys[i]);
    myList.push(obj);
  }
  this.setData({
    newList:myList,
    num:num
  });
},
goToDetail:function(e){
  let id=e.currentTarget.dataset.id;
  wx.navigateTo({
    url: '../detail/detail?id='+id,
  })
},
)}

common.js(放在util里面）

const news=[{
  id:'264698',
  title:"外交部：美方借溯源搞政治操弄的险恶用心昭然若揭",
  poster:"../../pages/image/1.jpg",
  content:"赵立坚说，无论美方如何费尽心思抹黑栽赃，都无法消除国际社会对美遍布世界的生物实验室的疑虑。“如果美方心里没鬼，就应该坦坦荡荡邀请世卫组织去美国开展溯源调查，特别是调查德特里克堡生物实验室、北卡罗来纳大学，这才是一个真正关心全球溯源的国家应有的诚意和态度。",
  add_date:'2018-03-05'
},
{
  id:'304038',
  title:'奋斗百年路 启航新征程·全国“两优一先”风采录｜中科院深海所党委：让党旗飘扬在深海科技最前线',
  poster:"../../pages/image/2.jpg",
  content:"将党旗插在深渊科考现场，是中国科学院深海科学与工程研究所（以下简称深海所）党委的惯例。“哪里有研究场所，哪里就有党组织”，多年来，在国家级重大科研项目一线和科考船上建立临时党支部，发挥党员先锋带头作用，把组织力转化成宝贵科研成果，成为深海所党委不断完成高标准海试任务，创造深海科考新纪录的“法宝”。",
  add_date:'2018-03-05'
},
{
  id:'304670',
  title:'携手共建绿色一带一路（命运与共）',
  poster:'../../pages/image/3.jpg',
  content:"生态环境是人类生存和发展的根基，建设美丽家园是人类的共同梦想。中国是全球生态文明建设的参与者、贡献者、引领者。中国始终秉持绿色发展理念，携手各方共建绿色“一带一路”，推动更高水平的互利共赢。",
  add_date:'2018-03-05'
}
];
function getNewsList(){
  let list=[];
  for (var i=0;i<news.length;i++){
    let obj = {};
    obj.id=news[i].id;
    obj.poster=news[i].poster;
    obj.add_date=news[i].add_date;
    obj.title=news[i].title;
    list.push(obj);
  }
  return list;
}
function getNewsDetail(newsID){
  let msg={
    code:'404',
    news:{}
  };
  for(var i=0;i<news.length;i++){
    if(newsID==news[i].id){
      msg.code='200';
      msg.news=news[i]
      break;
    }
  }
  return msg;
}
module.exports={
  getNewsList:getNewsList,
  getNewsDetail:getNewsDetail
}