微信小程序学习用demo：文笔记+增删改查学习

柿霖不是林

首页
[mw_shl_code=html,true]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)
  }
})[/mw_shl_code]


[mw_shl_code=html,true]<!--背景-->
<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>[/mw_shl_code]


[mw_shl_code=html,true]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;
}[/mw_shl_code]


详情页

[mw_shl_code=html,true]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;
              if (dic.id == this.data.id) {
                oldText={\'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,
        timeptions.time,
        imageptions.image,
        reviseptions.revise,
        idptions.id
    })
  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: \'文笔记+\', // 分享标题
      desc: \'爱的再多也记录不够\', // 分享描述
      path: \'path\' // 分享路径
    }
  }
})[/mw_shl_code]

[mw_shl_code=html,true]<!--背景-->
<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>[/mw_shl_code]


[mw_shl_code=html,true]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;
}[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

dl520124

我想看看

jack56846

我有流量，寻求个人游戏开发者合作，有意者联系微,信,号j i m 2 0 1 8 0 6 8 8