mpvue开发博客园小程序

mpvue开发博客园小程序

看到小程序这么火,我也忍不住要来尝试下小程序开发,毕竟这个和开发网站其实差别不大, 网站经验也攒了一些了,小程序应该不会太费劲。小程序比较依赖现代javascript技术, 我也正好学习下这样的开发流程。

在看了微信小程序开发资源汇总之后,确定用mpvue来打底,因为看到过别的网站用vue用的很爽, 所以这次放一起学了。

那么看看现在都需要些什么准备工作吧

  1. 微信小程序开发者帐号
  2. 小程序开发集成环境
  3. 随手查看小程序开发文档以及vue文档
  4. 安装node.js,npm
  5. git版本控制

现在看下当前电脑环境,linux,node.js 8.11.2,npm 6.1.0,开发者工具用的Linux微信web开发者工具, 编辑器是emacs+spacemacs,mpvue我用的是mpvue quickstart with mpvue-entry

接下来就是正式开发的内容了


1 第一天

照例先做简单的需求分析

  • 可以查看最新的博客列表
  • 可以通过点击列表中的条目进入详情页
  • 可以通过下拉刷新列表
  • 可以在拉到底部后刷出新的条目

那么暂时就两个页面,一个显示列表,一个显示详情,列表中的数据从博客园的api里可以获得

1.2 列表页面

列表页面主要需要一个个的条目,我将这个做成了一个组件,方便主页面调用。

主页面将获取到的数据做成数组,数组中的每一个都是一个组件需要的内容, 用v-for循环创建组件即可。

1.3 xml数据解析

那么重头戏就是这里了,如何从xml中提取到需要的信息。这里用到了xmldom, js解析xml的库。

说实话,这个用着很蛋疼,但看好多人都在推荐这个,我也就信了

信了他的邪,,

实际证明,必须要好好看文档和实例,然后console.log出数据整体结构之后才算能用, 比如说假如现在获取到的xml是这样的(为了美观我给他格式化了,原本都在一行里)

<?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是空的,查找解决方法许久,无解,于是用了笨办法,把数组传参进去, 用这个参数来修改数组的内容。

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

Date: 2018-06-29 23:34

Author: su

Created: 2018-06-30 六 00:51

Validate

猜你喜欢

转载自www.cnblogs.com/recallfuture/p/9245909.html