微信小程序_文笔记+(第一章)

来源：互联网发布：linux程序设计pdf下载编辑：程序博客网时间：2024/05/01 09:38

自从辞职回家过年以后，天天晚上睡不好，一直说做个"笔记类"的小程序，今天终于发上来了，虽然"文笔记+"只有两个页面，但是笔记类的应用其实是很费时间的，因为要完成"增删改查"这几项功能，其实和数据库已经很类似了，下面还是老样子，注释和逻辑解析都已经写在代码里了，赶紧分享给小伙伴们。

哦对了，这只是个基础版和我预想的还是有些差别的，毕竟一开始打算需要云和接口的支持，现在所有的记录全都存在了本地的缓存。删除的方法写在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

感谢学习，学以致用更感谢！

0 0