点击下面网址可以在线观看视频
10天零基础入门小程序系列在线视频教程
点击下面网址进入系列教程
10天零基础入门小程序系列教程
前几节给大家讲了首页列表的实现，我们有了列表，肯定需要从列表跳转到详情页去查看详情吧。这节就和大家讲一讲文章详情页的实现。同样本节代码是基于前5天代码的基础上的，如果没有学过前面课程的同学，可以点击上面链接，看笔记或者视频。
本节知识点
- 1，列表跳转到详情页的实现
- 2，从后台获取详情页数据
- 3，详情页json数据的解析
- 4，详情页数据的展示
- 5，markdown格式转化为可以在小程序wxml里显示的格式
- 6，第三仿类库的使用
这节课知识点比较多，视频的话我会录制分几节来录制，笔记的话就全部整合在这篇文章里，方便大家学习。下面就来开始今天的学习之路。
一，列表跳转到详情页的实现
老规矩，学习今天知识点之前，我们先去看下官方文档（官方文档永远是最好的老师）
我们页面跳转用到的知识点是：wx.navigateTo
https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html
看官方文档可以知道，我们页面跳转需要定义目标页面的url，而我们想从列表页跳转到详情页，我们就要先定义详情页面。
比如我们的详情页叫 detail。我们就需要在pages目录下创建如下目录和文件（如果不会创建新页面的同学，请点击顶部链接去看我前面的课程）
创建完成后还需要在app.json文件里注册我们的detail页面
这里的 "pages/detail/detail" 就是我们 wx.navigateTo页面跳转时所需要的url。
- 下面我们在首页列表页的home.js文件里定义一个跳转方法，看看能不能跳转到detail详情页。
实现方法如下
//跳转到detail详情页
goDetail() {
wx.navigateTo({
url: "../detail/detail"//这里的 ../是固定写法
})
},
我们的goDetail方法需要在home.wxml里用bindtap来绑定，如下图
然后看下home.js里的完整代码
这两步写完，我们就实现里首页列表跳转到detail详情页的功能，编译运行后的效果图如下：
可以看到我们点击首页列表的任何一个标题都可以跳转到文章详情页。
二，从后台获取详情页数据
我们第一个步实现里列表页跳详情页，但是我们跳到详情页后没有任何数据啊，所以我们第二步，就要从后台请求每个详情页自己的数据了。这里我也已经为大家定义好了，详情页json数据的请求接口。
大家也可以点击下面链接，查看数据
https://30paotui.com/article/one?aid=0
上面链接是我们用get请求把aid（文章对应id）传给后台，然后后台去数据库里查询aid=0的文章，然后把文章的数据返回给我们。
所以我们从列表页跳转到详情页时，需要把对应的文章的id带到详情页。
这就涉及到另外一个知识点了，页面跳转并传值。下面我们就先实现跳转传值的功能。其实也很简单。在第一步代码的基础上加点东西即可。比如我们要把aid为100这个值传到详情页。代码如下
这样我们在详情页的detail.js里面接受这个值，并在控制台打印出来，看有没有接收到。代码如下
可以看到我们的详情页接收到了列表页传过来的值：100
由于我们首页列表页每个标题对应的是不同的aid，我们这里都写成100是不对的。所以我们接下来学习另外一个知识点。获取当前点击标题对应的aid。
在我们的首页home.wxml文件里加如下代码
data-aid='{{item.aid}}' 是用来绑定数据的，比如我们点击标题《零基础入门小程序001----开发属于自己的第一个小程序》，这个标题对应的aid为0，