微信小程序项目实例——心情记事本

简介: 微信小程序项目实例——心情记事本

微信小程序项目实例——心情记事本

文章目录

项目代码见文字底部,点赞关注有惊喜


一、项目展示

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

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

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

就可以记录当前的心情了

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

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

缩略图如下:

项目的展示图如下:

二、首页

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

主要代码如下:

<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()
    }
})

三、效果图

具体的效果展示如下


文末

具体的介绍就到这里了

有兴趣的同学可以继续研究

代码放到下面链接里了

点击下载 小程序

相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
349 3
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
46 1
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
116 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
2月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
38 0
|
4月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
96 1
|
4月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
4月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
4月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
4月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试