需求：
能够添加笔记，并更新记事时间；
数据暂存在小程序中的Storage；
image.png
image.png
image.png
页面结构，两个页面，列表页和添加页；
思路：
1.页面首先加载列表页，数据的渲染先从storage获取判断，取到时间和内容，加载在页面结构中
2.给列表页的内容和添加按钮添加点击时间bindtap，跳转到add页面，内容再次编辑点击时要传入一个id给add页面，所以为了区分列表的状态，给每一个列表添加一个id属性，传入到add页面中，add页面接收可通过onload加载中获取
3.add页需要做两个事情，一是判断是新增加内容还是再次编辑，二是提交内容到stroage中命名的txt中，取消则跳转返回即可
实现：
list结构和样式：
<view class='page'>
<!-- 每一条文字 -->
<scroll-view class='lists'>
<block wx:for="{{lists}}">
<view class='list-i'>
<view class='content' bindtap='edit' data-id="{{item.id}}">{{item.content}}</view>
<view class='time'> 创建时间：{{item.time}}</view>
</view>
</block>
</scroll-view>
<!-- 添加文字按钮 -->
<view class='add' bindtap='add'>
<image src='../../img/edit.png'></image>
</view>
</view>
样式：
.page{position: relative;}
.lists{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.list-i{
width: 100%;
height: 200rpx;
background: #eee;
display: flex;
margin:10rpx 0;
flex-direction: column;
}
.content{height: 110rpx;border-bottom: 1px solid red;line-height: 110rpx;padding: 0 20rpx;}
.time{
color: #1674d4;
line-height: 90rpx;
padding: 0 20rpx;
}
.add{
width: 100rpx;
height: 100rpx;
position: absolute;
right: 80rpx;
bottom: 80rpx;
border: 1px solid #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #efefef;
}
.add image{
width: 40rpx;
height: 40rpx;
}
list js逻辑：
var time=require("../../utils/util")
Page({
data: {
lists:[
{
content:"hello",
time:Date.now(),
id:1
}
]
},
onLoad(){
initData(this);
},
onShow(){
initData(this)
},
add(){
wx.navigateTo({
url: '../add/add',
})
},
edit(e){
// console.log(e);
var id=e.target.dataset.id;
wx.navigateTo({
url: '../add/add?id='+id,
})
},
})
function initData(page){
var arr = wx.getStorageSync('txt');
if(arr.length){
arr.forEach((item,i)=>{
var t=new Date(Number(item.time));
item.time = time.formatTime(t);
})
page.setData({
lists:arr //放入data中
})
}
}
add结构和样式：
<view class='page'>
<view class='page-t'>
<input type='text' placeholder='请输入文字' value='{{content}}' bindinput='change'/>
</view>
<view class='btns'>
<view class='cancel' bindtap='cancel'>取消</view>
<view class='sure' bindtap='sure'>确定</view>
</view>
</view>
样式：
.page{display: flex;flex-direction: column}
.page-t{width: 100%;height: 90%}
.btns{flex: 1;display: flex;align-items: center;justify-content: space-around;background: #f88}
add js逻辑
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
var id=e.id;
if(id){//如果id存在，处于边界状态，获取信息，不存在，设置一个id
getData(id,this);
}else{
this.setData({
id:Date.now()
})
}
},
change(e){
//获取输入框里的值
var val=e.detail.value;
this.setData({
content:val
})
},
cancel(){
wx.navigateBack()
},
sure(){
var re=/^\s*$/g;
//判断输入框的值不能为空或者空字符；
if(!this.data.content||re.test(this.data.content)){
return;
}
//点解确定之前更新时间
this.setData({
time:Date.now()
})
//把信息取到，放入storage中
setValue(this);
//返回前面的页面
wx.navigateBack()
}
})
function getData(id,page){
var arr=wx.getStorageSync('txt');
arr.forEach((item)=>{
if(item.id==id){ //确定是否编辑当前信息
page.setData({
id:item.id,
content:item.content
})
}
})
}
//设置存储信息
function setValue(page){
var arr=wx.getStorageSync('txt');
var data=[],flag=true;//设置一个空数组，不管是再次编辑还是新增加，都放在数组里
//判断是新增内容还是再次编辑? 取到信息放到stroage中，
if(arr.length){
arr.forEach((item)=>{
if(item.id==page.data.id){
item.time=Date.now();
item.content=page.data.content;
flag=false;
}
data.push(item)
})
}
//新增加内容
if(flag){
data.push(page.data)
}
wx.setStorageSync('txt', data)
}
image.png
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
