按一下故事列表里的项目可以打开一个详情页面 .. 先去创建一个页面 .. 放在 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 ..
预览
再到模拟器上预览一下 ..
按一下故事列表里的项目 .. 会打开一个故事的详情页面 ..
看到此处说明本文对你还是有帮助的，关于“故事页面《 微信小程序：案例 》”留言是大家的经验之谈相信也会对你有益，推荐继续阅读下面的相关内容，与本文相关度极高！
