文章目录

• 一、前言
• 二、实现效果
• • 1、添加日记
  • 2、保存日记
  • 3、查看日记详情
  • 4、删除日记
• 三、程序实现
• • 1、日记主页面程序
  • • 1.1、.wxml文件
    • 1.2、.wxss文件
    • 1.3、.ts文件
  • 2、添加日记页面程序
  • • 2.1、.wxml文件
    • 2.2、.wxss文件
    • 2.3、.ts文件
  • 3、日记详情页页面程序
  • • 3.1、.wxml文件
    • 3.2、.wxss文件
    • 3.3、.ts文件
• 四、详细设计
• • 1、添加日记
  • • 1.1、获取输入文字
    • 1.2、保存输入内容
    • 1.3、跳转回记事本主页面
  • 2、删除日记
  • • 2.1、弹出提示框
    • 2.2、删除日记功能
  • 3、日记详情显示
• 五、总结

一、前言

其实在一开始本人就想做一个类似日记本的功能，但是碍于最开始能力有限，而且发现上网搜索到的一些相关资料较少，看到做有其他博主做，但是使用的云开发，本人暂时只想做一个简单的无后台的，所以没有参考。其次也搜到一些其他内容，真的是看了超多文章，这里贴出个人觉得帮助最大的文章记事本vx小程序，虽然博主只做了一些简单的功能，并未完善，但是却给了我一个知之甚少的初学者一个实现思路。

二、实现效果

按照惯例，先贴实现效果，目前只有添加日记和删除的功能，也像之前的天气功能一样，是通过主页点击图标进入，点击图标跳转具体如何实现可以看天气获取显示的文章，当然这里下面也会介绍一种新的跳转方式，放在下面说啦。

点击上图图标即可进入记事本功能主页面。

1、添加日记

点击“＋”可以进入日记编辑页面，添加日记。

2、保存日记

点击保存心情后会自动将输入内容保存下来，然后跳转回记事本功能主页面，并且会显示已经添加过的日记。

3、查看日记详情

点击对应日记可以进入详情页。

4、删除日记

长按选中日记可以删除。

三、程序实现

还是按照惯例，先上代码，这里把所有代码都贴出来了，希望大家可以点个赞和收藏哟。

1、日记主页面程序

1.1、.wxml文件

<!-- 背景图片 -->
<!-- 放在最上面，否则无法显示 -->
<!-- 加本地背景图片容易导致代码包大小超限，可以选择网络图片 -->
<image class="bg-image" mode="scaleToFill" src="https://img.zmtc.com/2019/0805/20190805044036603.jpg"></image>

<!--底部滚动-->
<scroll-view class="des-scr" scroll-y="true">
  <!--循环显示所有日记内容-->
  <block wx:for="{{totalDiaryConcent}}">
  <!-- 利用data-将当前的索引传递到删除或者打开详情的函数 -->
      <view class="des-view" bindtap="diary_detail" bindlongtap="delet" data-content="{{item}}" data-saveid="{{index}}">
        <text class="des-text">{{item.des}}</text>
        <text class="des-tiemText">{{index + 1}}</text>
      </view>
    <!-- </navigator> -->
  </block>
</scroll-view>

<!--添加按钮-->
<navigator url="../lin_diary_add/lin_diary_add">
    <button class="new-btn" 
    style="width: 220rpx; height: 93rpx; display: block; box-sizing: border-box; left: 466rpx; top: 1171rpx; position: absolute">+</button>
</navigator>

1.2、.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 #fff;
  color: #8B4513;
}
 
.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{
  width: 245rpx; 
  height: 97rpx; 
  display: block; 
  box-sizing: border-box; 
  left: 400rpx; 
  top: 1169rpx; 
  position: absolute;
  background: #FFFAFA;
  color: #8B4513;
  border-radius: 100%;
  font-size: 50rpx;
  line-height:60rpx;
}

