参考书：微信小程序开发实战——周文洁
还没有设定跳转的逻辑，只是为了设计页面，在顶栏添加编译模式，选择启动页面是detail
detail.wxml文件
<!--pages/detail/detail.wxml--><view class='container'><view class='title'>{{article.title}}</view><view class='poster'><image src='{{article.poster}}' mode='widthFix'></image></view><view class='content'>{{article.content}}</view><view class='add_date'>时间：{{article.add_date}}</view></view>
detail.wxss文件
/* pages/detail/detail.wxss *//*整体容器*/.container{padding: 15rpx;text-align: center;}/*新闻标题*/.title{font-size: 14pt;line-height: 80rpx;}/*新闻图片*/.poster image{width: 100%;}/*新闻正文*/.content{text-align: left;font-size: 12pt;line-height: 60rpx;}/*新闻日期*/.add_date{font-size: 12pt;text-align: right;line-height: 30rpx;margin-right: 25rpx;margin-top: 20rpx;}
detail.js文件
data: {article: {id: '1',title: 'miaomiao',poster: 'https://res./wxdoc/dist/assets/img/0.4cb08bb4.jpg',add_date: '-04-07',content: ' 程序员不想头秃 '}},
效果：
