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

hankkin 发布于2019-08-26 17:18 / 2607人阅读

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

前言

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

代码实现

修改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的实现放到下回讲，否则这篇篇幅太长，影响积极性啊。

云服务器混合云微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110134.html

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

摘要：前言上一小节说道，点击版面图片区域，可获取到映射的文章链接。本节将着重实现对文章的解析，正则匹配走起通过对文章结构的比对，调查发现，文章详情从的地方开，所以解析文章的函数如下。前言上一小节说道，点击版面图片区域，可获取到映射的文章链接。本节将着重实现对文章html的解析，正则匹配走起~通过对文章html结构的比对，调查发现，文章详情从class=text_c的地方开，所以解析文章的...

selfimpr 2019-08-22 18:12 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
Material Design - 收藏集 - 掘金

摘要：与老前辈使用攻略刷新篇掘金小序继使用攻略助力篇之后，一直没有更新上下拉刷新的功能实现，主要还是受限于个人现有的技术实力，总觉得没有经过实际打磨的，就不敢有上场的自信。 DrawerLayout 和 NavigationView 使用详解 - Android - 掘金Android Material Design Library 推出了很长时间，越来越多的APP使用了符合Library ...

stormzhang 2019-06-25 11:14 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

objc94 2019-08-05 10:11 评论0 收藏0