From 166f5152071d7d31377cfdae357e8a3a6b46626b Mon Sep 17 00:00:00 2001 From: QlQl <2458371920@qq.com> Date: Sun, 12 Sep 2021 14:32:25 +0800 Subject: [PATCH] -1.4.0 --- README.md | 49 ++++++++---- app.js | 15 ++-- project.config.json | 2 +- src/pages/add-self-list/add-self-list.wxml | 4 +- src/pages/collection/collection.js | 34 ++++----- src/pages/collection/collection.json | 2 +- src/pages/collection/collection.wxml | 27 +++++-- src/pages/collection/touchmove.wxs | 87 ++++++++++++++++++++++ src/pages/editor/editor.wxml | 4 +- src/pages/history/history.wxml | 4 +- src/pages/list/list.wxml | 4 +- src/pages/review/review.js | 3 +- src/pages/review/review.wxml | 2 +- 13 files changed, 178 insertions(+), 59 deletions(-) create mode 100644 src/pages/collection/touchmove.wxs diff --git a/README.md b/README.md index b6f2000..465fbf4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ ### 微信小程序——自律树洞 -#### 1.0.0 +#### -1.0.0 ##### 第一个 0 - 1 的项目 @@ -14,7 +14,7 @@ - **前后端数据交互时机和内容要合理。** -比如：目前我选择了较为笨拙的方式，即：在 tabbar 页面触发 onshow 的时候与将全部数据保存在本地，每隔 30s 将当前数据同步到后端。 +比如：目前我选择了较为笨拙的方式，即：在 tab-bar 页面触发 onShow 的时候与将全部数据保存在本地，每隔 30s 将当前数据同步到后端。 *待以后有更好的办法再来优化* - **修复左侧弹出菜单在特定情况下(页面滑动到底部)显示位置会偏移** @@ -27,37 +27,58 @@ 问题： - 无论如何实现，当页面高度随着内容数量增多时，页面会上下滑动，当滑动到顶部或者底部时， - 会相应的显示位置过高或过低。 + 无论如何实现，当页面高度随着内容数量增多时，页面会上下滑动，当滑动到顶部或者底部时， 会相应的显示位置过高或过低。 解决： - 为页面内容增加一个 ，设置高度为 100% ，这样保证内容可以上下滑动且页面是不会上下滑动的， - 然后在 内部增加 ，设置高度 height 的原则是不会引起页面上下滑动，保证 - 可以上下滑动的同时位置又相对屏幕固定。 + 为页面内容增加一个 ，设置高度为 100% ，这样保证内容可以上下滑动且页面是不会上下滑动的，然后在 内部增加 ，设置高度 height 的原则是不会引起页面上下滑动，保证 可以上下滑动的同时位置又相对屏幕固定。 ##### 设计前想好页面架构、页面间数据通信方式、前后端交互方式和时机，页面设计不能只依靠 absolute。 #### -1.3.0: - -完全重构数据交互和存储方式 + - 以前： - - 数据以本地为主，每一定时间（30s）同步到服务器一次。 - - 数据通信时采用最笨拙的方式，即，先删除服务器的全部数据，然后再将新的数据全部加上去。 + + ``` + 1、数据以本地为主，每一定时间（30s）同步到服务器一次。 + 2、数据通信时采用最笨拙的方式，即，先删除服务器的全部数据，然后再将新的数据全部加上去。 + ``` + - 现在： - - 数据以服务器为主，每次数据的更改都会及时同步到服务器。 - - 需要 put / delete / post 的数据分别采用不同的方式，只针对该数据进行更改。 -### 1.3.1 + ``` + 1、数据以服务器为主，每次数据的更改都会及时同步到服务器。 + 2、需要 put / delete / post 的数据分别采用不同的方式，只针对该数据进行更改。 + ``` + +### -1.3.1 - -修复部分机型标题栏高度过低的问题 -#### 1.3.2 + ``` + 使 navbar 和“胶囊”对齐。 + ``` -- -优化 tab-bar 标签栏 UI +#### -1.3.2 + +- -优化 tab-bar 标签栏 UI - -修复部分机型页面显示不同 bug +#### -1.4.0 + +- -新增“创建任务”按钮的可拖拽和自动归位的功能 + +``` +1、直接在 js 文件中监听 touchmove 事件，会使得拖动十分卡顿，所以需要放在 wxs 文件中监听，会变得很流畅。 +2、因为拖拽是在 wxs 中实现的，所以“自动归位”功能必须也要在 wxs 中实现，不能在 js 中实现，因为 wxs 设置的 style 优先级高于在 js 中通常设置 top 和 left 数据影响 dom 的 style 的优先级。 +``` + +- -新增向用户提示更新内容的功能 +- -修复个性签名不能同步到服务器的问题 + ### 小结 总的来说，此次项目较为简单，但是还有的地方没有处理好（左侧栏在特定情况下位置会偏移），作为上手的第一个项目较为合适。 diff --git a/app.js b/app.js index 26e2c20..fc54cbe 100644 --- a/app.js +++ b/app.js @@ -7,7 +7,6 @@ App({ let menuButtonObject = wx.getMenuButtonBoundingClientRect(); wx.getSystemInfo({ success: res => { - console.log(res) let statusBarHeight = res.statusBarHeight, navTop = menuButtonObject.top, navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2; @@ -20,17 +19,17 @@ App({ // 可使用窗口宽度 this.globalData.windowWidth = res.windowWidth; // 底部“黑线”高度 - this.globalData.bottonLineHeight = res.windowHeight - res.safeArea.bottom; + this.globalData.bottomLineHeight = res.windowHeight - res.safeArea.bottom; }, fail(err) { console.error(err); } }) - }, - onHide: function() { - wx.setStorage({ - key: 'exist', - data: true - }) + + // 提示用户更新内容 + if(!wx.getStorageSync('noticeUpdateContent')) { + wx.setStorageSync('noticeUpdateContent', JSON.stringify(true)); + this.globalData.noticeUpdateContent = true; + } } }) diff --git a/project.config.json b/project.config.json index db4aca0..d0e7822 100644 --- a/project.config.json +++ b/project.config.json @@ -42,7 +42,7 @@ "minifyWXML": true }, "compileType": "miniprogram", - "libVersion": "2.19.3", + "libVersion": "2.19.4", "appid": "wx5bbb7bc983c50b3d", "projectname": "Self%20Discipline%20Tree%20Hole", "debugOptions": { diff --git a/src/pages/add-self-list/add-self-list.wxml b/src/pages/add-self-list/add-self-list.wxml index b320c4d..4947d67 100644 --- a/src/pages/add-self-list/add-self-list.wxml +++ b/src/pages/add-self-list/add-self-list.wxml @@ -1,7 +1,7 @@ - + - + diff --git a/src/pages/collection/collection.js b/src/pages/collection/collection.js index 9ce8786..c74a9e9 100644 --- a/src/pages/collection/collection.js +++ b/src/pages/collection/collection.js @@ -22,8 +22,8 @@ Component({ lists: [], signText: "", taskItemColor: ['#D01929', '#F0AD4D', '#CF92FF', '#BABBBA'], - iconAddTaskLeft: 300, - iconAddTaskTop: 500 + iconAddTaskRight: 50, + iconAddTaskBottom: 170 }, computed: { @@ -104,10 +104,11 @@ Component({ header: { Authorization: "Token " + token }, method: "PUT", data: { - signText: signTextSql.signText, + signText: e.detail.signText, owner: app.globalData.url + 'login/user/' + owner + '/' } - }) + }). + then(res => console.log(res)) wx.hideLoading({ success: () => { wx.showToast({ @@ -153,21 +154,6 @@ Component({ wx.navigateTo({ url: '/src/pages/editor/editor' }); - }, - // 控制新增任务 icon 的移动 - handleAddTaskMove: function(e) { - let {pageX: left, pageY: top} = e.touches[0]; - // 50 为其长宽 - this.setData({ - iconAddTaskLeft: left, - iconAddTaskTop: top - }) - }, - handleAddTaskStart: function(e) { - - }, - handleAddTaskEnd: function(e) { - }, // 跳转编辑任务 handleEditor: function(e) { @@ -420,7 +406,9 @@ Component({ navTop, windowHeight, windowWidth, - rotio: 750 / windowWidth + ratio: 750 / windowWidth, + bottomLineHeight: app.globalData.bottomLineHeight, + noticeUpdateContent: app.globalData.noticeUpdateContent }) this._saveAllDataToLocal(); console.log(this.data); @@ -435,6 +423,12 @@ Component({ }, }) }, + // 关闭更新内容通知的弹窗 + handleCloseNoticeUpdateContent: function(e) { + this.setData({ + noticeUpdateContent: false + }) + } }, /** diff --git a/src/pages/collection/collection.json b/src/pages/collection/collection.json index fee3dc1..a289d72 100644 --- a/src/pages/collection/collection.json +++ b/src/pages/collection/collection.json @@ -4,6 +4,6 @@ "navbar": "/src/components/navbar/navbar", "task-item": "/src/components/task-item/task-item", "menu": "/src/components/menu/menu", - "mp-loading": "weui-miniprogram/loading/loading" + "mp-dialog": "weui-miniprogram/dialog/dialog" } } \ No newline at end of file diff --git a/src/pages/collection/collection.wxml b/src/pages/collection/collection.wxml index c7a8273..6f56894 100644 --- a/src/pages/collection/collection.wxml +++ b/src/pages/collection/collection.wxml @@ -4,13 +4,13 @@ - - - + + 今天 @@ -58,4 +58,21 @@ - \ No newline at end of file + + + + + + + + 1.3.1 -> 1.4.0 + -新增内容更新提示功能 + -新增"收集箱"页面“创建任务”按钮拖拽的功能 + -修复 tabbar 标题栏高度过高和图标不居中的问题 + -修复个性签名不能同步到服务器的问题 + + \ No newline at end of file diff --git a/src/pages/collection/touchmove.wxs b/src/pages/collection/touchmove.wxs new file mode 100644 index 0000000..379a73d --- /dev/null +++ b/src/pages/collection/touchmove.wxs @@ -0,0 +1,87 @@ +"use strict" + +// 控制 dom 元素的拖动 +// dataset 包含设备的宽高和控制的 dom 的宽高 +var handleTouchMove = function(e) { + var left = e.touches[0].pageX; + var top = e.touches[0].pageY; + var obj = e.instance.getState(); + // 使用单例对象，减少逻辑层和视图层之间的通信 + if(!obj.windowHeightSubHalfHeight || !obj.windowWidthSubHalfWidth) { + if(!obj.windowHeight || !obj.windowWidth || !obj.height || !obj.width) { + var dom = e.instance.getDataset(); + obj.windowHeight = dom.windowHeight; + obj.windowWidth = dom.windowWidth; + obj.height = dom.height; + obj.width = dom.width; + } + obj.windowHeightSubHalfHeight = obj.windowHeight - obj.height / 2; + obj.windowWidthSubHalfWidth = obj.windowWidth - obj.width / 2; + } + e.instance.setStyle({ + 'right': obj.windowWidthSubHalfWidth - left + 'px', + 'bottom': obj.windowHeightSubHalfHeight - top + 'px' + }) + return false; +} + +// 执行 dom 元素拖拽前做的事情 +var handleTouchStart = function(e) { + // +} + +// 执行 dom 元素拖拽之后的事情 +var handleTouchEnd = function(e) { + // dom 元素拖拽结束后，将 dom 元素在一定时间内移至最短的安全区域内 + // 这里默认是屏幕右侧，且 top 和 bottom 不低于 100px， left 或 right 为 50px + var domStyle = e.instance.getBoundingClientRect(), obj = e.instance.getState(); + var left = domStyle.left, top = domStyle.top; + var leftAdd, topAdd, leftRes, topRes; + if(left > (obj.windowWidth - obj.width) / 2) { + leftRes = obj.windowWidth - 50 - obj.width; + if(left > obj.windowWidth - obj.width - 50) + leftAdd = -8; + else leftAdd = 8; + } + else { + leftRes = 50; + if(left < 50) + leftAdd = 8; + else leftAdd = -8; + } + if(top > obj.windowHeight - obj.height - 100) { + topRes = obj.windowHeight - 100 - obj.height; + topAdd = -8; + } + else if(top < 100) { + topRes = 100; + topAdd = 8; + } + else topRes = top; + var flag = false; + var render = function() { + if((leftAdd > 0 && left < leftRes) || (leftAdd < 0 && left > leftRes)) { + left += leftAdd; + flag = true; + } + if((topAdd > 0 && top < topRes) || (topAdd < 0 && top > topRes)) { + top += topAdd; + flag = true; + } + if(flag) { + e.instance.setStyle({ + left: left + 'px', + top: top + 'px' + }) + flag = false; + e.instance.requestAnimationFrame(render); + } + } + e.instance.requestAnimationFrame(render); +} + +module.exports = { + handleTouchMove: handleTouchMove, + handleTouchStart: handleTouchStart, + handleTouchEnd: handleTouchEnd +} \ No newline at end of file diff --git a/src/pages/editor/editor.wxml b/src/pages/editor/editor.wxml index 17a62c3..c817fd3 100644 --- a/src/pages/editor/editor.wxml +++ b/src/pages/editor/editor.wxml @@ -7,10 +7,10 @@ listRange：可选清单的数组，默认为：["个人清单", "工作清单"] --> - + - + diff --git a/src/pages/history/history.wxml b/src/pages/history/history.wxml index 96196ab..271cce8 100644 --- a/src/pages/history/history.wxml +++ b/src/pages/history/history.wxml @@ -1,9 +1,9 @@ - + - + diff --git a/src/pages/list/list.wxml b/src/pages/list/list.wxml index 4657b58..ad3e9af 100644 --- a/src/pages/list/list.wxml +++ b/src/pages/list/list.wxml @@ -4,10 +4,10 @@ isDelete：该清单是否可以删除 disabled：是否可以编辑 --> - + - + diff --git a/src/pages/review/review.js b/src/pages/review/review.js index d152ee7..9f8b99d 100644 --- a/src/pages/review/review.js +++ b/src/pages/review/review.js @@ -129,7 +129,7 @@ Component({ }, // 已完成任务的高度，单位：rpx contentHeight: function(data) { - return (app.globalData.windowHeight - app.globalData.navHeight - 58) * data.ratio - 166 - 142 - 30 - 40 - 20 - app.globalData.bottonLineHeight * 2; + return (app.globalData.windowHeight - app.globalData.navHeight - 58) * data.ratio - 166 - 142 - 30 - 40 - 20 - app.globalData.bottomLineHeight * 2; } }, @@ -363,6 +363,7 @@ Component({ windowHeight: app.globalData.windowHeight, windowWidth: app.globalData.windowWidth, ratio: 750 / app.globalData.windowWidth, + bottomLineHeight: app.globalData.bottomLineHeight }); } }, diff --git a/src/pages/review/review.wxml b/src/pages/review/review.wxml index 50e5805..3ce3286 100644 --- a/src/pages/review/review.wxml +++ b/src/pages/review/review.wxml @@ -10,7 +10,7 @@