微信小程序云开发项目-个人待办事项-04【我的】模块开发
上一篇:
微信小程序云开发项目-个人待办事项-03【主页】模块开发
https://blog.csdn.net/IndexMan/article/details/124538576
模块开发步骤
本篇介绍我的
模块功能开发和代码展示,仅展示部分源码,详细项目代码请联系我获取
。
个人信息展示
界面代码
<view class="user-card">
<view class="user-card__info">
<view class="user-card__head">
<open-data type="userAvatarUrl"></open-data>
</view>
<view class="user-card__name">
<open-data type="userNickName"></open-data>
</view>
</view>
<view class="user-card__links">
<view class="user-card__linkItem" bindtap="linkToTodos">
<label class="user-card__linkLabel">进行中</label>
<text class="user-card__linkValue">{{ todosUncompletedCount }}</text>
</view>
<view class="user-card__linkItem" bindtap="linkToTodos">
<label class="user-card__linkLabel">已完成</label>
<text class="user-card__linkValue">{{ todosCompletedCount }}</text>
</view>
</view>
</view>
JS代码
// 获取用户信息
this.data.userInfo = Object.assign({
avatarUrl: '../../images/icon-user.png',
nickName: '未知用户'
}, app.globalData.userInfo)
任务完成率
界面代码
<view class="charts-card">
<text class="charts-card__header">任务完成率</text>
<canvas class="charts-card__body" canvas-id="chartsA"></canvas>
</view>
JS代码
async syncData () {
this.setData({
openid: wx.getStorageSync('openid') || await app.getOpenId()
})
// 获取统计数据
this.data.todosCount = await this.getTodosCount()
this.data.todosCompletedCount = await this.getTodosCompletedCount()
this.data.todosUncompletedCount = await this.getTodosUnCompletedCount()
// update
this.update()
},
update(data) {
data = data || this.data
this.setData(data)
this.updateChartsA()
//this.updateChartsB()
},
updateChartsA: function () {
ringChart && ringChart.updateData({
title: {
name: [Math.round((this.data.todosCompletedCount / this.data.todosCount) * 100), '%'].join('')
},
series: [{
name: '进行中',
data: this.data.todosUncompletedCount,
stroke: false
}, {
name: '已完成',
data: this.data.todosCompletedCount,
stroke: false
}]
})
},
微信小程序云开发项目-个人待办事项-04【我的】模块开发的更多相关文章
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...
- 微信小程序-云开发-实战项目
微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- “我要点爆”微信小程序云开发实例
使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...
- 微信小程序云开发-从0打造云音乐全栈小程序
第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
- 微信小程序云开发不完全指北
微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
- 微信小程序云开发如何上手
简要介绍 微信小程序云开发,是基于 Serverless 的一站式后端云服务,涵盖函数.数据库.存储.CDN等服务,免后端运维.基于云开发可以免鉴权调用微信所有开放能力. 前提准备 微信开发者工具 创 ...
- 微信小程序云开发,快速生成短信验证码
使用微信小程序云函数实现注册短信验证码的管理,并不是一件分分钟的事,目前想要存储验证码只能放到数据库中,因为存储后才能和用户提交上来的验证码做比较. 管理验证码主要涉及到:生成.存储.校验.有效期管理 ...
- 技本功丨收藏!斜杠青年与你共探微信小程序云开发(下篇)
2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...
- 微信小程序-云开发(手记)
微信小程序-云开发(手记) 1.创建data.json文件 注意以下几点要求: 入门示例: init方法的env:默认环境配置,传入字符串形式的环境 ID(理解为数据库)可以指定所有服务的默认环境(意 ...
随机推荐
- java - 数组降序输出
package array; import java.util.Arrays; /** * 降序 */ public class Reverse { public static void main(S ...
- [转帖]如何通过JMeter测试金仓数据库KingbaseES并搭建环境
1.安装JMeter Apache JMeter是Apache组织开发的基于Java的压力测试工具,主要用于对软件的压力测试,它最初被设计用于Web应用测试,但后来扩展到其它测试领域.它可测试静态.动 ...
- [转帖]Springboot配置kafka用户名密码
华为云开发者联盟 Springboot配置kafka用户名密码 Springboot配置kafka用户名密码 SpringBoot配置kafka用户名密码 Springboot配置kafka用户名密码 ...
- [转帖]将 Cloudflare 连接到互联网的代理——Pingora 的构建方式
https://zhuanlan.zhihu.com/p/575228941 简介 今天,我们很高兴有机会在此介绍 Pingora,这是我们使用 Rust 在内部构建的新 HTTP 代理,它每天处理超 ...
- [转帖]原创经典:SQLSERVER SendStringParametersAsUnicode引发的疑案 推荐
https://developer.aliyun.com/article/429563 简介: 上周五碰到开发的请求协助解决数据预定程序中对单头等几个表检索数据时检索条件尾数是9的数据特别慢.第一时间 ...
- [转帖]【k8s】1、基础概念和架构及组件
文章目录 一.kubernetes概述 1.什么是kubernetes? 2.应用程序部署方式的演变 3.为什么要用kubernetes? 二.kubernetes 特性 三.Kubernetes集群 ...
- jconsole的简单学习
摘要 jconsole 是JDK自带的一款图形化监测工具 他可以监测本地程序,也可以检测远程的机器 在没有其他监控手段可以使用的情况下可以快速进行必要的监测 使用方法也比较简单. 本地监控 jcons ...
- 如何处理开发环境没有问题,线上环境有问题这个bug
解决思路 首先确认开发环境有没有这个问题: 如果没有这个问题: 将你的地址切换为线上的环境,看看线上环境有没有这个问题: 如果切换为线上环境有这个问题,就可以调试了: 如果切换为线上环境没有这个问题, ...
- Linux线程API使用与分析
线程是操作系统进程调度器可调度的最小粒度的执行单元 执行ps -eLF查看线程 UID PID PPID LWP C NLWP SZ RSS PSR STIME TTY TIME CMD root 1 ...
- yum 安装失败解决思路$releasever(curl#6 - "Could not resolve host: mirrorlist.centos.org; Unknown error")
问题 公司使用刀片机的系统版本是CentOS 7.9.2009(Core),本人在重新安装虚拟机时,也使用对应的系统版本,在安装软件时,yum无法正常使用,一开始觉得,centos的release版本 ...