微信小程序项目实例——心情记事本
微信小程序项目实例——心情记事本
文章目录
- 微信小程序项目实例——心情记事本
- 一、项目展示
- 二、首页
- 三、效果图
- 文末
项目代码见文字底部,点赞关注有惊喜
一、项目展示
心情记事本是一款可以记录当前心情和生活的记事本
用户可以选择当前的心情(开心、平淡、伤心)和表情
并结合自己想要描述的文字
就可以记录当前的心情了
为了更好的展现用户的心情
项目罗列了大量的精美表情
缩略图如下:
项目的展示图如下:
二、首页
首页主要由日历组件和自制的记录组件结合而成
主要代码如下:
<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 = falseif(is_newbee) {this.blank_modal()}this.setData({'is_newbee': is_newbee})},select_date: function(e) {let date_str = e.detail.valuelet date_arr = date_str.split('-')let year = parseInt(date_arr[0])let month = parseInt(date_arr[1]) - 1this.page_init(year, month)},prev_month: function() {let year = this.data.yearlet month = this.data.monthif (month - 1 < 0) {year = year - 1month = 11} else {month = month - 1}this.page_init(year, month)},next_month: function() {let year = this.data.yearlet month = this.data.monthif (month + 1 > 11) {year = year + 1month = 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.valuelet 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.keylet 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()}})
三、效果图
具体的效果展示如下
文末
具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了
点击下载 小程序
微信小程序项目实例——心情记事本相关推荐
- 微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器 文章目录 微信小程序项目实例--二维码生成器 一.项目展示 二.项目核心代码 三.效果展示 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 项目是一个简单实 ...
- 微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁 文章目录 微信小程序项目实例--手势解锁 一.项目展示 二.设置手势.手势解锁 三.手势重置 文末:项目代码 项目代码见文字底部 一.项目展示 这是一款简单实用的手势解 ...
- 微信小程序项目实例——摇色子
微信小程序项目实例--摇色子 文章目录 微信小程序项目实例--摇色子 一.项目展示 二.核心代码 三.效果图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 摇色子是一款简易的游戏类小程序 用 ...
- 微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个 文章目录 微信小程序项目实例--食堂吃哪个 一.项目展示 二.操作流程和核心代码 三.效果展示 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 这是一款娱乐性 ...
- 微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器 文章目录 微信小程序项目实例--体质计算器 一.项目展示 二.项目核心代码 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 体质计算器是一款简单的健康类小程序 ...
- 微信小程序项目实例——记账本
微信小程序项目实例--记账本 文章目录 微信小程序项目实例--记账本 一.项目展示 二.首页 三.效果图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 这是一款简易的记账本小程序 用户可以记 ...
- 微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘 文章目录 微信小程序项目实例--幸运大转盘 一.项目展示 二.抽奖页 三.领奖页 文末:项目代码 项目代码见文字底部,点赞关注有惊喜 一.项目展示 幸运大转盘是一个简 ...
- 微信小程序项目实例——狼人杀
微信小程序项目实例--狼人杀 文章目录 微信小程序项目实例--狼人杀 一.项目展示 二.首页 三.游戏页 四.特殊角色 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 狼人杀是一款多人参与的, ...
- 微信小程序项目实例——我有一支画笔(画画)
微信小程序项目实例--我有一支画笔(画画) 文章目录 微信小程序项目实例--我有一支画笔(画画) 一.项目展示 二.首页 三.自由绘图 四.照片绘图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目 ...
最新文章
- 在Eclipse中安装ADT
- mysql 多个if_mysql if else 多条件
- 2014家电盘点:求变与创新
- Asp.net 2.0 中获取控件输出的Html代码 (转)
- wxWidgets:wxTreebook类用法
- Web缓存的作用与类型
- 如何查看服务器并发请求连接数
- 超级连续的图片滚动特效
- 计算坐标点的距离计算机公式,计算两个GPS坐标点的距离
- LeetCode 5356. 矩阵中的幸运数
- 成功不自律仍是一场空
- python request请求参数_使用python将请求的requests headers参数格式化方法
- linux tar压缩文件命令,linux解压压缩命令tar详解
- 利用Greenfoot制作简单的小游戏——记忆翻牌游戏(四)
- android 转音频格式,android_Lame转换音频格式
- 武警部队公安应急人防安监三维可视化交互电子沙盘方案书
- 物联网芯片的协议之WLAN及其调制
- rasp 系统_RASP相关的技术实现和产品介绍
- ERLANG日期与时间
- Tomcatnbsp;Servletnbsp;JSPamp;nbs…
热门文章
- comet OJ 当我们同心在一起
- oracle java培训机构
- Netty入门--传统IO与NIO详解
- 硬件特征码已达到最大上限_监控录像机“资源不足”或“达到上限” 的原因及解决方法!...
- Error: EPERM: operation not permitted, unlink 'D:\Sources\**\node_modules\fsevents\node_modules\abbr
- USB转串口芯片 CH340 系列
- [附源码]Java计算机毕业设计SSM菜鸟驿站快递分发系统
- 电影推荐系统 python简书_基于django和协同过滤/cnn的电影推荐系统
- steam搬砖项目,月利润9000+
- 2001-2022年《中国县域统计年鉴面板数据》Excel版