一、前言

其實(shí)在一開(kāi)始本人就想做一個(gè)類(lèi)似日記本的功能，但是礙于最開(kāi)始能力有限，而且發(fā)現(xiàn)上網(wǎng)搜索到的一些相關(guān)資料較少，看到做有其他博主做，但是使用的云開(kāi)發(fā)，本人暫時(shí)只想做一個(gè)簡(jiǎn)單的無(wú)后臺(tái)的，所以沒(méi)有參考。其次也搜到一些其他內(nèi)容，真的是看了超多文章，這里貼出個(gè)人覺(jué)得幫助最大的文章記事本vx小程序，雖然博主只做了一些簡(jiǎn)單的功能，并未完善，但是卻給了我一個(gè)知之甚少的初學(xué)者一個(gè)實(shí)現(xiàn)思路。

二、實(shí)現(xiàn)效果

按照慣例，先貼實(shí)現(xiàn)效果，目前只有添加日記和刪除的功能，也像之前的天氣功能一樣，是通過(guò)主頁(yè)點(diǎn)擊圖標(biāo)進(jìn)入，點(diǎn)擊圖標(biāo)跳轉(zhuǎn)具體如何實(shí)現(xiàn)可以看天氣獲取顯示的文章，當(dāng)然這里下面也會(huì)介紹一種新的跳轉(zhuǎn)方式，放在下面說(shuō)啦。

點(diǎn)擊上圖圖標(biāo)即可進(jìn)入記事本功能主頁(yè)面。

1、添加日記

點(diǎn)擊“＋”可以進(jìn)入日記編輯頁(yè)面，添加日記。

2、保存日記

點(diǎn)擊保存心情后會(huì)自動(dòng)將輸入內(nèi)容保存下來(lái)，然后跳轉(zhuǎn)回記事本功能主頁(yè)面，并且會(huì)顯示已經(jīng)添加過(guò)的日記。

3、查看日記詳情

點(diǎn)擊對(duì)應(yīng)日記可以進(jìn)入詳情頁(yè)。

4、刪除日記

長(zhǎng)按選中日記可以刪除。

三、程序?qū)崿F(xiàn)

還是按照慣例，先上代碼，這里把所有代碼都貼出來(lái)了，希望大家可以點(diǎn)個(gè)贊和收藏喲。

1、日記主頁(yè)面程序

1.1、.wxml文件

<!-- 背景圖片 -->
<!-- 放在最上面，否則無(wú)法顯示 -->
<!-- 加本地背景圖片容易導(dǎo)致代碼包大小超限，可以選擇網(wǎng)絡(luò)圖片 -->
<image class="bg-image" mode="scaleToFill" src="https://img.zmtc.com/2019/0805/20190805044036603.jpg"></image>

<!--底部滾動(dòng)-->
<scroll-view class="des-scr" scroll-y="true">
  <!--循環(huán)顯示所有日記內(nèi)容-->
  <block wx:for="{{totalDiaryConcent}}">
  <!-- 利用data-將當(dāng)前的索引傳遞到刪除或者打開(kāi)詳情的函數(shù) -->
      <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
// 獲取應(yīng)用實(shí)例
const app = getApp<IAppOption>()

