project init

pages/foot-tab/foot-tab.js

@@ -0,0 +1,57 @@
+// pages/component/foot-tab.js
+let aIconList = ['check-rectangle','star','notification','circle'];
+let cure = 1
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        clickValue: {
+            type: Array,
+            value: aIconList
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        clickValue: cure,
+        message: {dot: true}
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        setIconData(cur){
+            cure = cur;
+            this.setData({
+                clickValue: cur
+            })
+            if (cur == 1){
+                wx.redirectTo({
+                    url: '../index/index'
+                })
+            }
+            if (cur == 2){
+                wx.redirectTo({
+                    url: '../today/index'
+                })
+            }
+            if (cur == 3){
+                wx.redirectTo({
+                    url: '../message/index'
+                })
+            }
+            if (cur == 4){
+                wx.redirectTo({
+                    url: '../myself/index'
+                })
+            }
+        },
+        onChange(event) {
+            this.setIconData(event.detail.value);
+        },
+    }
+})

pages/foot-tab/foot-tab.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "t-tab-bar": "/components/tab-bar/tab-bar",
+        "t-tab-bar-item": "/components/tab-bar/tab-bar-item"
+    }
+}

pages/foot-tab/foot-tab.wxml

@@ -0,0 +1,7 @@
+<!--pages/component/foot-tab.wxml-->
+<t-tab-bar value="{{clickValue}}" bindchange="onChange">
+  <t-tab-bar-item badge-props="{{ {count: 12} }}" value="1" icon="{{iconList[0]}}">清单</t-tab-bar-item>
+  <t-tab-bar-item badge-props="{{message}}" value="2" icon="{{iconList[1]}}">今日任务</t-tab-bar-item>
+  <t-tab-bar-item value="3" icon="{{iconList[2]}}">消息</t-tab-bar-item>
+  <t-tab-bar-item value="4" icon="{{iconList[3]}}">我的</t-tab-bar-item>
+</t-tab-bar>

pages/foot-tab/foot-tab.wxss

@@ -0,0 +1 @@
+/* pages/component/foot-tab.wxss */

pages/index/index.js

@@ -0,0 +1,48 @@
+// index.js
+// 获取应用实例
+const app = getApp()
+Page({
+  data: {
+    aIconList: ['check-rectangle-filled','star','notification','circle'],
+    motto: 'Hello World',
+    userInfo: {},
+    hasUserInfo: false,
+    canIUse: wx.canIUse('button.open-type.getUserInfo'),
+    canIUseGetUserProfile: false,
+    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
+  },
+  // 事件处理函数
+  bindViewTap() {
+    wx.navigateTo({
+      url: '../logs/logs'
+    })
+  },
+  onLoad() {
+    if (wx.getUserProfile) {
+      this.setData({
+        canIUseGetUserProfile: true
+      })
+    }
+  },
+  getUserProfile(e) {
+    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    wx.getUserProfile({
+      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+      success: (res) => {
+        console.log(res)
+        this.setData({
+          userInfo: res.userInfo,
+          hasUserInfo: true
+        })
+      }
+    })
+  },
+  getUserInfo(e) {
+    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
+    console.log(e)
+    this.setData({
+      userInfo: e.detail.userInfo,
+      hasUserInfo: true
+    })
+  }
+})

pages/index/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+      "foot-tab": "../foot-tab/foot-tab"
+    }
+}

pages/index/index.wxml

@@ -0,0 +1,26 @@
+<!--index.wxml-->
+<view class="container">
+  <view class="userinfo">
+    <block wx:if="{{canIUseOpenData}}">
+      <view class="userinfo-avatar" bindtap="bindViewTap">
+        <open-data type="userAvatarUrl"></open-data>
+      </view>
+      <open-data type="userNickName"></open-data>
+    </block>
+    <block wx:elif="{{!hasUserInfo}}">
+      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
+      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
+      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
+    </block>
+    <block wx:else>
+      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+    </block>
+  </view>
+  <view class="usermotto">
+    <text class="user-motto">{{motto}}</text>
+  </view>
+  <view>
+    <foot-tab iconList="{{aIconList}}"/>
+  </view>
+</view>

pages/index/index.wxss

@@ -0,0 +1,19 @@
+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}

pages/logs/logs.js

@@ -0,0 +1,18 @@
+// logs.js
+const util = require('../../utils/util.js')
+
+Page({
+  data: {
+    logs: []
+  },
+  onLoad() {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map(log => {
+        return {
+          date: util.formatTime(new Date(log)),
+          timeStamp: log
+        }
+      })
+    })
+  }
+})

pages/logs/logs.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "查看启动日志",
+  "usingComponents": {}
+}

pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log.date}}</text>
+  </block>
+</view>

pages/logs/logs.wxss

@@ -0,0 +1,8 @@
+.log-list {
+  display: flex;
+  flex-direction: column;
+  padding: 40rpx;
+}
+.log-item {
+  margin: 10rpx;
+}

pages/message/index.js

@@ -0,0 +1,66 @@
+// pages/message/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        aIconList: ['check-rectangle','star','notification-filled','circle'],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/message/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "foot-tab": "../foot-tab/foot-tab"
+    }
+}

pages/message/index.wxml

@@ -0,0 +1,5 @@
+<!--pages/message/index.wxml-->
+<text>您有新的消息</text>
+<view>
+    <foot-tab iconList="{{aIconList}}"/>
+</view>

pages/message/index.wxss

@@ -0,0 +1 @@
+/* pages/message/index.wxss */

pages/myself/index.js

@@ -0,0 +1,66 @@
+// pages/myself/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        aIconList: ['check-rectangle','star','notification','info-circle-filled'],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/myself/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "foot-tab": "../foot-tab/foot-tab"
+    }
+}

pages/myself/index.wxml

@@ -0,0 +1,5 @@
+<!--pages/myself/index.wxml-->
+<text>关于我的</text>
+<view>
+    <foot-tab iconList="{{aIconList}}"/>
+</view>

pages/myself/index.wxss

@@ -0,0 +1 @@
+/* pages/myself/index.wxss */

pages/today/index.js

@@ -0,0 +1,66 @@
+// pages/today/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        aIconList: ['check-rectangle','star-filled','notification','info-circle'],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/today/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "foot-tab": "../foot-tab/foot-tab"
+    }
+}

pages/today/index.wxml

@@ -0,0 +1,5 @@
+<!--pages/today/index.wxml-->
+<text>今日任务</text>
+<view>
+    <foot-tab iconList="{{aIconList}}"/>
+</view>

pages/today/index.wxss

@@ -0,0 +1 @@
+/* pages/today/index.wxss */