正式版1.0.0

.gitignore

@@ -0,0 +1,14 @@
+# Windows
+[Dd]esktop.ini
+Thumbs.db
+$RECYCLE.BIN/
+
+# macOS
+.DS_Store
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+
+# Node.js
+node_modules/

LICENSE

@@ -2,6 +2,8 @@ MIT License
 
 Copyright (c) 2021 QlQl
 
+NO USE!!!
+
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
@@ -19,3 +21,6 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+
+

README.md

@@ -1 +1,39 @@
-# self-discipline-tree-hole
+### 微信小程序——自律树洞
+
+### version 1.0.0
+
+### 第一个 0 - 1 的项目
+
+- **起初和后端尽量把字段确认好，并尽量给未来需要的字段留出空间。**
+
+比如：目前“个性签名”字段为一个 String ，未来可能需要增加“修改日期”的功能，则个性签名字段应为一个 Object ，这样在扩展字段的时候直接增加属性即可。
+
+- **布局要合理**。
+
+比如：即使页面简单，也不要过度依赖 absolute 进行布局，因为它会增大后续的扩展难度，尽量使用 flex 或 grid 布局。
+
+- **前后端数据交互时机和内容要合理。**
+
+比如：目前我选择了最笨拙的方式，即：在 tabbar 页面触发 onshow 的时候与后端进行数据交互，并且交互内容为全部数据。
+这就导致前后端交互量极大，且不合理。*这是因为第一次进行前后端交互，不知道具体如何交互，所以起初设计的时候没有考虑周全。*
+
+- **修复左侧弹出菜单在特定情况下(页面滑动到底部)显示位置会偏移**
+
+需求：
+
+    点击 navbar 上菜单 icon ，从左侧弹出菜单，位置相对屏幕固定，可以上下滑动。
+
+问题： 
+
+    无论如何实现，当页面高度随着内容数量增多时，页面会上下滑动，当滑动到顶部或者底部时，<munu> 会相应的显示位置**过高或过低**。
+
+解决：
+
+    为页面内容增加一个 <view-scroll> ，设置高度为 100% ，这样保证内容可以上下滑动且页面是不会上下滑动的，然后在 <menu> 内部
+    增加 <view-scroll> ，设置高度 height 的原则是不会引起页面上下滑动，保证 <menu> 可以上下滑动的同时位置又相对屏幕固定。
+
+#### 设计前想好页面架构、页面间数据通信方式、前后端交互方式和时机，页面设计不能只依靠 absolute。
+
+### 小结
+
+总的来说，此次项目较为简单，但是还有的地方没有处理好（左侧栏在特定情况下位置会偏移），作为上手的第一个项目较为合适。

app.js

@@ -0,0 +1,139 @@
+const util = require('./src/utils/util');
+App({
+  globalData: {
+    checkUrl: 'https://witime.wizzstudio.com/check/',
+    url: 'https://witime.wizzstudio.com/',
+    success: 0
+  },
+  onLaunch() {
+    // success 用于判断数据是否请求完成
+    let  _this = this;
+    util.login(_this.globalData.url + 'login/login/')
+    .then(res => {
+      // console.log(res)
+      let token = res.data.token;
+      let owner = res.data.user_id;
+      let lists = [];
+      let tasks = [];
+      let signText = '';
+      // 先请求 lists
+      util.myRequest({
+        url: _this.globalData.checkUrl + 'taglist/?owner=' + JSON.stringify(owner),
+        header: { token: token },
+        method: "GET"
+      }).then(function(res) {
+        res.data.forEach(function(item) {
+          let list = {
+            title: item.tag,
+            icon: item.icon,
+            url: item.url
+          }
+          lists.push(list);
+        });
+        if(!lists.length)
+          lists = [
+            { title: "个人清单", icon: "/src/image/menu-self-list0.svg" },
+            { title: "工作清单", icon: "/src/image/menu-self-list1.svg" }
+          ]
+        wx.setStorageSync('lists', JSON.stringify(lists));
+        _this.globalData.success++;
+        // console.log(lists)
+      })
+      // 再请求 tasks
+      .then(function() {
+        util.myRequest({
+          url: _this.globalData.checkUrl + 'check/?owner=' + JSON.stringify(owner),
+          header: { token: token },
+          method: "GET"
+        }).then(function(res) {
+          // 将请求到的 res.data 中数据转化为本地数据 tasks ，并保存在本地
+          res.data.forEach(item => {
+            // 根据 c_time 和 e_date 得到 remind
+            let div = (new Date(item.e_time).getTime() - new Date(item.c_time).getTime()) / 1000;
+            let remind = [0, 60, 300, 600, 1800, 3600].indexOf(div);
+            // 根据 lists 得到该 item 的 list
+            let list = {};
+            for(let tmpList of lists) {
+              if(tmpList.url === item.tag) {
+                list.title = tmpList.title;
+                list.icon = tmpList.icon;
+                break;
+              }
+            }
+            let task = {
+              id: util.getUniqueId(),
+              priority: item.priority,
+              repeat: item.repeat,
+              date: item.e_time,
+              remind: remind,
+              finish: item.finish === 0? false: true,
+              finishDate: item.fin_date || item.e_time,
+              content: item.text,	
+              desc: item.todo_desc === "default"? "": item.todo_desc,
+              list: list,
+              delete: item.todo_delete === 0? false: true,
+              rating: item.star,
+              feeling: item.star_text === "default"? "": item.star_text,
+              url: item.url
+            };
+            tasks.push(task);
+          });
+          wx.setStorageSync('tasks', JSON.stringify(tasks));
+          // console.log(tasks)
+          _this.globalData.success++;
+        });
+      })
+      // 请求 signText
+      util.myRequest({
+        url: _this.globalData.checkUrl + 'sign/?owner=' + JSON.stringify(owner),
+        header: { token: token },
+        method: "GET",
+      }).then(function(res) {
+        if(!res.data.length) {
+          signText = "好好学习 天天向上";
+          util.myRequest({
+            url: _this.globalData.checkUrl + 'sign/?owner=' + JSON.stringify(owner),
+            header: { Authorization: "Token " + token },
+            method: "POST",
+            data: {
+              signText: signText,
+              owner: _this.globalData.url + 'login/user/' + owner + '/'
+            }
+          }).then(res => wx.setStorage({key: 'signTextUrl', data: JSON.stringify(res.data.url)}))
+        }
+        else signText = res.data[0].signText;
+        wx.setStorageSync('signText', JSON.stringify(signText));
+        _this.globalData.success++;
+        // console.log(signText)
+      })
+      wx.setStorageSync('token', JSON.stringify(token));
+      wx.setStorageSync('owner', JSON.stringify(owner));
+      wx.setStorageSync('uniqueId', JSON.stringify(10000));
+      // console.log(JSON.parse(wx.getStorageSync('successListNum') || JSON.stringify({})))
+      // console.log(JSON.parse(wx.getStorageSync('tmp') || JSON.stringify({})))
+    });
+
+    // 获取自定义导航栏信息
+    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;
+        // 导航栏高度
+        this.globalData.navHeight = navHeight;
+        // 导航栏距离顶部距离
+        this.globalData.navTop = navTop;
+        // 可使用窗口高度
+        this.globalData.windowHeight = res.windowHeight;
+        // 可使用窗口宽度
+        this.globalData.windowWidth = res.windowWidth;
+        console.log(this.globalData)
+      },
+      fail(err) {
+        console.error(err);
+      }
+    })
+  }
+})

