记事本-小程序

需求：
能够添加笔记，并更新记事时间；
数据暂存在小程序中的Storage；

image.png

image.png

image.png

页面结构，两个页面，列表页和添加页；
思路：
1.页面首先加载列表页，数据的渲染先从storage获取判断，取到时间和内容，加载在页面结构中
2.给列表页的内容和添加按钮添加点击时间bindtap，跳转到add页面，内容再次编辑点击时要传入一个id给add页面，所以为了区分列表的状态，给每一个列表添加一个id属性，传入到add页面中，add页面接收可通过onload加载中获取
3.add页需要做两个事情，一是判断是新增加内容还是再次编辑，二是提交内容到stroage中命名的txt中，取消则跳转返回即可
实现：
list结构和样式：

  
  
      
        
          {{item.content}}
           创建时间：{{item.time}}
        
      
  
  
  
    
  


样式：
.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结构和样式：

  
    
  
  
    取消
    确定
  

样式：
.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)
}

util.js 时间日期格式封装，返回一个对象，调用obj.formatTime（参数）给到这种格式：

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
}