1.为了数据和业务分离出来,
2.提高代码的复用性和引擎解析所以要去使用模板
1.数据的抽取
var local_database = [
{
date: "Sep 18 2016",
title: "正是虾肥蟹壮时",
imgSrc: "/images/post/crab.png",
avatar: "/images/avatar/1.png",
content: "菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,",
reading: "112",
collection: "96",
headImgSrc: "/images/post/crab.png",
author: "林白衣",
dateTime: "24小时前",
detail: "菊黄蟹正肥,品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,壳凸红脂块块香”;在《世说新语》里,晋毕卓更是感叹“右手持酒杯,左手持蟹螯,拍浮酒船中,便足了一生矣。”漫漫人生长路,美食与爱岂可辜负?于是作为一个吃货,突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹,是家人的味道,弥漫着浓浓的亲情。\n\n是谁来自山川湖海,却囿于昼夜,厨房与爱? 是母亲,深思熟虑,聪明耐心。吃蟹前,总会拿出几件工具,煞有介事而乐此不疲。告诉我们螃蟹至寒,需要佐以姜茶以祛寒,在配备的米醋小碟里,亦添入姜丝与紫苏,前者驱寒后者增香。泡好菊花茶,岁月静好,我们静等。",
postId: 0,
music: {
url: "http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38",
title: "夜夜夜夜-齐秦",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
}
}]
//数据设置
module.exports = {
postList: local_database
}
// pages/posts/post.js 如果不允许绝对路径就用相对路径
var postsData=require('../../data/posts-data.js');
onLoad: function (options) {
this.setData({ datas: postsData.postList});
},
2.模板template使用
wxml重用
<template name="postItem">
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="{{avatar}}"></image>
<text class="post-date">{{date}}</text>
</view>
<text class="post-title">{{title}}</text>
<image class="post-image" src="{{imgSrc}}"></image>
<text class="post-content">{{content}}
</text>
<view class="post-like">
<image class="post-like-image"
src="/images/icon/chat.png"></image>
<text class="post-like-font">{{collection}}</text>
<image class="post-like-image"
src="/images/icon/view.png"></image>
<text class="post-like-font">{{reading}}</text>
</view>
</view>
</template>
<block wx:for="{{datas}}" wx:for-item="item" wx:for-index="idx">
<!--//template-->
<template is="postItem" data="{{...item}}"/>
</block>
wxss重用
.post-container{
flex-direction:column;
display:flex;
margin-top:20rpx;
margin-bottom:40rpx;
margin-left: 0rpx;
background-color:#fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin-top:10rpx;
margin-bottom: 20rpx;
margin-left: 10px;
}
.post-author{
width:60rpx;
height:60rpx;
vertical-align: middle;
}
.post-date{
margin-left: 20px;
vertical-align: middle;
}
.post-image{
width:100%;
height:340rpx;
margin:auto 0;
margin-bottom: 15px;
}
.post-date{
font-size:26rpx;
margin-bottom: 10px;
}
.post-title{
font-size:34rpx;
font-weight: 600;
color:#333;
margin-bottom: 10px;
margin-left: 10px;
}
.post-content{
color:#666;
font-size:28rpx;
margin-bottom:20rpx;
margin-left: 20rpx;
letter-spacing:2rpx;
line-height: 40rpx;
}
.post-like{
font-size:13px;
line-height: 16px;
margin-left: 10px;
}
.post-like-image{
height:16px;
width:16px;
margin-right: 8px;
vertical-align:middle;
}
.post-like-font{
vertical-align:middle;
margin-right: 20px;
}
/* pages/posts/post.wxss */
@import "post-item/post-item-template.wxss";
swiper {
width: 100%;
height: 600rpx;
}
swiper image{
width: 100%;
height: 600rpx;
}