需求：
能夠添加筆記，并更新記事時(shí)間球散；
數(shù)據(jù)暫存在小程序中的Storage；
image.png
image.png
image.png
頁(yè)面結(jié)構(gòu)，兩個(gè)頁(yè)面蕉堰，列表頁(yè)和添加頁(yè)凌净；
思路：
1.頁(yè)面首先加載列表頁(yè)，數(shù)據(jù)的渲染先從storage獲取判斷屋讶，取到時(shí)間和內(nèi)容冰寻，加載在頁(yè)面結(jié)構(gòu)中
2.給列表頁(yè)的內(nèi)容和添加按鈕添加點(diǎn)擊時(shí)間bindtap，跳轉(zhuǎn)到add頁(yè)面皿渗，內(nèi)容再次編輯點(diǎn)擊時(shí)要傳入一個(gè)id給add頁(yè)面斩芭，所以為了區(qū)分列表的狀態(tài)，給每一個(gè)列表添加一個(gè)id屬性乐疆，傳入到add頁(yè)面中划乖，add頁(yè)面接收可通過(guò)onload加載中獲取
3.add頁(yè)需要做兩個(gè)事情，一是判斷是新增加內(nèi)容還是再次編輯挤土，二是提交內(nèi)容到stroage中命名的txt中琴庵，取消則跳轉(zhuǎn)返回即可
實(shí)現(xiàn)：
list結(jié)構(gòu)和樣式：
<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'> 創(chuàng)建時(shí)間：{{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結(jié)構(gòu)和樣式：
<view class='page'>
<view class='page-t'>
<input type='text' placeholder='請(qǐng)輸入文字' 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: {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (e) {
var id=e.id;
if(id){//如果id存在，處于邊界狀態(tài)仰美，獲取信息迷殿，不存在，設(shè)置一個(gè)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;
}
//點(diǎn)解確定之前更新時(shí)間
this.setData({
time:Date.now()
})
//把信息取到庆寺，放入storage中
setValue(this);
//返回前面的頁(yè)面
wx.navigateBack()
}
})
function getData(id,page){
var arr=wx.getStorageSync('txt');
arr.forEach((item)=>{
if(item.id==id){ //確定是否編輯當(dāng)前信息
page.setData({
id:item.id,
content:item.content
})
}
})
}
//設(shè)置存儲(chǔ)信息
function setValue(page){
var arr=wx.getStorageSync('txt');
var data=[],flag=true;//設(shè)置一個(gè)空數(shù)組，不管是再次編輯還是新增加诉字，都放在數(shù)組里
//判斷是新增內(nèi)容還是再次編輯? 取到信息放到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)
})
}
//新增加內(nèi)容
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
}