Page({
  data: {
    id: '',
    totalDiaryConcent: []   // 全部日記
  },
  // 全部日記顯示
  onShow: function () {
    // 獲取當(dāng)前全部日記內(nèi)容
    // 必須要新定義一個(gè)再賦值才能正常顯示，原因未知
    var arryTemp = wx.getStorageSync('totalDiaryConcent');
    this.setData({
      totalDiaryConcent: arryTemp
    })
  },
  // 刪除日記內(nèi)容
  delet:function(e:any){
    // 進(jìn)行作用域外部指向
    let that = this;
    wx.showModal({
      title: '溫馨提示',
      content: '是否要?jiǎng)h除這條日記？',
      // 點(diǎn)擊確定后刪除掉對(duì)應(yīng)緩存
      success (res) {
        if (res.confirm) {
          // 獲取傳遞過(guò)來(lái)的索引
          var curId = e.currentTarget.dataset.saveid;
          // 獲取全部日記內(nèi)容
          var arryTemp = wx.getStorageSync('totalDiaryConcent');
          // 設(shè)置一個(gè)新的數(shù)組
          var newDiaryContent = [];
          // 利用for循環(huán)將不需要?jiǎng)h除的存儲(chǔ)起來(lái)
          for (var i = 0;i < arryTemp.length;i ++) {
            if (i != curId) {
              newDiaryContent.push(arryTemp[i])
            }
          }
          // 重新更新全部日記內(nèi)容，其中不包含要?jiǎng)h除的日記
          // 一定注意這里不要將新的日記內(nèi)容用單引號(hào)引起來(lái)，否則會(huì)出現(xiàn)刪除一條日記后冒出來(lái)很多條空日記
          // 而且之后也不能再添加新日記
          wx.setStorageSync('totalDiaryConcent',newDiaryContent);
        }
        // 利用onShow中同樣的方法重新渲染頁(yè)面
        var arryTemp = wx.getStorageSync('totalDiaryConcent');
        that.setData({
          totalDiaryConcent: arryTemp
        })
      }
    })
  },

  // 查看日記詳情
  diary_detail:function(e:any){
    // 獲取點(diǎn)擊的日記的內(nèi)容
    var item = e.currentTarget.dataset.content
    // 將點(diǎn)擊到的日記的內(nèi)容傳遞到下一個(gè)頁(yè)面
    var url = '/pages/diary_detail/diary_detail?des=' + item.des
    wx.navigateTo({
      url: url,
    })
  },
})

2、添加日記頁(yè)面程序

2.1、.wxml文件

<!--輸入框-->
<view class="the-view">
  <!-- 輸入長(zhǎng)度默認(rèn)限制為140，maxlength為-1時(shí)表示不限制最大長(zhǎng)度 -->
  <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: '',   // 存儲(chǔ)輸入內(nèi)容
    diaryid: ''
  },

  // 文字輸入框
  getInputText(e:any) {
    //記錄輸入的文字   
    this.setData({
      inputText: e.detail.value
    })
  },

  // 保存按鈕
  saveButton() {
    // 如果輸入是空
    if (this.data.inputText.length == 0) {
      return;
    }
    // 輸入內(nèi)容不為空
    else {
      // 獲取本地緩存的之前的所有日記內(nèi)容
      var diaryContent = wx.getStorageSync('totalDiaryConcent');

      // 如果之前有日記內(nèi)容
      if (diaryContent != null && diaryContent != '') {
        // 獲取當(dāng)前日記總條數(shù)
        var curTotalNum = wx.getStorageSync('totalDiaryNum');
        // 日記總條數(shù)加1作為下一條日記id
        var nextDiaryId = curTotalNum + 1;
        // 添加新日記，id為之前日記總條數(shù)加1
        diaryContent.push({ 'des': this.data.inputText, 'diaryid': nextDiaryId });
        // 存儲(chǔ)新日記總條數(shù)
        wx.setStorageSync('totalDiaryNum', 'nextDiaryId');
      }
      // 之前沒(méi)有日記內(nèi)容，是第一條日記
      else {
        diaryContent = [{ 'des': this.data.inputText, 'diaryid': 0 }];
        // 保存第一條日記
        wx.setStorageSync('totalDiaryNum', '0');
        this.setData({
          id: '0'
        })
      }
    }
    // 將輸入內(nèi)容存入緩存
    wx.setStorageSync('totalDiaryConcent', diaryContent);
    // 跳轉(zhuǎn)回上一頁(yè)面
    wx.navigateBack({
    })
  },
})

3、日記詳情頁(yè)頁(yè)面程序

3.1、.wxml文件

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

3.2、.wxss文件

.diary-detail{
    font-size: large;
    color: #8B4513;
    /* 多文本自動(dòng)換行 */
    word-break:break-all;
}

3.3、.ts文件

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

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   * 獲取點(diǎn)擊的日記內(nèi)容
   */
  onLoad(options) {
    this.setData({
      showContent: options.des
    })
  }
})

四、詳細(xì)設(shè)計(jì)

1、添加日記

1.1、獲取輸入文字

