解析Markdown文件

上一节，我们将了使用网络请求后台数据，当我们取到后台数据后，赋值给artList，这样首页页面就是展示了文章列表。当我们点击文章列表中的某项时，会再次请求后台，获取文章的详情。文章的详情我们是Markdown数据。

在小程序中，无法直接展示Markdown数据，我们需要转换，将Markdown转换为WXML，网上的大神很多，有多款Markdown转WXML库，我使用的是towxml库。

按照towxml库的说明文档，我们将编译后的towxml复制到我们的项目中，然后在app.js文件中引入这个组件。

App({
  towxml: require('./towxml/index'),

按照首页的步骤，我们添加文章详情页面。

"pages/article/index"

在index.wxml文件中，我们添加页面布局，这个很简单，显示渲染后的内容即可。

<!--pages/article/index.wxml-->
<view class="page">

  <!--使用towxml-->
  <towxml nodes="{{article}}" />

</view>

注意，我们还需要在index.json中添加组件引入。

{
  "usingComponents": {
    "towxml": "../../towxml/towxml"
  }
}

在js文件中，我们需要调用Markdown数据。

onLoad(options) {

    const _ts = this;
    wx.showLoading({
      title: '加载中',
    })

    httpGet('/artd', {
      uuid: options.guid,
    }).then((res) => {
      const result = res.data;
      if (result.code == 1) {
        let content = result.data;
        let obj = app.towxml(content, 'markdown', {
          theme: 'light',
          events: {
            tap: (e) => {
              console.log('tap', e);
            }
          }
        });

        _ts.setData({
          article: obj,
        });

        wx.hideLoading({
          success: (res) => { },
        })
      } else {
        wx.hideLoading()
      }
    }).catch((err) => {
      console.log(err);
      wx.hideLoading()
      wx.showToast({
        title: '网络异常请重试',
      })
    })

  },

我们在onLoad中加载函数，这样页面启动就会自动网络请求，然后渲染Markdown数据。在请求数据时，我们注意到guid，这个参数是上一个页面即首页，点击文章列表项带过来的数据。它就是上节中，在view中设置data-属性，可以将页面参数传给JS。

首页跳转到详情页方法如下：

jump: function (e) {
    const guid = e.currentTarget.dataset.guid
    // 调整到文章页面 
    wx.navigateTo({
      url: '../article/index?guid=' + guid,
    })
  },

现在，关于文章展示和搜索的功能就完成了。文章上传和维护，我们是通过命令行工具来完成的。没有集成到小程序中，一是因为个人小程序不容易过审，二是在小程序中编制Markdown文档非常麻烦，因为没有提供API选择MARKDOWN文档，因此上传Markdown文档也不能实现。我自己实现了命令行工具可以管理文章。也提供开放接口API供用户自己实现工具上传。为了保护开放接口，我们需要用户认证。在小程序中实现了获取用户识别码的功能。可以获取到用户识别码，调用开放接口。下一节，我们讲解用户识别码。