文章详情页面-数据初始化渲染

一、URL参数处理

​ 在listcard组件跳转过程中携带参数到详情界面实现数据与渲染

​ 卡片组件

  /* 添加参数传递 */
      const { _id, title, author, create_time, thunbs_up_count, browse_count } = this.item
      const params = { _id, title, author, create_time, thunbs_up_count, browse_count };
      uni.navigateTo({url: `../../pages/articleDetail/articleDetail?params=${JSON.stringify(params)}`})

​ 文章详情界面

onLoad (...options) {
    this.articleData = JSON.parse(options[0].params)
  },

​ 获取数据后进行UI界面渲染

二、进行数据请求发送

1. 前端携带当前文章ID进行参数传递

2. 定义云函数

   'use strict';
   const db = uniCloud.database();
   exports.main = async (event, context) => {
     const { article_id } = event;
   
     const articleList = await db.collection('article')
       .aggregate()
       .match({
         _id: article_id
       })
       .end();
   
   
   
     //返回数据给客户端
     return {
       code: 0,
       msg: "文章获取成功",
       data: articleList.data[0]
     }
   };
   

3. 获取数据后更新articleData数据

   1. 解析内容数据使用三方插件uParse

   2. 下载地址：https://ext.dcloud.net.cn/plugin?id=364 (opens new window)

   3. 解析markdown文本使用三方插件marked

      下载：npm install markdown | yarn markdown

      使用：

       content () {
            try {
              return marked(this.articleData.content)
            } catch (e) {
              return null
            }
          }
      

​