司小文：微信小程序实战demo解析：文笔记+增删改查

自从辞职回家过年以后，天天晚上睡不好，一直说做个笔记类的小程序，今天终于发上来了，虽然文笔记+只有两个页面，但是笔记类的应用其实是很费时间的，因为要完成增删改查这几项功能，其实和数据库已经很类似了，下 …

     
自从辞职回家过年以后，天天晚上睡不好，一直说做个”笔记类”的小程序，今天终于发上来了，虽然”文笔记+”只有两个页面，但是笔记类的应用其实是很费时间的，因为要完成”增删改查”这几项功能，其实和数据库已经很类似了，下面还是老样子，注释和逻辑解析都已经写在代码里了，赶紧分享给小伙伴们。
哦对了，这只是个基础版和我预想的还是有些差别的，毕竟一开始打算需要云和接口的支持，现在所有的记录全都存在了本地的缓存。删除的方法写在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; }

感谢观看，学以致用更感谢~
项目下载： 
文笔记 .zip

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。