Skip to content

Commit

Permalink
-1.4.0
Browse files Browse the repository at this point in the history
  • Loading branch information
QlQlqiqi committed Sep 12, 2021
1 parent 7433eb6 commit 166f515
Show file tree
Hide file tree
Showing 13 changed files with 178 additions and 59 deletions.
49 changes: 35 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
### 微信小程序——自律树洞

#### 1.0.0
#### -1.0.0

##### 第一个 0 - 1 的项目

Expand All @@ -14,7 +14,7 @@

- **前后端数据交互时机和内容要合理。**

比如:目前我选择了较为笨拙的方式,即:在 tabbar 页面触发 onshow 的时候与将全部数据保存在本地,每隔 30s 将当前数据同步到后端。
比如:目前我选择了较为笨拙的方式,即:在 tab-bar 页面触发 onShow 的时候与将全部数据保存在本地,每隔 30s 将当前数据同步到后端。
*待以后有更好的办法再来优化*

- **修复左侧弹出菜单在特定情况下(页面滑动到底部)显示位置会偏移**
Expand All @@ -27,37 +27,58 @@

问题:

无论如何实现,当页面高度随着内容数量增多时,页面会上下滑动,当滑动到顶部或者底部时,
<munu> 会相应的显示位置过高或过低。
无论如何实现,当页面高度随着内容数量增多时,页面会上下滑动,当滑动到顶部或者底部时,<munu> 会相应的显示位置过高或过低。

解决:

为页面内容增加一个 <view-scroll> ,设置高度为 100% ,这样保证内容可以上下滑动且页面是不会上下滑动的,
然后在 <menu> 内部增加 <view-scroll> ,设置高度 height 的原则是不会引起页面上下滑动,保证 <menu>
可以上下滑动的同时位置又相对屏幕固定。
为页面内容增加一个 <view-scroll> ,设置高度为 100% ,这样保证内容可以上下滑动且页面是不会上下滑动的,然后在 <menu> 内部增加 <view-scroll> ,设置高度 height 的原则是不会引起页面上下滑动,保证 <menu> 可以上下滑动的同时位置又相对屏幕固定。

