微信小程序开发之实现心情记事本

小程序心情记事本小程序记事本 2023-01-11 15:01:29 764人浏览泡泡鱼

摘要

目录一、项目展示二、首页三、效果图一、项目展示心情记事本是一款可以记录当前心情和生活的记事本用户可以选择当前的心情（开心、平淡、伤心）和表情并结合自己想要描述的文字就可以记录

一、项目展示

心情记事本是一款可以记录当前心情和生活的记事本

用户可以选择当前的心情（开心、平淡、伤心）和表情

并结合自己想要描述的文字

就可以记录当前的心情了

为了更好的展现用户的心情

项目罗列了大量的精美表情

缩略图如下：

项目的展示图如下：

二、首页

首页主要由日历组件和自制的记录组件结合而成

主要代码如下：

<view class="container">
    <view class="title">
        <view class="left-arrow" bindtap="prev_month"> <image src="/asset/images/left-arrow.svg" class="arrow"></image> </view>
        <picker mode="date" value="{{date}}" fields="month" start="{{start_date}}" end="{{end_date}}" bindchange="select_date">
            <view class="date-picker"> {{now_date}} </view>
        </picker>
        <view class="right-arrow" bindtap="next_month"> <image src="/asset/images/right-arrow.svg" class="arrow"></image> </view>
    </view>
    <view class="divider-box">
        <image src="/asset/images/divider.svg" class="divider"></image>
    </view>
    <view class="calender">
        <view class="calender-header">
            <image src="/asset/images/SUN.svg" class="week-item"></image>
            <image src="/asset/images/MON.svg" class="week-item"></image>
            <image src="/asset/images/TUE.svg" class="week-item"></image>
            <image src="/asset/images/WED.svg" class="week-item"></image>
            <image src="/asset/images/THU.svg" class="week-item"></image>
            <image src="/asset/images/FRI.svg" class="week-item"></image>
            <image src="/asset/images/SAT.svg" class="week-item"></image>
        </view>
        <view class="calender-body">
            <block wx:for="{{ date_arr }}" wx:key="key">
                <view class="date-item date-enabled-{{item.enabled}} date-today-{{item.today}} ">
                    <span>{{item.date}}</span>
                    <block wx:if="{{item.emotion_value}}">
                        <image src="/asset/images/circle-{{item.emotion_value}}.svg" class="circle"></image>
                    </block>
                </view>
            </block>

        </view>
    </view>

    <view class="diary">
        <view wx:for="{{ items }}" wx:key="{{key}}">
            <view class="diary-item" key="{{key}}" bindtap="detail" data-key="{{ item.key }}">
                <view class="diary-date">
                    <view class="date">{{ item.value['date']}}</view>
                    <view class="day">{{ item.value['week']}}</view>
                </view>
                <image src="/asset/images/virtical-divider.svg" class="virtical-divider"></image>
                <view class="emoji">
                    <image src="/asset/emojis/{{ item.value['emoji_type']}}.svg" class="emoji-image"></image>
                </view>
                <image src="/asset/images/virtical-divider.svg" class="virtical-divider"></image>
                <view class="text">{{ item.value['text'] }}</view>
                <image class="more-arrow" src="/asset/images/more-arrow.svg"></image>
            </view>
        </view>


    </view>
