我的第一个微信小程序（手机记事本）

写在前面--这里我借鉴了一位博客的代码，可惜我忘记他的名字了，只能匿名地道声“谢谢！". 如果你看到了感觉我侵犯了你"版权"，可以告诉我，我会及时删除相关代码。我在借鉴这位朋友的代码基础上做了部分修改，实现本程序。我做了测试，可以保证绝对可以运行。后面也许我还会完善，增加更多功能。各位读者，如果你有兴趣继续修改，我表示赞同。我发布在这里，只是希望大家一起学习进步！

本程序一共3页，Page1：Index (在原来默认的工具建立的Index页的基础上改编而成）Page2：NoteEdit（我新建立的一页）Page3：Logs （完全是原来程序工具建立项目时默认生成的，我没有做任何修改，所以我不打算提供Logs的代码）

运行效果

Page1：

Page2

关于背景，你可以上百度搜索"手机壁纸"，选择几张图你喜欢的，as you like. 然后保存到 \pages\image里，改名为 111.jpg 和 222.jpg

Page1-- Index.mxml

<!--背景-->
<image class="des-image" src="{{image}}"></image>

<!--底部滚动-->
<scroll-view class="des-scr" scroll-y="true" bindscroll="scroll">
  <!--循环view-->
  <block wx:for="{{desArr}}">
    <navigator url="../NoteEdit/NoteEdit?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>

Page1-- Index.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;
}

Page1-- Index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    today: '',//当天日期
    image: '/pages/image/111.jpg',//背景图片
    desArr: []//数据源数组
  },
  //Zha: 取得时间日期信息
  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;
  },
  //Zha: 点击进入添加note的详细界面
  newBtnDown() {
    //跳转页面到 NoteEdit
    wx.navigateTo({
      url: '../NoteEdit/NoteEdit'
    })
  },
  
  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)
  }
})

Page2-- NoteEdit.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>

Page2-- NoteEdit.wxss

/* pages/NoteEdit/NoteEdit.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;
}

Page2-- NoteEdit.js

Page({
  data: {
    time: '',//日期
    image: '/pages/image/222.jpg',//背景
    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' // 分享路径
    }
  }
})

最后，祝你测试顺利！