##### 设计前想好页面架构、页面间数据通信方式、前后端交互方式和时机,页面设计不能只依靠 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 的优先级。
```
- -新增向用户提示更新内容的功能
- -修复个性签名不能同步到服务器的问题
### 小结
总的来说,此次项目较为简单,但是还有的地方没有处理好(左侧栏在特定情况下位置会偏移),作为上手的第一个项目较为合适。
15 changes: 7 additions & 8 deletions app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
})
2 changes: 1 addition & 1 deletion project.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"minifyWXML": true
},
"compileType": "miniprogram",
"libVersion": "2.19.3",
"libVersion": "2.19.4",
"appid": "wx5bbb7bc983c50b3d",
"projectname": "Self%20Discipline%20Tree%20Hole",
"debugOptions": {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/add-self-list/add-self-list.wxml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<view style="position: relative; height: {{ navHeight * 2 }}rpx;"></view>
<view style="position: relative; height: {{ navHeight }}px;"></view>
<!-- 导航栏 -->
<navbar page-name="添加清单">
<image slot="backIcon" src="/src/image/back.png" catch:tap="handleBack" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image>
<image slot="backIcon" src="/src/image/back.png" catch:tap="handleBack" mode="aspectFit" style="width: 24px; height: 24px;"></image>
</navbar>
<!-- 选择图标 -->
<view style="position: relative; margin: 200rpx 75rpx 0 75rpx;">
Expand Down
34 changes: 14 additions & 20 deletions src/pages/collection/collection.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ Component({
lists: [],
signText: "",
taskItemColor: ['#D01929', '#F0AD4D', '#CF92FF', '#BABBBA'],
iconAddTaskLeft: 300,
iconAddTaskTop: 500
iconAddTaskRight: 50,
iconAddTaskBottom: 170
},

computed: {
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -435,6 +423,12 @@ Component({
},
})
},
// 关闭更新内容通知的弹窗
handleCloseNoticeUpdateContent: function(e) {
this.setData({
noticeUpdateContent: false
})
}
},

/**
Expand Down
2 changes: 1 addition & 1 deletion src/pages/collection/collection.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
27 changes: 22 additions & 5 deletions src/pages/collection/collection.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<image slot="backIcon" src="/src/image/navbar-menu.svg" bind:tap="handleShowMenu" mode="aspectFit" style="width: 24px; height: 24px;"></image>
</navbar>
<!-- 背景遮掩 -->
<view wx:if="{{ showMenu }}" class="menu-mask" style="height: {{ windowHeight * rotio }}rpx; top: {{ -navHeight }}px; z-index: 1;"
<view wx:if="{{ showMenu }}" class="menu-mask" style="height: {{ windowHeight * ratio }}rpx; top: {{ -navHeight }}px; z-index: 1;"
bind:tap="handleCloseMask" catch:touchmove="catchTouchMove"
></view>
<!-- 左侧菜单 -->
<view wx:if="{{ showMenu }}" style="position: relative; height: 0; top: {{ -navHeight }}px;">
<menu style="position: relative; width: 600rpx;"
menuHeight="{{ windowHeight * rotio }}" menuBottomBlcakHeight="{{ 180 }}"
menuHeight="{{ windowHeight * ratio }}" menuBottomBlcakHeight="{{ 180 + bottomLineHeight * ratio }}"
show="{{ showMenu }}" lists="{{ listsShow }}" todoListNum="{{ todayTasks.length }}" signText="{{ signText }}"
catch:handleNavigateToAddList="handleNavigateToAddList"
catch:handleNavigateToToday="handleNavigateToToday" catch:handleNavigateToFuture="handleNavigateToFuture"
Expand All @@ -20,8 +20,8 @@
></menu>
</view>

<view style="position: relative; height: {{ (windowHeight - navHeight) * rotio }}rpx; overflow-y: scroll;">
<view style="padding-bottom: {{250 * rotio}}rpx;">
<view style="position: relative; height: {{ (windowHeight - navHeight) * ratio }}rpx; overflow-y: scroll;">
<view style="padding-bottom: {{250 * ratio}}rpx;">
<!-- 今天的任务清单 -->
<view class="collection-task-title">
<text>今天</text>
Expand Down Expand Up @@ -58,4 +58,21 @@
</view>

<!-- 新增任务 -->
<image src="/src/image/add-task.png" style="left: {{iconAddTaskLeft * 2}}rpx; top: {{iconAddTaskTop * 2}}rpx;" catch:tap="handleAddTask" catch:touchmove="handleAddTaskMove" capture-catch:touchstart="" mode="aspectFit" class="collection-add-icon"></image>
<wxs module="touchmove" src="./touchmove.wxs"></wxs>
<image id="some" data-window-width="{{windowWidth}}" data-window-height="{{windowHeight}}" data-width="{{50}}" data-height="{{50}}"
src="/src/image/add-task.png" style="right: {{ iconAddTaskRight }}px; bottom: {{ iconAddTaskBottom }}px;" catch:tap="handleAddTask"
catch:touchmove="{{ touchmove.handleTouchMove }}" mode="aspectFit" class="collection-add-icon"
catch:touchend="{{ touchmove.handleTouchEnd }}"
></image>


<!-- 用于告知用户更新的内容 -->
<mp-dialog title="更新内容" show="{{ noticeUpdateContent }}" mask="{{ true }}" mask-closable="{{ true }}" buttons="{{ [{text: '确定'}] }}" catch:buttontap="handleCloseNoticeUpdateContent">
<view style="text-align: left;">
<view style="text-align: center;">1.3.1 -> 1.4.0</view>
<view>-新增内容更新提示功能</view>
<view>-新增"收集箱"页面“创建任务”按钮拖拽的功能</view>
<view>-修复 tabbar 标题栏高度过高和图标不居中的问题</view>
<view>-修复个性签名不能同步到服务器的问题</view>
</view>
</mp-dialog>
87 changes: 87 additions & 0 deletions src/pages/collection/touchmove.wxs
Original file line number Diff line number Diff line change
@@ -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
}
4 changes: 2 additions & 2 deletions src/pages/editor/editor.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
listRange:可选清单的数组,默认为:["个人清单", "工作清单"]
-->

<view style="position: relative; height: {{ navHeight * 2 }}rpx;"></view>
<view style="position: relative; height: {{ navHeight }}px;"></view>
<!-- 导航栏 -->
<navbar page-name="编辑代办">
<image slot="backIcon" src="/src/image/back.png" bind:tap="handleBack" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image>
<image slot="backIcon" src="/src/image/back.png" bind:tap="handleBack" mode="aspectFit" style="width: 24px; height: 24px;"></image>
</navbar>
<view style="position: relative;"></view>

Expand Down
4 changes: 2 additions & 2 deletions src/pages/history/history.wxml
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!--
接收一个 tasks 数组,包含所有任务
-->
<view style="position: relative; height: {{ navHeight * 2 }}rpx;"></view>
<view style="position: relative; height: {{ navHeight }}px;"></view>
<navbar page-name="历史">
<image slot="backIcon" src="/src/image/back.png" bind:tap="handleBack" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image>
<image slot="backIcon" src="/src/image/back.png" bind:tap="handleBack" mode="aspectFit" style="width: 24px; height: 24px;"></image>
</navbar>


Expand Down
4 changes: 2 additions & 2 deletions src/pages/list/list.wxml
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
isDelete:该清单是否可以删除
disabled:是否可以编辑
-->
<view style="position: relative; height: {{ navHeight * 2 }}rpx;"></view>
<view style="position: relative; height: {{ navHeight }}px;"></view>
<!-- 导航栏 -->
<navbar page-name="{{ pageName }}">
<image slot="backIcon" src="/src/image/back.png" catch:tap="handleBack" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image>
<image slot="backIcon" src="/src/image/back.png" catch:tap="handleBack" mode="aspectFit" style="width: 24px; height: 24px;"></image>
</navbar>

<view style="position: relative;">
Expand Down
Loading

0 comments on commit 166f515

Please sign in to comment.