今天我来告诉大家如何在微信小程序中制作“文字笔记+”。对微信小程序非常感兴趣的同学一起学习。
据说是一个“记笔记”的小程序，今天终于发出来了。虽然“文-注+”只有两页，但笔记的应用其实很费时，因为“增删改查”的功能其实和数据库很像，但下面还是一样，代码里已经写了注释和逻辑分析。
哦，对了，这只是一个基础版，和预期的版本有些区别。毕竟一开始是打算需要云和接口的支持，现在所有记录都缓存在本地。删除方法是用js写的，但是按钮不放，因为想了很久觉得哪里都丑，所以这个基本版没有删除功能。先用修改功能代替吧。
首页:主页:
js:
第{
//获取当天的日期
vardate = newDate
varseparator 1 = "-"；
var month = date . getmonth+1；
varstrDate = date.getDate
如果{
month = " 0 "+month；
}
如果{
strDate = " 0 "+strDate；
}
var current date = date . getfullyear+separator 1+month+separator 1+STrdatereturncurrent date；}，onLoad:函数{///-监控页面加载
//获取缓存内容
this.setData
})
如果{// is 空this.setData如果没有缓存
}
//获取当天的日期
varday=this.getNowFormatDate
this.setData
},
onShow:函数{
//生命周期功能-监视器页面显示
//获取当前缓存
vararrayA = wx.getStorageSyncvarisChange = wx.getStorageSync如果{//如果数量改变，给这个赋值。设置数据
}elseif{
wx.setStorageSync
this.setData
}
},
onShareAppMessage:函数{
//用户点击右上角分享
返回{
标题:'备注+'，//分享标题
Desc:“我们的功能不仅仅是记笔记”。//分享一下描述
路径:“路径”//共享路径
}
},
取消计划{
//删除按钮
console.log
}
})
wxml:
{{item.des}}
{{item.time}}
+
{{item.des}}
{{item.time}}
+
wxss:
第{
身高:100%；
}
。des-image{
位置:绝对；
宽度:100%；
身高:100%；
}
。des-scr{
宽度:100%；
身高:100%；
}
。des-view{
保证金:5%；
宽度:90%；
高度:180rpx
边框:1pxsolidorange
}
。des-text{
显示:块；
利润率:20rpx
高度:80rpx
溢出:隐藏；
}
。des-tiemText{
显示:块；
右边距:20rpx
边缘-底部:20rpx
高度:40rpx
文本对齐:向右；
}
。新-btn{
位置:绝对；
底部:200rpx
右:0rpx
宽度:80rpx
高度:80rpx
背景:深橙色；
边界半径:50%；
font-size:48 rpx；
行高:80rpx
}
详细信息页面:
js:
第{
//保存按钮
如果{
返回；
}
//获取本地缓存
varoldText = wx.getStorageSync如果{if{//如果修改了，循环缓存数组，找到对应的id change console.logfor//，存储在缓存wx.setStorageSyncwx.setStorageSync
返回；
}
}
}else{
//记录是内容的id
varnumID = wx.getStorageSyncif { return}
//添加更多缓存
old text . push；//id增加NuMid++；wx.setStorageSyncthis.setData
}
}else{
//如果没有缓存
old text =；//保存idwx.setStorageSyncthis.setData
}
//保存在缓存中
wx.setStorageSync
},
bindtextarearblur {
//当输入文本改变时，请走这条路
//记录输入的文本
this.setData
},
onLoad:函数{
//生命周期功能-监控页面加载
this.setData
},
onShareAppMessage:函数{
//用户点击右上角分享
返回{
标题:'备注+'，//分享标题
Desc:“再多的爱也不足以记录”。//分享一下描述
路径:“路径”//共享路径
}
}
})
wxml:
{{time}}{{time}}
保护
wxss:
第{
身高:100%；
}
。图像{
位置:绝对；
宽度:100%；
身高:100%；
}
。文本{
位置:绝对；
左侧:5%；
最高:3.5%；
font-size:28rpx；
文本对齐:向左；
}
。-btn{
font-size:24 rpx；
位置:绝对；
右:5%；
最高:2%；
身高:5%；
宽度:20%
}
。视图{
位置:绝对；
最高:7%；
宽度:100%；
身高:86%；
}
。-textarea{
溢出:隐藏；
}
打开太平洋知科技，阅读体验更佳