.bg-image{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

1.3、.ts文件

// index.ts
// 获取应用实例
const app = getApp<IAppOption>()

Page({
  data: {
    id: '',
    totalDiaryConcent: []   // 全部日记
  },
  // 全部日记显示
  onShow: function () {
    // 获取当前全部日记内容
    // 必须要新定义一个再赋值才能正常显示，原因未知
    var arryTemp = wx.getStorageSync('totalDiaryConcent');
    this.setData({
      totalDiaryConcent: arryTemp
    })
  },
  // 删除日记内容
  delet:function(e:any){
    // 进行作用域外部指向
    let that = this;
    wx.showModal({
      title: '温馨提示',
      content: '是否要删除这条日记？',
      // 点击确定后删除掉对应缓存
      success (res) {
        if (res.confirm) {
          // 获取传递过来的索引
          var curId = e.currentTarget.dataset.saveid;
          // 获取全部日记内容
          var arryTemp = wx.getStorageSync('totalDiaryConcent');
          // 设置一个新的数组
          var newDiaryContent = [];
          // 利用for循环将不需要删除的存储起来
          for (var i = 0;i < arryTemp.length;i ++) {
            if (i != curId) {
              newDiaryContent.push(arryTemp[i])
            }
          }
          // 重新更新全部日记内容，其中不包含要删除的日记
          // 一定注意这里不要将新的日记内容用单引号引起来，否则会出现删除一条日记后冒出来很多条空日记
          // 而且之后也不能再添加新日记
          wx.setStorageSync('totalDiaryConcent',newDiaryContent);
        }
        // 利用onShow中同样的方法重新渲染页面
        var arryTemp = wx.getStorageSync('totalDiaryConcent');
        that.setData({
          totalDiaryConcent: arryTemp
        })
      }
    })
  },

  // 查看日记详情
  diary_detail:function(e:any){
    // 获取点击的日记的内容
    var item = e.currentTarget.dataset.content
    // 将点击到的日记的内容传递到下一个页面
    var url = '/pages/diary_detail/diary_detail?des=' + item.des
    wx.navigateTo({
      url: url,
    })
  },
})

2、添加日记页面程序

2.1、.wxml文件

<!--输入框-->
<view class="the-view">
  <!-- 输入长度默认限制为140，maxlength为-1时表示不限制最大长度 -->
  <textarea class= "the-textarea"  bindinput="getInputText" style="  margin: 5%;width: 90%;height: 90%" maxlength="-1">
  </textarea>
  <!-- 保存按钮 -->
  <button class="the-btn" bindtap="saveButton">保存心情</button>
</view>

2.2、.wxss文件

.the-text{
  position:absolute;
  left: 5%;
  top: 3.5%;
  font-size: 28rpx;
  text-align: left;
}
 
.the-btn{
  font-size: 32rpx;
  text-align: center;
  line-height:54rpx;
  height: 80rpx;
  width: 3%;
  bottom: -6%;
  background: #fedcbd;
  color: #8B4513;
}
 
.the-view{
  position:absolute;
  width: 100%;
  height: 90%;
  background-color: #feeeed;
}
 
.the-textarea{
  overflow:hidden;
}

2.3、.ts文件

// logs.ts
// const util = require('../../utils/util.js')

Page({
  data: {
    inputText: '',   // 存储输入内容
    diaryid: ''
  },

  // 文字输入框
  getInputText(e:any) {
    //记录输入的文字   
    this.setData({
      inputText: e.detail.value
    })
  },

  // 保存按钮
  saveButton() {
    // 如果输入是空
    if (this.data.inputText.length == 0) {
      return;
    }
    // 输入内容不为空
    else {
      // 获取本地缓存的之前的所有日记内容
      var diaryContent = wx.getStorageSync('totalDiaryConcent');

      // 如果之前有日记内容
      if (diaryContent != null && diaryContent != '') {
        // 获取当前日记总条数
        var curTotalNum = wx.getStorageSync('totalDiaryNum');
        // 日记总条数加1作为下一条日记id
        var nextDiaryId = curTotalNum + 1;
        // 添加新日记，id为之前日记总条数加1
        diaryContent.push({ 'des': this.data.inputText, 'diaryid': nextDiaryId });
        // 存储新日记总条数
        wx.setStorageSync('totalDiaryNum', 'nextDiaryId');
      }
      // 之前没有日记内容，是第一条日记
      else {
        diaryContent = [{ 'des': this.data.inputText, 'diaryid': 0 }];
        // 保存第一条日记
        wx.setStorageSync('totalDiaryNum', '0');
        this.setData({
          id: '0'
        })
      }
    }
    // 将输入内容存入缓存
    wx.setStorageSync('totalDiaryConcent', diaryContent);
    // 跳转回上一页面
    wx.navigateBack({
    })
  },
})

3、日记详情页页面程序

3.1、.wxml文件

<view class="diary-detail">
    <text>{{showContent}}</text>
</view>

3.2、.wxss文件

.diary-detail{
    font-size: large;
    color: #8B4513;
    /* 多文本自动换行 */
    word-break:break-all;
}

3.3、.ts文件

// pages/diary_detail/diary_detail.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   * 获取点击的日记内容
   */
  onLoad(options) {
    this.setData({
      showContent: options.des
    })
  }
})

