mpvue开发博客园小程序

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title type="text">博客园</title>
  <id>uuid:93cb2bb2-d28c-43d3-80dc-033331d5c529;id=132187</id>
  <updated>2018-06-29T16:36:42Z</updated>
  <link href="http://www.cnblogs.com/"/>
  <entry>
    <id>9241216</id>
    <title type="text">.NET Core微服务之基于Ocelot+Butterfly实现分布式追踪</title>
    <summary type="text">本篇首先介绍了一下追踪（）的背景以及基本概念，然后介绍了一下一个开源的分布式追踪组件y，由于已经集成了y，所以我们可以很方便地在中使用y进行追踪。最后，通过一个具体的小实例，介绍了如何在微服</summary>
    <published>2018-06-30T00:25:00+08:00</published>
    <updated>2018-06-29T16:36:42Z</updated>
    <author>
      <name>Edison Chou</name>
      <uri>http://www.cnblogs.com/edisonchou/</uri>
      <avatar>http://pic.cnblogs.com/face/381412/20161204141727.png</avatar>
    </author>
    <link rel="alternate" href="http://www.cnblogs.com/edisonchou/p/ocelot_and_butterfly_tracing_foundation.html"/>
    <blogapp>edisonchou</blogapp>
    <diggs>0</diggs>
    <views>10</views>
    <comments>0</comments>
  </entry>
</feed>

我需要获取的信息有：

title
summary
published
name
link的href

调试许久后，代码是这样的

var doc = new DOMParser().parseFromString(res.data, 'text/xml')
var entry = doc.getElementsByTagName('entry')

var title = entry[0].getElementsByTagName('title')[0]['firstChild']['data']
var summary = entry[0].getElementsByTagName('summary')[0]['firstChild']['data']
var author = entry[0].getElementsByTagName('author')[0].getElementsByTagName('name')[0]['firstChild']['data']
var published = entry[0].getElementsByTagName('published')[0]['firstChild']['data']
var link = entry[0].getElementsByTagName('link')[0].getAttribute('href')

我是崩溃的

不过总算是获取到了需要的信息，接下来需要将这些动态的存入数组里，由于上面的代码我是写到了mothods中的一个方法里，而数组是在data里存放的，于是我就直接用this.items.push(…)，然而失败了

this是空的，查找解决方法许久，无解，于是用了笨办法，把数组传参进去，用这个参数来修改数组的内容。

到现在，列表正常的显示我获取到的信息了，满满的心酸

2 第二天

2.1 寻找更好的xml解析方案

在经历了昨天xml的折磨后，今天的首要目标就是找到更好用的xml解析库，所以我对这个xml的格式进行了分析，发现这其实是rss订阅的xml格式。

知道这个那就好办了，在github搜索了一会，找到了个看起来不错的库， rss-parser，将xml字符串扔进去，出来的就是我需要的数据。

起码看上去是这么美好。

随后就是用npm安装这个，在页面里按照示例调用，顺便console.log一下那个返回给我的数据结构，然而编译过后，小程序那边又出问题了，这次是无法调用到那个对象里面的数据，从控制台看到的数据结构是这样的：

{xxxxx}: object {…}

\[\[xxxxType\]\]: object {…}

\[\[xxxxValue\]\]: object {//这里是我想要的数据}

然而无论我用什么办法，都没法调用到这里的带中括号的对象名，，虽然数据的确就在里面了，我却无能为力，最后只能放弃，可能这个不适合在小程序上面用吧。

折腾这么多，想回到之前的样子也很麻烦了，不过幸好昨晚用git存了档，git reset回到上一个git存档处，一切又回到了昨晚的模样。

2.2 下拉刷新和上拉加载

接下来做了点力所能及的事，完成下拉刷新和上拉加载，这里需要用到小程序的api。

首先，需要在app.json中的window里添加：

"enablePullDownRefresh": true

然后，需要在页面中加入两个回调函数：

onPullDownRefresh () {
    //下拉时候调用的函数
}

onReachBottom () {
    //向上拉到底部时候调用的函数
}

加载时候的菊花动画需要用到下面的两个函数：

// 显示加载图标
wx.showLoading({
    title: '玩命加载中',
})

// 隐藏加载框
wx.hideLoading();

下拉刷新的逻辑是：每次下拉，获取最新的10条数据，然后逐个对比id，id不相同的话，将这个插入到列表里，相同的话，就停止加载。

上拉加载的逻辑是：不停获取下一页的数据，并依次放到列表末尾，每一次加载完，页数加一。

3 第三天

因事其他事暂时搁置此任务，（其实是因为搞不起域名备案），总之等以后再说吧。

先在这里写一下计划

由列表页面跳转到详情页，步骤是先下载网页，然后在详情页显示，插件用适用于 Mpvue 的微信小程序富文本解析自定义组件。
加入新页面——根据关键词搜索文章

Date: 2018-06-29 23:34

Author: su

Created: 2018-07-02 一 22:50

Validate

posted @ 2018-06-30 00:51 回夙未来阅读(669) 评论(0) 编辑收藏举报

刷新页面返回顶部

回夙未来

mpvue开发博客园小程序

mpvue开发博客园小程序

Table of Contents

1 第一天

1.1 博客园api

1.1.1 请求格式

1.1.2 请求示例

1.1.3 返回格式

1.2 列表页面

1.3 xml数据解析

2 第二天

2.1 寻找更好的xml解析方案

2.2 下拉刷新和上拉加载

3 第三天

公告