按一下故事列表里的项目可以打开一个详情页面 .. 先去创建一个页面 .. 放在 pages/stories 的下面，添加一个 show.js .. 里面先得 app .. const app = getApp() ..

再用 Page 方法注册一个页面 .. 给它一个对象参数 .. 再去创建一个对应的视图文件 .. 也要把它放在 pages/stories 的下面，名字是 show.wxml ..

打开小程序的主配置 .. 在 pages 里面添加一个新的页面 .. pages/stories/show..

再去处理一下这个页面的主逻辑 .. 添加一个 data 属性 .. 里面再添加一个 entity .. 先让它等于 null .. 然后我们可以复制一块代码 .. 打开 vehicles 下面的 show.js .. 复制一下它的 onLoad 方法 ..

然后把它粘贴到 stories 的 show.js 里面 ..

把这个 app.globalData.vehicles ，换成 stories .

视图

再打开故事页面的视图 .. 编辑器上用了 emmet 插件以后可以用编写的形式去编写小程序的视图结构 ..

一个 view 加上 section 还有 hero 两个类，下面是一个 video ，同级别的还有 view.content.centered ，它的下面是一个 view.header 里面有个 view.sub-header ，跟 header 同级别的还有一个 view.description ..

view.section.hero>video+view.content.centered>(view.header>view.sub-header)+view.description

再用快捷键 shift + command + E .. 展开这个缩写 ... video 的 src 是 entity.video .. 再添加一个 poster，绑定一个 entity.poster .. objectFit 设置成 cover .. duration 是 entity 的 duration_raw .. 再把 controls 设置成 true ..

header 里面绑定一个 entity.header .. sub-header 里绑定一个 entity.original_header ..

description 里面是 entity.description ..

这里我们可以在这个 hero 上面再加点修饰 .. 添加一个 small ..

打开 styles 下面的 hero.wxss .. 添加一个 .hero.small 设置一下 .header .. 把字号设置的比原来小一点 .. 设置成 56rpx .. margin-bottom ，添加点下边距 .. 大小是 48rpx ..

再设置一下 .hero.small .sub-header .. 字号设置成 24rpx ..

预览

再到模拟器上预览一下 ..

按一下故事列表里的项目 .. 会打开一个故事的详情页面 ..