自从辞职回家过年以后,天天晚上睡不好,一直说做个笔记类的小程序,今天终于发上来了,虽然文笔记+只有两个页面,但是笔记类的应用其实是很费时间的,因为要完成增删改查这几项功能,其实和数据库已经很类似了,下 ...
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) } })
<!--背景--> <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>
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; }
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' // 分享路径 } } })
<!--背景-->
<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>
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;
}