四、详细设计

1、添加日记

1.1、获取输入文字

获取输入文字较为简单，这里在添加日记页面用了一个textarea组件，大家可以到微信开放文档查看关于textarea的详细介绍。给这个组件绑定一个函数用来获取输入文字内容，方法也比较简单，.ts文件中这部分的程序如下：

// 文字输入框
  getInputText(e:any) {
    //记录输入的文字   
    this.setData({
      inputText: e.detail.value
    })
  },

但是需要注意的是，在textarea的属性中要配置maxlength为-1，否则会发现文本输入框只能输入140个字符内容就不能再输入了。

1.2、保存输入内容

由于未使用云开发等功能，不具备后台，所以输入的全部内容只能保存在本地缓存中。这里本的缓存中共有两部分内容，分别是totalDiaryConcent：全部日记内容和totalDiaryNum全部日记条数。

// 如果输入是空
    if (this.data.inputText.length == 0) {
      return;
    }

当编辑完日记点击保存时，会先检测输入内容的长度，如果是0，则说明未输入内容，不会保存跳转。如果检测到有输入内容，则会将本地缓存中全部的日记内容提取出来，方法也比较简单，利用wx.getStorageSync实现，具体可以到微信开发文档查找，这里就不再贴出链接了。

提取出全部本地缓存的日记内容后会检测是否为空，也就是是否还没有添加过日记，如果是就会新添加一条日记，ID为0。

 // 之前没有日记内容，是第一条日记
      else {
        diaryContent = [{ 'des': this.data.inputText, 'diaryid': 0 }];
        // 保存第一条日记
        wx.setStorageSync('totalDiaryNum', '0');
        this.setData({
          id: '0'
        })
      }

如果之前已经存在日记，则从本地缓存中提取出当前日记总条数，然后总条数加1作为当前日记ID存入缓存。

// 如果之前有日记内容
      if (diaryContent != null && diaryContent != '') {
        // 获取当前日记总条数
        var curTotalNum = wx.getStorageSync('totalDiaryNum');
        // 日记总条数加1作为下一条日记id
        var nextDiaryId = curTotalNum + 1;
        // 添加新日记，id为之前日记总条数加1
        diaryContent.push({ 'des': this.data.inputText, 'diaryid': nextDiaryId });
        // 存储新日记总条数
        wx.setStorageSync('totalDiaryNum', 'nextDiaryId');
      }

1.3、跳转回记事本主页面

