微信小程序之數據抽取和template模板使用

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;

}