</view>
<image src="/asset/images/add-button.svg" class="add-button" bindtap="blank_modal"></image>
<view class="cover" wx:if="{{modal_visiable}}" bindtap="cancle"></view>
<view class="modal ripple bounceInDown" wx:if="{{modal_visiable}}">
    <view class="create-box">
        <image src="/asset/images/close-button.svg" class="close-button" bindtap="cancle"></image>
        <image src="/asset/emojis/{{ emoji_indicator }}.svg" class="emoji-image"></image>
        <view class="emoji-select-box">
            <picker-view indicator-style="height: 50px;" value="{{ emoji_defaul_value }}" class="emoji-picker" bindchange="select_emoji">
                <picker-view-column>
                    <view style="line-height: 50px; color: #797979">伤心的表情</view>
                    <view style="line-height: 50px; color: #797979">开心的表情</view>
                    <view style="line-height: 50px; color: #797979">平淡的表情</view>
                </picker-view-column>
                <picker-view-column>
                    <view wx:for="{{ emoji_list }}" wx:key="key">
                        <image src="/asset/emojis/{{ item }}.svg" style="height: 100%; width: 100rpx;"></image>
                    </view>
                </picker-view-column>
            </picker-view>
        </view>
        <block wx:if="{{ is_newbee }}">
            <textarea placeholder="选择表达今天心情的emoji, 或者在此写点文字, enjoy ~ ~" value="{{ text }}" bindinput="input"  placeholder-style="color:#9B9B9B;font-size:26rpx;line-height:46rpx" class="text"/>
        </block>
        <block wx:else>
            <textarea placeholder="写点什么,当然你也可以什么都不写" value="{{ text }}" bindinput="input"  placeholder-style="color:#9B9B9B;font-size:26rpx;" class="text"/>
        </block>
        <view class="button-box">
            <block wx:if="{{ delete_button_visiable}}">
                <view class="delete-button" bindtap="delete" style="visibility: show">删除</view>
            </block>
            <block wx:else>
                <view class="delete-button" bindtap="delete" style="visibility: hidden">删除</view>
            </block>
            <view class="submit-button" bindtap="save">保存</view>
        </view>
    </view>
</view>

let app = getApp()
let util = require('../../utils/util.js')
let date_fORMater = require('../../utils/date_formater.js')
let storage = require('../../utils/data_storage.js')


Page({
    data: {
        'date_arr': [],
        'now_date': '2017-04-11',
        'start_date': '2015-04-11',
        'end_date': '2019-04-11',
        'date': '',
        'year': 0,
        'month': 0,
        'items': [],
        'modal_visiable': false,
        'emoji_list': [],
        'emoji_indicator': 'face-with-stuck-out-tongue-and-winking-eye',
        'emoji_defaul_value': [1, 1],
        'text': '',
        'item_key': '', //当前条目的key
        'delete_button_visiable': false ,//modal中的删除按钮是否可见
        'is_newbee': false // 是不是第一次使用
    },
    // 初始化页面数据
    page_init: function(year, month) {
        console.log(year + '-' + month + ' data had initialized')

        let data = util.get_date(year, month)

        let emojis = util.get_emojis()
        this.setData({
            'date_arr': data,
            'now_date': date_formater.format_month(month) + ' ' +year,
            'date': year + '-' + date_formater.add_date_prefix(month + 1) + '-01',
            'year': year,
            'month': month,
            'start_date': year - 2 + '-' + date_formater.add_date_prefix(month + 1) + '-01',
            'end_date': year + 2 + '-' + date_formater.add_date_prefix(month + 1) + '-01',
            'items': storage.all(year, month),
            'emoji_list': emojis['positive'],
        })

    },

    onLoad: function() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth()
        let emojis = util.get_emojis()

        this.page_init(year, month)
        // let is_newbee = util.is_newbee()
        let is_newbee = false
        if(is_newbee) {
            this.blank_modal()
        }
        this.setData({
            'is_newbee': is_newbee
        })
    },

    
    select_date: function(e) {
        let date_str = e.detail.value
        let date_arr = date_str.split('-')
        let year = parseInt(date_arr[0])
        let month = parseInt(date_arr[1]) - 1
    
        this.page_init(year, month)
    },

    prev_month: function() {
        let year = this.data.year
        let month = this.data.month

        if (month - 1 < 0) {
            year = year - 1
            month = 11
        } else {
            month = month - 1
        }

        this.page_init(year, month)
    },

    next_month: function() {
        let year = this.data.year
        let month = this.data.month

        if (month + 1 > 11) {
            year = year + 1
            month = 0
        } else {
            month = month + 1
        }

        this.page_init(year, month)
    },

    modal: function() {
        this.setData({
            'modal_visiable': true,
            'delete_button_visiable': true
        })
    },

    blank_modal: function() {
        this.setData({
            'modal_visiable': true,
            'emoji_indicator': 'face-with-stuck-out-tongue-and-winking-eye',
            'emoji_defaul_value': [1, 1],
            'text': '',
            'delete_button_visiable': false
        })

    },

    select_emoji: function(e) {
        var val = e.detail.value
        let emoji_type = val[0]
        let emoji_index = val[1]
        let emojis = util.get_emojis()
        var emoji_list = []

        if(emoji_type == 0) {
            emoji_list = emojis['negative']
        }
        if(emoji_type == 1) {
            emoji_list = emojis['positive']
        }
        if(emoji_type == 2){
            emoji_list = emojis['neutral']
        }

        this.setData({
            'emoji_list': emoji_list,
            'emoji_indicator': emoji_list[emoji_index]
        })
    },

    input : function(e) {
        this.setData({
            'text': e.detail['value']
        })
        // console.log(this.data.text)
    },
    save: function(){
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth()
        let day = date.getDate()
        let key = year + '-' + date_formater.add_date_prefix(month + 1)+'-' + date_formater.add_date_prefix(day)
        
        storage.add(key, this.data.emoji_indicator, 0, 0, 0, this.data.text)
        this.page_init(year, month)
        this.cancle()
    },

    delete: function() {
        storage.del(this.data.item_key)
        this.page_init(this.data.year, this.data.month)
        this.cancle()
    },

    cancle: function() {
        this.setData({
            'modal_visiable': false
        })
    },

    detail: function(e) {
        let key = e.currentTarget.dataset.key
        let item = storage.get(key)
        let emoji_defaul_value = util.get_emoji_pos(item['emoji_type'])
        this.setData({
            'text': item['text'],
            'emoji_indicator': item['emoji_type'],
            'emoji_defaul_value' : emoji_defaul_value,
            'item_key': key
        })
        this.modal()
    }

})

