My fifth miniprogram~

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

（一）功能介绍

在本实验中实现的功能如下：

（1）基本功能

1. 实现底部导航栏功能

2. 实现轮播图

3. 实现文章列表对应文章地址跳转功能

4. 实现收藏功能并添加到我的收藏中功能

（2）额外功能

1. 实现轮播图图片对应文章地址跳转功能

（二）功能实现

（1）基本功能

1. 实现底部导航栏功能

由于底部导航栏会适用在全局页面，因此我们直接在app.json中进行定义。

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

微信小程序自带tabBar用于对导航栏进行定义，实现了导航栏样式设计、选中前后图标变化、跳转页面等功能。

• color：用于设置在未选中时文字的颜色。

• selectedcolor：用于设置在选中后文字的颜色。

• list：包含可跳转页面的数量，直观表示即为导航栏中图表的个数。

• pagePath：用于链接要跳转的页面

• iconPath：用于设置未选中时的图标路径。

• selectedIconPath：用于设置选中时的图标路径。

• text：导航文字。

2. 实现轮播图

/*index.wxml*/
<swiper indicator-dots interval="5000" duration="500" autoplay >
  <block wx:for="{{swiperImg}}" wx:key="swiper{{index}}">
    <swiper-item>
      <!-- 额外添加功能，给图片添加文章链接，点击大屏图片能够直接划至对应文章。 -->
      <image src="{{item.src}}" class="slide-image"></image>
    </swiper-item>
  </block>
</swiper>
​

通过利用swiper组件进行轮播图的实现。参数介绍如下：

• indicator-dots：用于显示轮播图下的导航小点。

• interbal：用于设置轮播图自动切换的时间间隔，以ms为单位。

• duration：用于设置轮播图切换动画的持续时间。以ms为单位。

• autoplay：用于控制轮播图是否自动播放。

之后以微信小程序自带的wx:for=''和wx:key=''进行图片列表中图片的循环，实现轮播图效果。

3. 实现文章列表对应文章地址跳转功能

/*index.wxml*/
<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>

/*index.js*/  
goToDetail:function(e){
    //获取携带的 data-id 数据
    let id = e.currentTarget.dataset.id;
    //携带新闻ID进行页面跳转
    wx.navigateTo({
    url:'../detail/detail?id=' + id
  })
}

通过将文章地址、id号、文章标题存入newsList列表中，随后利用wx:for="{{newsList}}"、wx:for-item="news"、wx:key="{{news.id}}"实现将新闻列表展示在页面中，并利用我们给列表单个元素命名的news获取列表对应新闻封面的地址和id号。

获取封面地址用于在新闻列表中展示新闻场景，获取id号用于跳转到相应的文章细节页面。

bindtap='goToDetail'决定点击标题时调用goToDetail函数并传入数据id使得跳转到相应的文章页面，实现文章列表对应相应文章地址跳转功能。

在收藏列表中实现对应文章列表跳转对应文章地址的方法如上所示。

4. 实现收藏功能并添加到我的收藏中功能

/*detail.wxml*/
<button wx:if ='{{isAdd}}' plain bindtap= 'cancelFavorites'>❤已收藏</button>
<button wx:else plain bindtap= 'addFavorites'>❤点击收藏</button>

此部分定义了收藏按钮的实现样式和相关请求及回应。

首先利用wx:if='{{isAdd}}'判断此文章是否存在我的列表中，若是，则可进行取消收藏操作；若否，可进行添加收藏。plain函数实现了按钮只显示边框和文字。

在点击此按钮时，能够通过bindtap点击请求分别实现addFavorites和cancelFavorites函数，即实现添加收藏和取消收藏功能，两个函数实现逻辑如下。

/*detail.js*/
addFavorites:function(options){
    let article = this.data.article;
    wx.setStorageSync(article.id,article);
    this.setData({isAdd:true});
  },
  cancelFavorites:function(options){
    let article = this.data.article;
    wx.removeStorageSync(article.id);
    this.setData({isAdd:false});
  },

同时我们需要实现在我的页面中添加已经收藏的文章至我的收藏列表。

/*my.wxml*/
<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>

首先我的收藏实现样式代码如上，与主页面中显示文章列表实现方法相同，在此不再细谈，重点看在文章页面进行收藏后我的收藏列表中出现收藏文章的实现逻辑。

/*my.js*/  
data:{
    num=0
},
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
        });
  },

