高校新闻网——微信小程序

一、实验目标

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

二、实验步骤

1.创建项目

依次输入项目名称、选择目录、APPID等，注意选择不使用云服务。

2.修改添加与删除文件（及恢复文件初始化）

删除logs文件夹、utils文件夹，清空index.js、index.json、index.wxss、app.wxss文件中的内容，删除app.json文件中page属性里的"pages/logs/logs"，以及上一行的逗号，新增detail和my两个页面，新增images和utils文件夹分别用于存放图片资源和公共JS文件。

3.编写文件

（1）编译导航栏

"window": {
​
  "navigationBarTextStyle": "white",
​
  "navigationBarTitleText": "我的新闻网",
​
  "navigationBarBackgroundColor": "#328EEB"
​
 },

通过对window属性中内容进行修改，可以达到修改导航栏的作用。例如将原本白底黑字修改为蓝底白字，并修改文字内容。

（2）tabBar设计

在app.json中添加代码以启用tabBar，同时引用images中的图片素材修改未选中和选中时的样式。

"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":"我的"
​
   }
​
  ]

（3）页面设计

1.首页：在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>

2.我的：在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" bindgetuserinfo="getMyInfo">未登录，点此登录</button>
</view>
<!--收藏页面-->
<view id='myFavorites'>
  <text>我的收藏（{{num}}）</text>
  <!--收藏的新闻列表-->
  <view id='new-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>

3.详情：在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='cancelFavorites'>已收藏</button>
  <button wx:else plain bindtap ='addFavorites'>点击收藏</button>
</view>

（4）页面元素的整理

1.全局样式：在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%;
 line-height: 60rpx;
 font-size: 10pt;
}

2.首页：在index.wxss中编写代码

/*1-1swiper组件*/
​
swiper{
​
 height: 400rpx;
​
}
​
/*swiper中的照片*/
​
swiper image{
​
 width: 100%;
​
 height: 100%;
​
}

3.我的：在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;
​
}

4.详情：在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;
​
}

（5）页面逻辑的实现

1.公共逻辑：引入老师提供的common.js文件即可。

2.首页逻辑：在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) {
​
  //获取携带的data-id数据
​
  let id = e.currentTarget.dataset.id;
​
  //携带新闻id进行页面跳转
​
  wx.navigateTo({
​
   url: '../detail/detail?id=' + id
​
  })
​
 },
​
 /**
​
  \* 生命周期函数--监听页面加载
​
  */
​
 onLoad: function(options) {
​
  //获取新闻列表
​
  let list = common.getNewsList()
​
  //更新列表数据
​
  this.setData({
​
   newsList: list
​
  })
​
 }
​
})

3.我的逻辑：在my.js中编写代码。

var common = require('../../utils/common.js')
​
Page({
​
 /**
​
  \* 页面的初始数据
​
  */
​
 data: {
​
  
​
  num:0
​
 },
​
 getMyInfo:function(e){
​
  let info=e.detail.userInfo;
​
  console.log(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 -1; 
​
   let myList = [];
​
   for (var i =0; i<num; i++){
​
   let obj = wx.getStorageSync(keys[i]);
​
   if(obj){
​
    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,
​
  })
​
 },
​
 /**
​
  \* 生命周期函数--监听页面显示
​
  */
​
 onShow() {
​
  if(this.data.isLogin){
​
   this.getMyFavorites()
​
  }
​
 },
​
})

4.详情逻辑：在detail.js中编写代码。

var common = require('../../utils/common.js')
​
// pages/detail/detail.js
​
Page({
​
 /**
​
  \* 页面的初始数据
​
  */
​
 data: {
​
  isAdd:false
​
 },
​
 goToDetail:function(e){
​
  let id =e.currentTarget.dataset.id;
​
  wx.navigateTo({
​
   url: '../detail/detail?id='+id,
​
  })
​
 },
​
 /**
​
  \* 生命周期函数--监听页面加载
​
  */
​
 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,
​
     isAdd:false
​
    })
​
   }
​
  }
​
  
​
 },
​
 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
​
  });
​
 }
​
})

三、程序运行结果

运行结果如下：

首页

我的（未登录）

我的（已登录）

详情（未收藏）

详情（已收藏）

四、问题总结与体会

通过这次实验也令我收获了很多，首先对于微信小程序的本地储存有了初始的了解。同时，对于小程序中的公共逻辑和全局样式有了部分的认识。已打算运用到个人项目中。