AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:01:56

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:司小文:微信小程序实战demo解析:文笔记+增删改查
相关的资讯,希望对您有帮助。

司小文:微信小程序实战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:


class=des-image src={{image}}>
 
  
class=des-scr scroll-y=true  bindscroll=scroll>
       
      for={{desArr}}>
        ../logs/logs?des={{item.des}}&time={{item.time}}&image={{image}}&id={{item.id}}&revise=1>
              class=des-view  bindtap=toiletDetails id={{index}}>
                  class=des-text>{{item.des}}
                  class=des-tiemText>{{item.time}}
              
          
      

 

../logs/logs?des=&time=2017-01-09&image={{image}}&id=-1&revise=0>
    

 

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){
              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:



 class=the-image src={{image}}>
 

class=the-text>{{time}}

 

class=the-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

35阅读 | 0评论
你的回应
写文章

6917