hzuapps#2 hzuapps#18 第二次实验代码

1514080901238/app.js

@@ -1,39 +1 @@
-//app.js
-App({
-  onLaunch: function () {
-    // 展示本地存储能力
-    var logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
-
-    // 登录
-    wx.login({
-      success: res => {
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      }
-    })
-    // 获取用户信息
-    wx.getSetting({
-      success: res => {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
-          wx.getUserInfo({
-            success: res => {
-              // 可以将 res 发送给后台解码出 unionId
-              this.globalData.userInfo = res.userInfo
-
-              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-              // 所以此处加入 callback 以防止这种情况
-              if (this.userInfoReadyCallback) {
-                this.userInfoReadyCallback(res)
-              }
-            }
-          })
-        }
-      }
-    })
-  },
-  globalData: {
-    userInfo: null
-  }
-})
+//app.js

1514080901238/app.json

@@ -1,12 +1,44 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/todo/todo",
+    "pages/done/done"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle":"black"
-  }
-}
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#1992F5",
+    "navigationBarTitleText": "任务清单",
+    "navigationBarTextStyle": "white"
+  },
+  "tabBar": {
+    "color": "#dddddd",
+    "selectedColor": "#1992F5",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "image/tasks.png",
+        "selectedIconPath": "image/tasksHL.png",
+        "text": "任务清单"
+      },
+      {
+        "pagePath": "pages/todo/todo",
+        "iconPath": "image/tasksUndone.png",
+        "selectedIconPath": "image/tasksUndoneHL.png",
+        "text": "未完成的"
+      },
+      {
+        "pagePath": "pages/done/done",
+        "iconPath": "image/tasksDone.png",
+        "selectedIconPath": "image/tasksDoneHL.png",
+        "text": "已完成的"
+      }
+    ]
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "downloadFiel": 10000
+  },
+  "debug": false
+}

1514080901238/app.wxss

@@ -1,10 +1,152 @@
 /**app.wxss**/
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
-} 
+@import 'style/weui.wxss';
+.page {
+    min-height: 100%;
+    background-color: #f8f8f8;
+    font-size: 14px;
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+    overflow: hidden;
+    line-height: 1.5em;
+}
+
+.section{
+    margin: 15px 0;
+}
+
+.btn-area{
+    padding: 0 15px;
+}
+
+.page wx-input{
+    background: #fff;
+    padding: 10px 15px;
+}
+
+/* todo-list */
+
+.lists{
+    background-color: #FFFFFF;
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
+}
+
+.lists:before{
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px solid #D9D9D9;
+    color: #D9D9D9;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+}
+
+.lists:after{
+    content: " ";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 1px;
+    border-bottom: 1px solid #D9D9D9;
+    color: #D9D9D9;
+    -webkit-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+}
+
+.head{
+    padding: 10px 15px;
+    color: #1992F5;
+}
+
+.task-li{
+    /*padding: 10px 15px;*/
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.task-li-con{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    flex: 1;
+    padding: 10px 0 10px 15px;
+    align-items: center;
+}
+
+.task-li:before{
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px solid #D9D9D9;
+    color: #D9D9D9;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+    left: 15px;
+}
+
+.task-li:first-child:before{
+    display: none;
+}
+
+.task-li .content{
+    flex: 1;
+}
+
+.icon-done{
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #fff;
+    margin-right: 8px;
+}
+
+.done .content{
+    color: #999;
+    text-decoration: line-through;
+}
+
+.done .icon-done{
+    border: 6px solid #ddd;
+}
+
+.un-done .icon-done{
+    border: 6px solid #1992F5;
+}
+
+.task-li-remove{
+    padding: 15px 15px 15px 5px;
+}
+
+.icon-remove{
+    /*padding: 0 5px;*/
+    text-align: right;
+    color: #fff;
+    font-size: 12px;
+    background: #d3e8f9;
+    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    border-radius: 50%;
+
+}

1514080901238/pages/index/index.js

@@ -1,54 +1,74 @@
-//index.js
-//获取应用实例
-const app = getApp()
-
-Page({
-  data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
-  },
-  //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-  onLoad: function () {
-    if (app.globalData.userInfo) {
-      this.setData({
-        userInfo: app.globalData.userInfo,
-        hasUserInfo: true
-      })
-    } else if (this.data.canIUse){
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-      // 所以此处加入 callback 以防止这种情况
-      app.userInfoReadyCallback = res => {
+const pageData = {
+    data: {
+        taskList: [],
+        task: '',
+        tipsHidden: true
+    },
+
+    onShow: function () {
+        this.setData({
+            taskList: wx.getStorageSync('taskList') || []
+        });
+    },
+
+    bindTask: function (e) {
         this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
+            task: e.detail.value
+        });
+    },
+
+    toCreate: function () {
+        let taskList = this.data.taskList;
+        if (this.data.task.trim().length < 1) {
+            this.toShowTips();
+        } else {
+            taskList.unshift({
+                id: Date.now(),
+                text: this.data.task,
+                done: false
+            });
+            this.setData({
+                task: '',
+                taskList: taskList
+            });
+            wx.setStorageSync('taskList', taskList);
         }
-      })
+
+    },
+
+    toggleDone: function (e) {
+        let id = e.currentTarget.id;
+        let modify = this.data.taskList.map((item) => {
+            return item.id == id ? Object.assign({}, item, { done: !item.done }) : item;
+        });
+        this.setData({
+            'taskList': modify
+        });
+        wx.setStorageSync('taskList', modify);
+    },
+
+    toRemove: function (e) {
+        let id = e.currentTarget.id;
+        let modify = this.data.taskList.filter((item) => {
+            return item.id != id;
+        });
+        this.setData({
+            'taskList': modify
+        });
+        wx.setStorageSync('taskList', modify);
+    },
+
+    toHideTips: function () {
+        this.setData({
+            tipsHidden: true
+        });
+    },
+
+    toShowTips: function () {
+        this.setData({
+            tipsHidden: false
+        });
     }
-  },
-  getUserInfo: function(e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-  }
-})
+};
+
+Page(pageData);