獲取輸入文字較為簡(jiǎn)單，這里在添加日記頁(yè)面用了一個(gè)textarea組件，大家可以到微信開(kāi)放文檔查看關(guān)于textarea的詳細(xì)介紹。給這個(gè)組件綁定一個(gè)函數(shù)用來(lái)獲取輸入文字內(nèi)容，方法也比較簡(jiǎn)單，.ts文件中這部分的程序如下：

// 文字輸入框
  getInputText(e:any) {
    //記錄輸入的文字   
    this.setData({
      inputText: e.detail.value
    })
  },

但是需要注意的是，在textarea的屬性中要配置maxlength為-1，否則會(huì)發(fā)現(xiàn)文本輸入框只能輸入140個(gè)字符內(nèi)容就不能再輸入了。

1.2、保存輸入內(nèi)容

由于未使用云開(kāi)發(fā)等功能，不具備后臺(tái)，所以輸入的全部?jī)?nèi)容只能保存在本地緩存中。這里本的緩存中共有兩部分內(nèi)容，分別是totalDiaryConcent：全部日記內(nèi)容和totalDiaryNum全部日記條數(shù)。

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

當(dāng)編輯完日記點(diǎn)擊保存時(shí)，會(huì)先檢測(cè)輸入內(nèi)容的長(zhǎng)度，如果是0，則說(shuō)明未輸入內(nèi)容，不會(huì)保存跳轉(zhuǎn)。如果檢測(cè)到有輸入內(nèi)容，則會(huì)將本地緩存中全部的日記內(nèi)容提取出來(lái)，方法也比較簡(jiǎn)單，利用wx.getStorageSync實(shí)現(xiàn)，具體可以到微信開(kāi)發(fā)文檔查找，這里就不再貼出鏈接了。

提取出全部本地緩存的日記內(nèi)容后會(huì)檢測(cè)是否為空，也就是是否還沒(méi)有添加過(guò)日記，如果是就會(huì)新添加一條日記，ID為0。

 // 之前沒(méi)有日記內(nèi)容，是第一條日記
      else {
        diaryContent = [{ 'des': this.data.inputText, 'diaryid': 0 }];
        // 保存第一條日記
        wx.setStorageSync('totalDiaryNum', '0');
        this.setData({
          id: '0'
        })
      }

如果之前已經(jīng)存在日記，則從本地緩存中提取出當(dāng)前日記總條數(shù)，然后總條數(shù)加1作為當(dāng)前日記ID存入緩存。

// 如果之前有日記內(nèi)容
      if (diaryContent != null && diaryContent != '') {
        // 獲取當(dāng)前日記總條數(shù)
        var curTotalNum = wx.getStorageSync('totalDiaryNum');
        // 日記總條數(shù)加1作為下一條日記id
        var nextDiaryId = curTotalNum + 1;
        // 添加新日記，id為之前日記總條數(shù)加1
        diaryContent.push({ 'des': this.data.inputText, 'diaryid': nextDiaryId });
        // 存儲(chǔ)新日記總條數(shù)
        wx.setStorageSync('totalDiaryNum', 'nextDiaryId');
      }

1.3、跳轉(zhuǎn)回記事本主頁(yè)面

這里用wx.navigateBack實(shí)現(xiàn)跳轉(zhuǎn)回上一個(gè)頁(yè)面，關(guān)于本函數(shù)的詳細(xì)介紹大家移步微信開(kāi)放文檔，這個(gè)函數(shù)中不需要添加任何內(nèi)容，默認(rèn)跳轉(zhuǎn)回上一頁(yè)面。

wx.navigateBack({
    })

2、刪除日記

2.1、彈出提示框

利用wx.showModal彈出提示框，詢(xún)問(wèn)是否要?jiǎng)h除本條日記，點(diǎn)擊確定會(huì)觸發(fā)刪除功能。整體框架如下

