如何在微信小程序制作\"文笔记+\"？

  今天给大家讲的是如何在微信小程序制作"文笔记+"?对微信小程序很感兴趣的同学们就一起学习下吧!

  一直说做个"笔记类"的小程序，今天终于发上来了，虽然"文笔记+"只有两个页面，但是笔记类的应用其实是很费时间的，因为要完成"增删改查"这几项功能，其实和数据库已经很类似了，下面还是老样子，注释和逻辑解析都已经写在代码里了。

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

  {{item.des}}

  {{item.time}}

  +

  {{item.des}}

  {{item.time}}

  +

  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[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}];//保存idwx.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:

  {{time}}

  保存

  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;

  }

  以上就是如何在微信小程序制作"文笔记+"的全部内容了，大家都学会了吗?