微信小程序实践_4显示新闻（1）

最新推荐文章于 2022-12-09 09:03:35 发布

weixin_34128534

最新推荐文章于 2022-12-09 09:03:35 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：https://segmentfault.com/a/1190000013569522

本文介绍如何在微信小程序中实现新闻阅读功能，包括通过新闻链接跳转至文章页面、解析HTML获取文章内容等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

上节讲到，获取到触点所在区域所映射的新闻链接。有了新闻的链接，就能获取相应的新闻啦。

代码实现

修改paper.js的toArticle方法

toArticle: function (e) {
    .......
    if (href) {
      wx.navigateTo({
        url: "article/article?newshref=" + href + "&pagenum=" + pagenum
      });
    }else{
      console.log("未找到文章id");
    }
  },

修改app.json文件
添加文章专属界面，保存后发现pages目录下多了一个article文件夹

 "pages":[
    "pages/paper/paper",
    "pages/article/article",
    "pages/index/index",
    "pages/logs/logs"
  ],

打开pages/article/article.js文件

修改data

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

首先定义全局变量（在Page({...})外面）和引入相关模块

var app = getApp();
var todayDateArray = require('../../utils/util.js').todayDateArray;
//article url
var baseUri = "http://paper.people.com.cn/rmrb/html"

//拼接url的变量
var y_m = "";
var baseUri2 = "";
var newsid = "";
var pagenum = 0;

在onLoad方法中获取paper.js传过来的newshref和pagenum参数

onLoad: function (options) {
    newsHref = options.newshref;
    pagenum = parseInt(options.pagenum);
  },

onShow方法中请求该文章

var self = this;
//选择的日期
var todayArray = todayDateArray();
y_m = todayArray.slice(0, 2).join("-");
baseUri2 = [baseUri, y_m, todayArray[2]].join("/");
var url = url = [baseUri2, newsHref].join('/');
//获取文章
self.getArticle(url, newsHref, pagenum);

添加getArticle方法

//请求文章
  getArticle: function (url, newsHref, pagenum) {
    var self = this;
    var reqObj = { url: url };
    wx.request({
      url: url,
      success:function(res){
        var html = res.data;
        //解析文章html，获取文章标题、内容等相关信息
        var tmpArticleObj = articleExtract(html, newsHref, pagenum);
        self.setData({
          articleObj: tmpArticleObj,
        });
      }
    });
  },

至此，显示新闻的功能以完成1/3，解析文章html的方法articleExtract的实现放到下回讲，否则这篇篇幅太长，影响积极性啊。