三、效果图

具体的效果展示如下

到此这篇关于微信小程序开发之实现心情记事本的文章就介绍到这了,更多相关小程序心情记事本内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序开发之实现心情记事本

本文链接: https://www.lsjlt.com/news/177424.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

微信小程序开发之实现心情记事本

目录一、项目展示二、首页三、效果图一、项目展示心情记事本是一款可以记录当前心情和生活的记事本用户可以选择当前的心情（开心、平淡、伤心）和表情并结合自己想要描述的文字就可以记录...

99+

2023-01-11

小程序心情记事本小程序记事本
微信小程序开发之实现记账本

目录一、项目展示二、首页三、效果图一、项目展示这是一款简易的记账本小程序用户可以记录自己平日里的借入和借出的金额此外可以手动删除记录（右滑记录）二、首页首页划分为资产金...

99+

2023-01-13

微信小程序实现记账本小程序实现记账本小程序记账本
微信小程序开发篇之踩坑记录

最近参与开发了公司的第一款小程序，开发体验基本类似于基于webview的混合式开发，可以调用官方强大的api，但也有一些坑或者说不习惯的地方。这篇文章从实用性出发，记录了开发过程中的...

99+

2024-04-02
微信小程序开发之实现一个跑步小程序

目录地图组件当前位置开始跑步按钮GPS定位设置前后台允许获取定位开启前后台定位绘制路线自己动手实现一个跑步小程序用到的方法：wx.onLocationChange，监听实时地理位置...

99+

2024-04-02
微信小程序开发之实现摇色子游戏

目录一、项目展示二、核心代码三、效果图一、项目展示摇色子是一款简易的游戏类小程序用户可以投出1-9个色子二、核心代码 dice.wxml <!--pages/dice/...

99+

2023-01-28

微信小程序摇色子游戏小程序摇色子游戏小程序游戏
微信小程序 | 小程序开发

🖥️ 微信小程序专栏：小程序开发初级知识 🧑‍💼 个人简介：一个不甘平庸的平凡人🍬 ✨ 个人主页：CoderHing的个人主页 🍀 格言: ☀️ 路漫...

