自从辞职回家过年以后,天天晚上睡不好,一直说做个"笔记类"的小程序,今天终于发上来了,虽然"文笔记+"只有两个页面,但是笔记类的应用其实是很费时间的,因为要完成"增删改查"这几项功能,其实和数据库已经很类似了,下面还是老样子,注释和逻辑解析都已经写在代码里了,赶紧分享给小伙伴们。
哦对了,这只是个基础版和我预想的还是有些差别的,毕竟一开始打算需要云和接口的支持,现在所有的记录全都存在了本地的缓存。删除的方法写在js里了,但是没有放按钮,是因为想了很久感觉放在哪里都很丑,所以这个基础版是没有删除功能的呦~,凑活着用修改功能先来代替吧。
首页:
js:
Page({
data:{
today:'',//当天日期
image:'/pages/image/111.jpg',//背景图片
desArr:[]//数据源数组
},
getNowFormatDate(){
//获取当天日期
var date = new Date();
var seperator1 = "-";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
return currentdate;
},
onLoad:function(options){
//-监听页面加载
//获取缓存内容
this.setData({
desArr:wx.getStorageSync('oldText')
})
if(this.data.desArr == null && this.data.desArr ==''){
//如果没有缓存则为空
this.setData({
desArr:[]
})
}
//获取当天日期
var day = this.getNowFormatDate()
this.setData({
today:day
})
},
onShow:function(){
// 生命周期函数--监听页面显示
//获取当前缓存
var arrayA = wx.getStorageSync('oldText');
var isChange = wx.getStorageSync('isChange');
if (arrayA.length != this.data.desArr.length){
//如果数量改变从新赋值
this.setData({
desArr:arrayA
})
}else if (isChange == 1){
wx.setStorageSync('isChange', 0);
this.setData({
desArr:arrayA
})
}
},
onShareAppMessage: function() {
// 用户点击右上角分享
return {
title: '文笔记+', // 分享标题
desc: '我们的功能不仅笔记', // 分享描述
path: 'path' // 分享路径
}
},
cancelTap(e){
//删除按钮
console.log(e)
}
})
wxml:
<!--背景-->
<image class="des-image" src="{{image}}"></image>
<!--底部滚动-->
<scroll-view class="des-scr" scroll-y="true" bindscroll="scroll">
<!--循环view-->
<block wx:for="{{desArr}}">
<navigator url="../logs/logs?des={{item.des}}&time={{item.time}}&image={{image}}&id={{item.id}}&revise=1">
<view class="des-view" bindtap="toiletDetails" id="{{index}}">
<text class="des-text">{{item.des}}</text>
<text class="des-tiemText">{{item.time}}</text>
</view>
</navigator>
</block>
</scroll-view>
<!--添加按钮-->
<navigator url="../logs/logs?des=&time=2017-01-09&image={{image}}&id=-1&revise=0">
<button class="new-btn" bindtap="newBtnDown">+</button>
</navigator>
wxss:
page{
height: 100%;
}
.des-image{
position:absolute;
width: 100%;
height: 100%;
}
.des-scr{
width: 100%;
height: 100%;
}
.des-view{
margin: 5%;
width: 90%;
height: 180rpx;
border:1px solid orange;
}
.des-text{
display: block;
margin:20rpx;
height: 80rpx;
overflow: hidden;
}
.des-tiemText{
display: block;
margin-right: 20rpx;
margin-bottom: 20rpx;
height: 40rpx;
text-align: right;
}
.new-btn{
position:absolute;
bottom: 200rpx;
right: 0rpx;
width: 80rpx;
height: 80rpx;
background: darkorange;
border-radius: 50%;
font-size: 48rpx;
line-height:80rpx;
}
详情页:
js:
Page({
data:{
time:'',//日期
image:'',//背景
textAreaDes:'',//输入的内容
revise:'',//是不是修改
id:''
},
btnDown(){
//保存按钮
if (this.data.textAreaDes.length == 0){
return;
}
//获取本地缓存
var oldText = wx.getStorageSync('oldText');
if(oldText != null && oldText !=''){
if(this.data.revise == '1'){
//如果是修改的,循环缓存数组,找到相应id更改
console.log(oldText)
for (var i=0;i<oldText.length;i++){
var dic = oldText[i];
if (dic.id == this.data.id) {
oldText[i]={'des':this.data.textAreaDes,time:dic.time,'id':dic.id};
console.log(oldText)
//存入缓存
wx.setStorageSync('oldText', oldText);
wx.setStorageSync('isChange', 1);
return;
}
}
}else{
//记录是内容的id
var numID = wx.getStorageSync('oldTextID');
if(numID == this.data.id){
return;
}
//添加更多缓存
oldText.push({'des':this.data.textAreaDes,time:this.data.time,'id':numID});
//id自增
numID++;
wx.setStorageSync('oldTextID', numID);
this.setData({
id: numID
})
}
}else{
//如果没有缓存
oldText = [{'des':this.data.textAreaDes,time:this.data.time,'id':0}];
//保存id
wx.setStorageSync('oldTextID', 1);
this.setData({
id: 1
})
}
//存入缓存
wx.setStorageSync('oldText', oldText);
},
bindTextAreaBlur(e){
//当输入的文字改变走这个方法
//记录输入的文字
this.setData({
textAreaDes: e.detail.value
})
},
onLoad:function(options){
// 生命周期函数--监听页面加载
this.setData({
des: options.des,
time:options.time,
image:options.image,
revise:options.revise,
id:options.id
})
},
onShareAppMessage: function() {
// 用户点击右上角分享
return {
title: '文笔记+', // 分享标题
desc: '爱的再多也记录不够', // 分享描述
path: 'path' // 分享路径
}
}
})
wxml:
<!--背景-->
<image class="the-image" src="{{image}}"></image>
<!--按钮-->
<text class="the-text">{{time}}</text>
<button class="the-btn" bindtap="btnDown">保存</button>
<!--输入框-->
<view class="the-view">
<textarea class= "the-textarea" bindinput="bindTextAreaBlur" style=" margin: 5%;width: 90%;height: 90%" auto-focus value="{{des}}"maxlength="-1" cursor-spacing="0">
</textarea>
</view>
wxss:
page{
height: 100%;
}
.the-image{
position:absolute;
width: 100%;
height: 100%;
}
.the-text{
position:absolute;
left: 5%;
top: 3.5%;
font-size: 28rpx;
text-align: left;
}
.the-btn{
font-size: 24rpx;
position:absolute;
right: 5%;
top: 2%;
height: 5%;
width: 20%
}
.the-view{
position:absolute;
top: 7%;
width: 100%;
height: 86%;
}
.the-textarea{
overflow:hidden;
}
下载地址:
链接:http://pan.baidu.com/s/1c5pBAm 密码:4ztr
感谢学习,学以致用更感谢!