这里用wx.navigateBack实现跳转回上一个页面，关于本函数的详细介绍大家移步微信开放文档，这个函数中不需要添加任何内容，默认跳转回上一页面。

wx.navigateBack({
    })

2、删除日记

2.1、弹出提示框

利用wx.showModal弹出提示框，询问是否要删除本条日记，点击确定会触发删除功能。整体框架如下

wx.showModal({
      title: '温馨提示',
      content: '是否要删除这条日记？',
      // 点击确定后删除掉对应缓存
      success (res) {
        if (res.confirm) {
        删除日记
      }
    })

2.2、删除日记功能

点击确定后会删除对应日记，这里有两个重点问题，首先是如何知道用户选择的是哪一条日记，其次是如何删除用户选择的日记。

首先说一下如何知道用户选择的哪一条日记。

这里利用data-将用户选中的日记ID传给.ts文件，具体可以参考一下这个大佬的文章微信小程序页面之间三种传值方式。程序如下

<!-- 利用data-将当前的索引传递到删除或者打开详情的函数 -->
      <view class="des-view" bindtap="diary_detail" bindlongtap="delet" data-content="{{item}}" data-saveid="{{index}}">
        <text class="des-text">{{item.des}}</text>
        <text class="des-tiemText">{{index + 1}}</text>
      </view>

其次说一下知道了用户想要删除哪一条日记之后如何将该条日记删除掉，这里用的方法个人觉得比较巧妙。定义一个新的数组，获取到传递过来的日记ID后利用for循环将除了想要删除的日记外的之前的本地缓存日记全部重新缓存到新的数组，然后缓存到本地缓存中。

// 获取传递过来的索引
          var curId = e.currentTarget.dataset.saveid;
          // 获取全部日记内容
          var arryTemp = wx.getStorageSync('totalDiaryConcent');
          // 设置一个新的数组
          var newDiaryContent = [];
          // 利用for循环将不需要删除的存储起来
          for (var i = 0;i < arryTemp.length;i ++) {
            if (i != curId) {
              newDiaryContent.push(arryTemp[i])
            }
          }
          // 重新更新全部日记内容，其中不包含要删除的日记
          // 一定注意这里不要将新的日记内容用单引号引起来，否则会出现删除一条日记后冒出来很多条空日记
          // 而且之后也不能再添加新日记
          wx.setStorageSync('totalDiaryConcent',newDiaryContent);

但是需要注意的是，这样虽然在本地缓存中删除了想要删除的日记，但是会发现主页面中它并没有消失，此时需要我们在删除完成后重新渲染一次页面。

// 利用onShow中同样的方法重新渲染页面
        var arryTemp = wx.getStorageSync('totalDiaryConcent');
        that.setData({
          totalDiaryConcent: arryTemp
        })

但是直接写上面的代码会发现会报错，这里需要进行作用域的外部指向，也就是在函数一开始加一句

let that = this;

关于这部分内容大家可以看一下这篇大佬的文章小程序 wx.showModal 点击确定刷新页面。

3、日记详情显示

日记详情显示较为简单，需要解决的问题主要有两个，一个是如何确定用户想要查看的是哪条日记内容，这个在删除日记中已经解决。第二个就是如何将用户想要查看的日记详情显示出来，这里说白了就是如何实现页面间的传值，将获取到的日记内容从主页传递到详情页，具体可以看一下这篇大佬的文章微信小程序页面之间三种传值方式。

获取到日记详情内容后只需要把它渲染到页面就好啦。

这里需要注意的是，如果不在.wxss文件中添加自动换行代码，渲染到页面的日记详情内容会是一长条

.diary-detail{
    font-size: large;
    color: #8B4513;
    /* 多文本自动换行 */
    word-break:break-all;
}

五、总结

至此关于微信小程序记事本的功能介绍以及实现已经结束啦，这里简单总结一下后续优化方向，主要有两条：1、添加日记时间；2、添加后台存储。