app.json

@@ -0,0 +1,40 @@
+{
+	"pages": [
+		"src/pages/collection/collection",
+		"src/pages/history/history",
+		"src/components/evaluate/evaluate",
+		"src/components/menu/menu",
+		"src/pages/editor/editor",
+		"src/pages/review/review",
+		"src/pages/add-self-list/add-self-list",
+		"src/pages/list/list"
+	],
+	"tabBar": {
+		"custom": true,
+		"color": "#888",
+		"selectedColor": "#66BA69",
+		"borderStyle": "black",
+		"backgroundColor": "#fff",
+		"list": [
+			{
+				"pagePath": "src/pages/collection/collection",
+				"iconPath": "src/image/tabbar-collection-unselected.png",
+				"selectedIconPath": "src/image/tabbar-collection.png",
+				"text": "收集箱"
+			},
+			{
+				"pagePath": "src/pages/review/review",
+				"iconPath": "src/image/tabbar-review-unselected.png",
+				"selectedIconPath": "src/image/tabbar-review.png",
+				"text": "回顾"
+			}
+		]
+	},
+	"window": {
+		"navigationBarBackgroundColor": "#ffffff",
+		"navigationBarTextStyle": "black",
+		"navigationStyle": "custom",
+		"backgroundColorTop": "#fff"
+	},
+	"sitemapLocation": "sitemap.json"
+}

app.wxss

@@ -0,0 +1,18 @@
+/* tabbar 样式 */
+@import "./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss";
+/* icon 样式 */
+@import "./src/styles/remixicon.wxss";
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 
+
+page {
+  background-color: rgba(242, 242, 242, 0.81);
+}

custom-tab-bar/index.js

@@ -0,0 +1,32 @@
+const app = getApp();
+Component({
+  data: {
+    selected: 0,
+    color: "#888",
+    selectedColor: "#4B844D",
+    list: [{
+      pagePath: "/src/pages/collection/collection",
+      iconPath: "/src/image/tabbar-collection-unselected.png",
+      selectedIconPath: "/src/image/tabbar-collection.png",
+      text: "收集箱"
+    }, {
+      pagePath: "/src/pages/review/review",
+      iconPath: "/src/image/tabbar-review-unselected.png",
+      selectedIconPath: "/src/image/tabbar-review.png",
+      text: "回顾"
+    }]
+  },
+  attached() {
+  },
+  methods: {
+    switchTab(e) {
+      // 切换 tabbar 页面
+      const data = e.currentTarget.dataset;
+      const url = data.path;
+      wx.switchTab({url})
+      this.setData({
+        selected: data.index
+      });
+    }
+  }
+})

custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

custom-tab-bar/index.wxml

@@ -0,0 +1,6 @@
+<cover-view class="tab-bar">
+  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{ selected === index? 'tabbar-selected': 'tabbar-unselected' }}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
+    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+  </cover-view>
+</cover-view>

custom-tab-bar/index.wxss

@@ -0,0 +1,42 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 96rpx;
+  background: white;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-border {
+  background-color: black;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2500rpx;
+  height: 2rpx;
+  transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab-bar-item cover-image {
+  width: 54rpx;
+  height: 54rpx;
+}
+
+.tab-bar-item cover-view {
+  font-size: 20rpx;
+}
+
+.tabbar-selected {
+  background-color: #fff;
+}