99+

2023-09-08

微信小程序小程序
微信小程序开发之实现食堂点餐系统

目录一、项目展示二、操作流程和核心代码三、效果展示一、项目展示这是一款娱乐性的小程序目的是为了解决大学生吃饭的选择困难症用户可以选择不同的院校并设置不同餐厅的概率可以随机选...

99+

2023-01-14

微信小程序实现食堂点餐系统小程序实现食堂点餐系统小程序点餐系统
微信小程序开发之实现别踩白块游戏

目录一、项目展示二、无尽模式三、计时模式四、急速模式一、项目展示别踩白块是一款微信小游戏分为无尽模式、计时模式、急速模式三种模式用户需要点击不断移动的黑色方块若点击到白色方块...

99+

2023-02-07

微信小程序别踩白块游戏小程序别踩白块游戏小程序游戏
微信小程序开发实现轮播图

小程序，移动端离不开轮播图的功能，下面就写一个小程序的轮播图功能分享给大家效果图： 1.页面代码  <view class="...

99+

2024-04-02
【微信开发】微信小程序实现实时聊天功能

最近在做一个项目，需要运用到实时聊天功能，分享一下。分为：界面如何布局以及细节；如何实现实时更新；全部代码展示；一、界面如何布局以及细节： 1.说到底，聊天界面就是循环一个数组，每一行...

99+

2023-09-02

微信小程序小程序
微信小程序开发之如何实现点击按钮退出小程序

小编给大家分享一下微信小程序开发之如何实现点击按钮退出小程序，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！微信小程序官方是没有提...

99+

2024-04-02
微信小程序开发之wx.showToast怎么用

这篇文章主要介绍了微信小程序开发之wx.showToast怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。wx.showToast AP...

99+

2024-04-02
微信小程序开发之连接本地MYSQL数据库

一、本地搭建HTTP服务器 1.使用Node.js在本地搭建HTTP服务器 1）下载安装Node.js 网址：https://nodejs.org/en 右边是长期维护版本，左边是尝鲜版，推荐下载长期维护版本 2）安装完成后本地创建文件夹...

99+

2023-08-16

数据库微信小程序 mysql
微信小程序 - 云开发

1、小程序云开发 1.1、云开发简介小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服...

99+

2023-09-04

微信小程序小程序
微信小程序实现圆心进度条

本文实例为大家分享了微信小程序实现圆心进度条的具体代码，供大家参考，具体内容如下一、创建项目结构打开微信开发者工具创建一个项目，新建与 pages 同级目录 componen...

99+

2024-04-02
微信记账小程序开发的基本功能是什么

小编给大家分享一下微信记账小程序开发的基本功能是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！随着超前消费产品充斥着互联网市场，也让人们在平时生活中消费观念也...

99+

2023-06-27
微信小程序开发怎么计算开发成本

这篇文章主要介绍了微信小程序开发怎么计算开发成本，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1微信小程序开发需要多少钱　　小程序开发的成本投入大概在2万左右，相比较APP软...

99+

2023-06-26
微信小程序开发之获取用户信息

环境微信开发者工具 Stable 1.06.2303220云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识。注意， openid 并不是微信用户的...

99+

2023-09-27

微信小程序
微信小程序开发语言（微信小程序开发教程）详细步骤

微信小程序开发语言开发微信小程序用什么语言 1、微信小程序开发所需要的语言比较特别，首先介绍一下需要使用到的文件类型大致分为：WXML（WeiXin Mark Language 微信标记语言）、WX...

99+

2023-10-23

微信小程序开发语言小程序
微信小程序使用uni-app开发小程序及部分功能实现详解心得

目录一、uni-app 1、简介 2、开发工具 3、新建 uni-app项目 4、把项目运行到微信开发者工具二、实现tabBar效果 1、创建tabBar页面 2、配置tabBar 1、创建分包目录 2、在 pages.json 文件...

99+

2023-09-04

小程序 uni-app 微信小程序