微信小程序之数据抽取和template模板使用

Posted 2020-12-30 流世幻羽

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: "菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。

是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。",
    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;

}