微信小程序开发笔记—记事本

这篇具有很好参考价值的文章主要介绍了微信小程序开发笔记—记事本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

其实在一开始本人就想做一个类似日记本的功能,但是碍于最开始能力有限,而且发现上网搜索到的一些相关资料较少,看到做有其他博主做,但是使用的云开发,本人暂时只想做一个简单的无后台的,所以没有参考。其次也搜到一些其他内容,真的是看了超多文章,这里贴出个人觉得帮助最大的文章记事本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、添加后台存储。文章来源地址https://www.toymoban.com/news/detail-434900.html

到了这里,关于微信小程序开发笔记—记事本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Android Studio 开发的简易记事本

    🍅 文章末尾有获取完整项目源码方式 🍅 目录 一、引言 视频效果展示: 图片效果展示: 二、详细设计 1.首页 2.添加和修改页面 3.登录页 4.注册页 三、获取源码          Android初学者开发第一个完整的基础实例项目应该就属《记事本》了,该项目基于Android Studio开发使用

    2024年02月05日
    浏览(52)
  • 安卓大作业(AndroidStudio开发)日记记事本app

    博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月11日
    浏览(53)
  • 【Android 记事本,笔记本,可注册登录,增删改查(附源码)】

    简介 用Sqlite做数据库,用来存储账号以及笔记信息,实现了账号的注册以及登录功能,笔记方面实现了新增、删除、修改、搜索功能,列表展示笔记使用的是listView(懒得弄分割线,就使用listView的默认分割线了); 运行效果 代码讲解 我代码里使用了两个依赖,一个是工具

    2024年02月04日
    浏览(47)
  • 【安卓开发】开源Notepad记事本APP项目(完整代码+说明文档)

    作业:记事本APP。要求: (1) 给出实现源程序,对源程序加以说明; (2) 给出屏幕运行结果的截图,运行结果含有个人特征; (3) 用word文档提交,文件名:班号-姓名-学号后3位-作业。 1.页面设计美观,可以正确显示数据(20分)。 2.实现数据保存、查询、修改和读取功能(20分

    2023年04月12日
    浏览(62)
  • MFC第十九天 记事本项目功能完善和开发、CTabCtrl类与分页模式开发

    获取选择的文字 向下查找 查找替换功能 向下 向上 不区分大小写的 替换当前选中 替换全部 打开查找编辑框需要加载的 CFileDialog 构造函数详解 pch.h CApp NotePad.cpp 对编码的解析 以及对编码格式的转换 CMainDlg.h CMainDlg.cpp CMainDlg.h CMainDlg.cpp CFileDialogXq.h CFileDialogXq.cpp CMainDlg.h CMai

    2024年02月16日
    浏览(49)
  • 电脑记事本在哪里?电脑桌面显示记事本要怎么设置?

    绝大多数上班族在使用电脑办公时,都需要随手记录一些琐碎或重要的事情,例如工作注意事项、常用的文案、某项工作的具体要求、多个平台的账号和密码等。于是就有不少小伙伴想要使用电脑记事本软件来记录,那么电脑记事本在哪里呢?想要电脑桌面显示记事本怎么设

    2024年02月15日
    浏览(45)
  • WIN11右键打开方式没有记事本,记事本无法使用问题

    背景: 个人手欠把记事本卸载了,然后又安装了,结果记事本可以打开,但是应用里面没有,右击打开方式也没有!!(检索过程发现很多人人用不了是因为升级W11) 问题: 1.如题,右击打开方式里没有记事本选项! 2.右击更多打开方式,通过查找到notepad.exe打开,出现程序

    2024年02月04日
    浏览(106)
  • Android记事本

    1、项目需求分析 1.1、记事功能需求分析: 1.1.1、显示记事 用户打开记事本可以看到之前所写的所有记事内容,进入主页后,软件应该从数据库中搜索出该用户所写的全部记事,并将所有的数据进行显示。 1.1.2、添加记事 设置添加按钮,点击添加按钮之后可以编辑记事的标题

    2024年02月03日
    浏览(57)
  • Vue设计记事本

    项目描述 项目实现功能有:记录今天要完成的任务,勾选已经完成的任务,删除已经完成的全部任务。 界面展示: 代码展示 创建一个Myitem.vue文件夹 2.在components文件夹下创建 Myheader文件夹 3.在同一个文件夹下创建MyFooter.vue文件夹 4.在同个文件夹下创建MyList.vue文件 5.再创建

    2024年02月08日
    浏览(61)
  • 11 MFC 制作记事本

    选择Menu 点击新建 将内容写入\\\"_\\\"的用 符号 将菜单加入到窗口中 右键选择添加事件处理程序 点击确定 Edit设置多行显示 Edit设置按回车能够换行 Edit设置竖直方向滚动 打开文件代码 查找与替换对话框显示(非模态对话框) 对话框消息与对话框处理函数 对话框处理函数 //note

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包