num表示我的收藏列表中收藏文章数，初始化为0。

在getMyFavorites()函数中，我们将在detail.js中获取的文章id进行get并存入info，之后获取id的数值和总个数并添加到myList列表中，利用setData将myList作为更新后的收藏列表并显示更新数据。

（2）额外功能

1. 实现轮播图图片对应文章地址跳转功能

/*index.wxml*/
<swiper indicator-dots interval="5000" duration="500" autoplay >
  <block wx:for="{{swiperImg}}" wx:key="swiper{{index}}">
    <swiper-item>
      <!-- 额外添加功能，给图片添加文章链接，点击大屏图片能够直接划至对应文章。 -->
      <image src="{{item.src}}" class="slide-image" bindtap='goToDetail' data-id='{{index + 1}}' ></image>
    </swiper-item>
  </block>
</swiper>

通过在轮播图片上添加bindtap点击请求触发goToDetail函数，为便于寻找对应的文章链接，我将newsList中的文章地址id均设置为从1开始的连续的数值。由于index是从0开始进行计数，因此data-id需要在index基础上+1才可将图片匹配相对应的文章。

同时，在index.js文件中添加goToDetail函数如下。

/*index.js*/  
goToDetail:function(e){
    //获取携带的 data-id 数据
    let id = e.currentTarget.dataset.id;
    //携带新闻ID进行页面跳转
    wx.navigateTo({
    url:'../detail/detail?id=' + id
  })
}

（三）项目建造过程

1. 创建项目所需文件

此处需要特别注明，由于每个页面都用到文章的地址、id、标题、发布时间等数据，并且模拟新闻网我们需要有数据库存储新闻数据，因此我们创建common.js文件用于模拟新闻数据，文件具体内容如下。

//模拟新闻数据
const news = [
  {id: '1',
  title: '中国海大志愿者完成青岛峰会志愿服务',
  poster: 'https://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
  content: ' 8月27日至29日，第五届跨国公司领导人青岛峰会在青岛国际会议中心举办。为全面做好服务保障，确保峰会顺利举行，中国海洋大学招募选派115名志愿者参与峰会志愿服务，志愿者们以饱满的热情完成本次大会的各项工作，累计服务时长3000余小时，用实际行动展现中国海大青年风采。通讯员：周星宇 张卓越 图：段玉军 中国海大青年志愿者',
  add_date: '2022-08-19'},
  {id: '2',
  title: '贵州省人大干部综合能力提升培训班在中国海洋大学举办',
  poster: 'https://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg',
  content: '8月26日至30日，贵州省人大干部综合能力提升培训班（第三期）在中国海洋大学举办。通讯员：宋济汉 甄馨 图：栾清竹',
  add_date: '2024-08-30'},
  {id: '3',
  title: '中国海洋大学开展2024级本科生集中入学教育',
  poster: 'https://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg',
  content: '为帮助2024级本科生尽快适应大学生活，8月27日，学校在崂山校区体育馆举行了2024级本科生集中入学教育。当天的集中教育分为心理健康教育、传染病防控教育和安全教育三个部分。通讯员：孙文景 图：容致远',
  add_date: '2022-08-11'}
];
​
//获取新闻列表
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) { //匹配新闻id编号
      msg.code = '200'; //成功
      msg.news = news[i]; //更新当前新闻内容
      break;
    }
  }
  return msg; //返回查找结果
}
​
// 对外暴露接口
module.exports = {
  getNewsList: getNewsList,
  getNewsDetail: getNewsDetail
}

同时将获取新闻列表和获取文章信息的函数定义于此，利用以下语句在各个.js页面进行声明即可获取数据信息。

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

2. 编写代码

如（二）功能实现所示。

三、问题总结与体会

此次课程我学会了如何构建底部导航栏、如何制作轮播图、如何进行收藏文章的保存并在收藏列表显示以及如何链接文本和页面，是一次新的尝试与成功。

此次实验中遇到的问题仍然是之前存在的由于版本问题，微信小程序自带的getUserInfo函数被弃用而无法获取微信用户的信息，自降版本后发现页面甚至无法加载，问题更加严重，因此此次仍然直接调用空用户信息进行实验。

此次实验中根据在文章列表添加响应函数链接页面地址的方法，我在轮播图上也加入了此功能，能够在点击轮播图图片的时候实现页面的跳转，是一次举一反三的尝试。