wx.showModal({
      title: '溫馨提示',
      content: '是否要?jiǎng)h除這條日記？',
      // 點(diǎn)擊確定后刪除掉對(duì)應(yīng)緩存
      success (res) {
        if (res.confirm) {
        刪除日記
      }
    })

2.2、刪除日記功能

點(diǎn)擊確定后會(huì)刪除對(duì)應(yīng)日記，這里有兩個(gè)重點(diǎn)問(wèn)題，首先是如何知道用戶(hù)選擇的是哪一條日記，其次是如何刪除用戶(hù)選擇的日記。

首先說(shuō)一下如何知道用戶(hù)選擇的哪一條日記。

這里利用data-將用戶(hù)選中的日記ID傳給.ts文件，具體可以參考一下這個(gè)大佬的文章微信小程序頁(yè)面之間三種傳值方式。程序如下

<!-- 利用data-將當(dāng)前的索引傳遞到刪除或者打開(kāi)詳情的函數(shù) -->
      <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>

其次說(shuō)一下知道了用戶(hù)想要?jiǎng)h除哪一條日記之后如何將該條日記刪除掉，這里用的方法個(gè)人覺(jué)得比較巧妙。定義一個(gè)新的數(shù)組，獲取到傳遞過(guò)來(lái)的日記ID后利用for循環(huán)將除了想要?jiǎng)h除的日記外的之前的本地緩存日記全部重新緩存到新的數(shù)組，然后緩存到本地緩存中。

// 獲取傳遞過(guò)來(lái)的索引
          var curId = e.currentTarget.dataset.saveid;
          // 獲取全部日記內(nèi)容
          var arryTemp = wx.getStorageSync('totalDiaryConcent');
          // 設(shè)置一個(gè)新的數(shù)組
          var newDiaryContent = [];
          // 利用for循環(huán)將不需要?jiǎng)h除的存儲(chǔ)起來(lái)
          for (var i = 0;i < arryTemp.length;i ++) {
            if (i != curId) {
              newDiaryContent.push(arryTemp[i])
            }
          }
          // 重新更新全部日記內(nèi)容，其中不包含要?jiǎng)h除的日記
          // 一定注意這里不要將新的日記內(nèi)容用單引號(hào)引起來(lái)，否則會(huì)出現(xiàn)刪除一條日記后冒出來(lái)很多條空日記
          // 而且之后也不能再添加新日記
          wx.setStorageSync('totalDiaryConcent',newDiaryContent);

但是需要注意的是，這樣雖然在本地緩存中刪除了想要?jiǎng)h除的日記，但是會(huì)發(fā)現(xiàn)主頁(yè)面中它并沒(méi)有消失，此時(shí)需要我們?cè)趧h除完成后重新渲染一次頁(yè)面。

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

但是直接寫(xiě)上面的代碼會(huì)發(fā)現(xiàn)會(huì)報(bào)錯(cuò)，這里需要進(jìn)行作用域的外部指向，也就是在函數(shù)一開(kāi)始加一句

let that = this;

關(guān)于這部分內(nèi)容大家可以看一下這篇大佬的文章小程序 wx.showModal 點(diǎn)擊確定刷新頁(yè)面。

3、日記詳情顯示

日記詳情顯示較為簡(jiǎn)單，需要解決的問(wèn)題主要有兩個(gè)，一個(gè)是如何確定用戶(hù)想要查看的是哪條日記內(nèi)容，這個(gè)在刪除日記中已經(jīng)解決。第二個(gè)就是如何將用戶(hù)想要查看的日記詳情顯示出來(lái)，這里說(shuō)白了就是如何實(shí)現(xiàn)頁(yè)面間的傳值，將獲取到的日記內(nèi)容從主頁(yè)傳遞到詳情頁(yè)，具體可以看一下這篇大佬的文章微信小程序頁(yè)面之間三種傳值方式。

獲取到日記詳情內(nèi)容后只需要把它渲染到頁(yè)面就好啦。

這里需要注意的是，如果不在.wxss文件中添加自動(dòng)換行代碼，渲染到頁(yè)面的日記詳情內(nèi)容會(huì)是一長(zhǎng)條

.diary-detail{
    font-size: large;
    color: #8B4513;
    /* 多文本自動(dòng)換行 */
    word-break:break-all;
}

五、總結(jié)

至此關(guān)于微信小程序記事本的功能介紹以及實(shí)現(xiàn)已經(jīng)結(jié)束啦，這里簡(jiǎn)單總結(jié)一下后續(xù)優(yōu)化方向，主要有兩條：1、添加日記時(shí)間；2、添加后臺(tái)存儲(chǔ)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-434900.html

到了這里，關(guān)于微信小程序開(kāi)發(fā)筆記—記事本的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！