新建data.js文件
模拟数据
导出模块数据
属性
解析
module.exports
将数据导出
var postList = [{
date: "Jan 28 2017",
title: "小时候的冰棍儿与雪糕",
postImg: "/images/post/post-4.jpg",
avatar: "/images/avatar/avatar-5.png",
content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁，...",
readingNum: 23,
collectionNum: 3,
commentNum: 0,
author: "林白衣",
dateTime: "24小时前",
detail: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁，当年的老冰棍也随着童年的记忆消失不见踪影。记得小时候，每当傍晚时分，总有一个老人推着一辆小车，小车的后架上放着一个大大的白色泡沫盒子。老人一边推着车，一边叫喊着：雪糕、冰棍...",
postId: 1,
music: {
url: "http://ws.stream.qqmusic.qq.com/C100001Dc80Z3qPj2Z.m4a?fromtag=38",
title: "罗大佑 恋曲1980",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003cWU1M2qNwxZ.jpg?max_age=2592000",
},
collectionStatus: true,
upStatus: false,
upNum: 11,
comments: []
},
{
date: "Jan 9 2017",
title: "从童年呼啸而过的火车",
postImg: "/images/post/post-5.jpg",
avatar: "/images/avatar/avatar-1.png",
content: "小时候，家的后面有一条铁路。听说从南方北上的火车都必须经过这条铁路。火车大多在晚上经过，但也不定是只有在夜深人静的时候，火车的声音才能从远方传来...",
readingNum: 96,
collectionNum: 7,
commentNum: 4,
author: "林白衣",
dateTime: "24小时前",
detail: "小时候，家的后面有一条铁路。听说从南方北上的火车都必须经过这条铁路。火车大多在晚上经过，可呜呜的汽笛声，往往却被淹没在傍晚小院儿里散步的人群声中。只有在夜深人静的时候，火车的声音才能清晰的从远处飘过来。虽然日日听见火车的汽笛声，可说也奇怪，我竟从来不知道铁路在哪里。在每个夏日午后，我都会有一种去找寻找铁路的冲动，去看看这条铁路究竟是从哪里来，又将通向哪里去",
postId: 2,
music: {
url: "http://ws.stream.qqmusic.qq.com/C100004VybKS2SpZVL.m4a?fromtag=38",
title: "齐秦 原来的我",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003ZvAeK2PgA4Y.jpg?max_age=2592000"
},
collectionStatus: true,
upStatus: true,
upNum: 22,
comments: [
{
username: '青石',
avatar: '/images/avatar/avatar-3.png',
create_time: '1484723344',
content: {
txt: ' 那一年的毕业季，我们挥挥手，来不及说再见，就踏上了远行的火车。',
img: ["/images/comment/train-1.jpg", "/images/comment/train-2.jpg", "/images/comment/train-3.jpg"],
audio: null
}
}, {
username: '水清',
avatar: '/images/avatar/avatar-2.png',
create_time: '1481018319',
content: {
txt: '夏日的蝉鸣与夜晚的火车，时长会在未来无数的日子里不断的在我耳边响起，难以忘怀',
img: [],
audio: null,
}
},
{
username: '赤墨',
avatar: '/images/avatar/avatar-1.png',
create_time: '1484496000',
content: {
txt: '时光的湮染，自然的吞噬，让太多的老火车站也消失得无影无踪',
img: ["/images/comment/train-4.jpg",],
audio: null,
}
},
{
username: '林白',
avatar: '/images/avatar/avatar-4.png',
create_time: '1484582400',
content: {
txt: '',
img: [],
audio: { url: "http://123", timeLen: 8 },
}
}
]
},
{
date: "Jan 29 2017",
title: "记忆里的春节",
postImg: "/images/post/post-1.jpg",
avatar: "/images/avatar/avatar-3.png",
content: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四...",
readingNum: 56,
collectionNum: 6,
commentNum: 0,
author: "林白衣",
dateTime: "24小时前",
detail: "年少时，有几样东西，是春节里必不可少的：烟花、新衣、凉菜、压岁钱、饺子。年分大小年，有的地方是腊月二十三过小年，而有的地方是腊月二十四。童年的春节都是在小县城里度过，那时候的冬天还很冷，池塘的水会结冰，房屋上总是倒挂着一条条的冰棱，菜地里的白菜被厚厚的积雪覆盖着，只露出一小撮白绿相间的菜头，而茎部，竟然像是没有了一般...",
postId: 3,
music: {
url: "http://ws.stream.qqmusic.qq.com/C100003XYcCu3IZKLc.m4a?fromtag=38",
title: "老狼 虎口脱险",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002sNbWp3royJG.jpg?max_age=2592000"
},
collectionStatus: false,
upStatus: false,
upNum: 9,
comments: []
},
{
date: "Sep 22 2016",
title: "换个角度，再来看看微信小程序的开发与发展",
postImg: "/images/post/post-2.jpg",
avatar: "/images/avatar/avatar-2.png",
content: "前段时间看完了雨果奖中短篇获奖小说《北京折叠》。很有意思的是，张小龙最近也要把应用折叠到微信里，这些应用被他称为：小程序...",
readingNum: 0,
collectionNum: 0,
commentNum: 0,
author: "林白衣",
dateTime: "24小时前",
detail: "我们先举个例子来直观感受下小程序和APP有什么不同。大家都用过支付宝，在其内部包含着很多小的服务：手机充值、城市服务、生活缴费、信用卡还款、加油服务，吧啦吧啦一大堆服务。这些细小的、功能单一的服务放在支付宝这个超级App里，你并不觉得有什么问题，而且用起来也很方便。那如果这些小的应用都单独拿出来，成为一个独立的App",
postId: 4,
music: {
url: "http://ws.stream.qqmusic.qq.com/C100003z8cOo0Bs7zP.m4a?fromtag=38",
title: "吴奇隆 祝你一路顺风",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000000n6a7p2HIPqU.jpg?max_age=2592000"
},
collectionStatus: false,
upStatus: true,
upNum: 9,
comments: []
},
{
date: "Jan 29 2017",
title: "2017 微信公开课Pro",
postImg: "/images/post/post-3.jpg",
avatar: "/images/avatar/avatar-4.png",
content: "在今天举行的2017微信公开课PRO版上，微信事业群总裁张小龙宣布，微信“小程序”将于1月9日正式上线。",
readingNum: 32,
collectionNum: 2,
commentNum: 0,
author: "林白衣",
dateTime: "24小时前",
detail: "在今天举行的2017微信公开课PRO版上，微信宣布，微信“小程序”将于1月9日正式上线，公布了几乎完整的小程序生态模式：微信里没有小程序入口、没有应用市场，分发模式几乎沿用公众号的模式，去中心化，限制搜索的能力，大多数小程序不能支持模糊搜索，必须输入完整的小程序名称...",
postId: 5,
music: {
url: "http://ws.stream.qqmusic.qq.com/C100004K7D5E2xhv9v.m4a?fromtag=38",
title: "杨千嬅 再见二丁目(live)",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000000ptb8p0ZIxDP.jpg?max_age=2592000",
},
collectionStatus: false,
upStatus: false,
upNum: 2,
comments: []
},
]
module.exports = {
postList: postList
}
获取内存中数据
数据不存在，读取静态数据
将读取到的静态数据存储到内存中
属性
解析
app.js
小程序业务全局处理文件
onLaunch
小程序初始化后执行
getStorageSync
根据key同步获取内存中的数据
require
获取其他文件的数据
setStorageSync
根据key将数据存储到内存中
//app.js
App({
onLaunch: function () {
var storageData=wx.getStorageSync('postList');
if (!storageData){
wx.clearStorageSync();
var dataObj=require("data/data.js");
wx.setStorageSync('postList',dataObj.postList);
}
})
新建DBPost.js文件
使用Es6读取data.js数据
将data.js数据存储到内存中
属性
解析
getStorageSync
根据key获取内存中的数据
export
导出类供其他模块使用
class DBPost{
getAllPostData(){
var res = wx.getStorageSync('postList');
if(!res){
res = require('../data/data.js').postList;
}
return res;
}
}
export { DBPost }
属性
导入文件
import
解析
setData
更新数据渲染界面
import {DBPost} from '../../db/DBPost.js';
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var dbPost=new DBPost();
this.setData({
postList:dbPost.getAllPostData()
})
},
})
属性
解析
template
定义模板
{{ }}
数据绑定
*注意内容型数据无需加“” *
<template name="item">
<view class="post-container">
<view class="post-author-date">
<image src="{{avatar}}" />
<text>{{date}}</text>
</view>
<text class="post-title">{{title}}</text>
<image class="post-image" src="{{postImg}}" mode="aspectFill" />
<text class="post-content">{{content}}</text>
<view class="post-like">
<image src="/images/icon/wx_app_collect.png" />
<text>{{collectionNum}}</text>
<image src="/images/icon/wx_app_view.png"></image>
<text>{{readingNum}}</text>
<image src="/images/icon/wx_app_message.png"></image>
<text>{{commentNum}}</text>
</view>
</view>
</template>
属性
解析
import
引入templete
block
背包裹的元素将被重复渲染
catchtap
点击事件事件不向上传递
data-post-id
点击事件事件不向上传递
…
扩展运算符
<!--pages/featured/featured.wxml-->
<import src="item/item.wxml" />
<view>
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
<view catchtap="onTapToDetail" >
<template is="item" data="{{...item}}" />
</view>
</block>
</view>
属性
解析
border-bottom
下边框
border-top
上边框
letter-spacing
行间距
line-height
行高
*注意内容型数据无需加“” *
.post-container{
flex-direction:column;
display:flex;
margin:20rpx 0 40rpx;
background-color:#fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin: 10rpx 0 20rpx 10px;
display:flex;
flex-direction: row;
align-items: center;
}
.post-author-date image{
width:60rpx;
height:60rpx;
}
.post-author-date text{
margin-left: 20px;
}
.post-title{
font-size:16px;
font-weight: 600;
color:#333;
margin-bottom: 10px;
margin-left: 10px;
}
.post-image{
width:100%;
height:340rpx;
margin-bottom: 15px;
}
.post-content{
color:#666;
font-size:26rpx;
margin-bottom:20rpx;
margin-left: 20rpx;
letter-spacing:2rpx;
line-height: 40rpx;
}
.post-like{
display:flex;
flex-direction: row;
font-size:13px;
line-height: 16px;
margin-left: 10px;
align-items: center;
}
.post-like image{
height:16px;
width:16px;
margin-right: 8px;
}
.post-like text{
margin-right: 20px;
}
/* pages/featured/featured.wxss */
@import "item/item.wxss";
