新闻小程序5——新闻详情页面跳转逻辑实现

公共逻辑

假设已经获取到了数据，是存放在common.js中的，模拟这一动作，在common.js中添加代码

const news=[{
  article: {
  id: '1',
  title: 'miaomiao',
  poster: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
  add_date: '2021-04-07',
  content: ' 程序员不想头秃 '
  }
}]

然后还需要添加自定义函数

//获取新闻列表
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') //引用公共JS文件

首页逻辑

展示新闻列表

在index的onload函数中添加获取和更新新闻的代码

  onLoad: function (options) {
    //获取新闻列表
    let list = common.getNewsList()
    //更新列表数据
    this.setData({newsList:list})
  },

点击跳转新闻详情

index.wxml文件中的新闻列表中的text添加代码使用gotodetail函数

<text bindtap='goToDetail' data-id='{{news.id}}'>⚫️{{news.title}}——{{news.add_date}}</text>

函数在index.js和detail.js中创建

Page({

  //自定义函数
  goToDetail:function(e){
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },
  //.....

同时还需要在detail.js创建onload的函数

  onLoad: function (options) {
    let id = options.id
    let result = common.getNewsDetail(id)
    if(result.code=='200'){
      this.setData({article:result.news})
    }
  },

此时已经可以在首页点击列表跳转了