| 皮一下，给自己做个打卡系统 | 您所在的位置：网站首页 › 打卡小程序怎么做 › 皮一下，给自己做个打卡系统 |
皮一下，给自己做个打卡系统
|
2018 年微信小程序开发者逐渐多了起来，微信平台也推出了很多红利，鼓励开发者参与到小程序开发中。 所以本篇文章通过一个实战项目为大家介绍一下微信小程序全栈开发流程。希望通过本篇文章你可以快速了解、入门微信小程序开发。 无论你是前端程序员或是后端开发者，你都可以从这个知识点大纲中找到感兴趣的内容。前方高能，干货满满，你准备好了吗？ 首先概览一下本文的知识点： 简单介绍微信小程序申请和开发工具小程序开发需要的技术和开发流程日历打卡小程序的项目需求（也就是要实现哪些功能）小程序端代码开发：小程序、后端开发实现（讲解开发思路和主要代码）小程序数据如何处理？可以使用缓存小程序的发布小程序全栈项目下载地址微信小程序的申请和开发工具介绍 本节目标：通过本小节的学习，希望你能够知道如何申请微信小程序，并对开发工具有一个整体的认知。 目前个人和企业都可以申请微信小程序，申请的地址和几点说明： https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN 每个身份证（或手机号）最多申请 5 个；微信小程序的名称有唯一限制，包括了公众号的名称；微信小程序类似于原生 app，可以在微信中找个小程序体验一下；目前微信平台红利发放主要在小程序，比如在微信中搜索同一个名字，搜索结果中小程序会靠前；依靠微信庞大的用户群和日活，微信小程序在整个微信生态中想象空间很大；开发文档和开发工具下载：https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=2018428开发工具简单截图介绍：  模拟器、编辑器、调试器是最常用的三个模块；每次保存文件都会自动编译，在模拟器中显示最新代码结果；预览会生成一个二维码，通过手机微信扫码实现手机预览小程序；远程调试和预览类似，只是会将日志打印在 IDE 中；上传就是将代码上传到小程序管理后台，可以设置为体验版或者提交审核发布；如果和后端服务器有交互，服务器要求域名，https 必须支持 TLS1.2，所以在开发过程中本地调试的时候，要勾选上不校验 TLS 等。小程序开发需要的技术和开发流程 本节目标：了解小程序开发需要的技术，对于不同编程语言的程序员怎么学习小程序开发；了解小程序开发的流程。 单从技术角度来讲，微信小程序的开发主要在前端。也就是说比较适合前端工程师，因为小程序的开发包括页面设计、css 样式、javascript 的编写、与后端 API 交互等。但是对于后端程序员来说学习微信小程序也是很容易上手的。为什么呢？因为小程序的框架、组件、API 的封装已经很易用了。 所以我说，只要你有一定的开发基础，就可以轻松掌握微信小程序开发了。下面我们就正式进入微信小程序开发的学习。 微信小程序的整体结构介绍，大家可以参考官方文档。我在这里通过图解的方式为大家讲解小程序开发。  上图是小程序端的开发图解，那么一个完整的小程序肯定是需要和后端交互的，这里的后端包括微信服务器的后端和开发者服务器的后端。前后端之间的交互是通过在 js 中调用 API 的方式实现的。见下图：  我们这里举了两个场景： 一个是微信小程序直接从微信服务器获取数据，比如用户的头像、昵称等；二个是如果需要保存用户的数据，那么用户就必须有一个唯一标识，openid 就是这个标识。openid 在整个小程序中是很重要的一个术语，是微信用户和小程序之间的唯一标识，每个用户对于的每个小程序的 openid 都是唯一的，所以可以将用户数据和 openid 建立唯一联系，将数据保存到数据库中。日历打卡小程序项目需求和设计 在企业项目开发过程中，一般的流程都是先确定需求，然后再进入设计、开发阶段。所以对于实战项目来讲，我们按照企业项目开发的流程来实施。 本节目标：确定日历打卡小程序的需求，并确定简单的设计和流程 既然是日历打卡小程序，我们可以简单分析一下，正常需求哪些功能呢？ 简单日历功能；包括星期、上个月、下个月翻页；对于日历时间段要分为 今天、今天之前的日期、今天之后的日期；实现签到功能。签到就是将年 - 月 - 日的数据保存到数据库；如果某天已经签到了，需要在日历上体现出来；如果小程序没有后端开发，可以将签到的数据暂存在微信缓存中，实现单机版的功能，但是真正上线的产品必须保持到数据库中；后端接口实现 openid 的获取，从而可以保证将签到数据保存到数据库中；所以这里需要 3 个应用接口：1）获取 openid； 2）保存签到数据；3）获取签到数据综上需求所述，我们的设计大概如下： 前端：在小程序中我们设计一个 view，实现日历的展示；后端：建一个 java web 项目实现与微信服务器通信（openid 获取）和对数据库的操作；需要调用的接口包括：wx.login、后端获取 openid 接口、微信小程序与后端交互接口：签到数据获取、实现签到、获取 openid小程序 UI 设计图如下：
小程序代码开发 本节我们详细讲解一下小程序实现的前后端代码。因为代码量比较大，所以我们只讲解主要实现部分。 本节目标：了解小程序结构、后端代码的结构、功能代码流程。希望你可以跟随实现讲解思路，更深刻的了解小程序的开发过程，并且可以将源代码运行起来。  小程序代码实现  小程序的实现最重要的是日历的实现。当日历实现之后，我们将已经签到了日期和日历上的日期进行比对，如果日期已经签到，那么给一个特定的样式即可实现已签到展示功能。  我们来讲解一下微信小程序启动页面 - 加载数据 - 页面渲染展示的流程； 当 index.wxml 启动的时候，先加载 onload 函数；我们在 onload 中调用了 app.js 中的获取用户 openid 的函数，此函数会调用后台应用（java web 项目）获取到用户 openid；因为 openid 时时刻刻都会用到，所以我们保存在全局变量 globalData 中用户 openid 获取之后，就可以加载此用户的签到数据了；依然需要调用后台应用，从数据库中获取 year-month 对应的签到日期；数据获取完成之后，调用 Calendar.js 中的初始化日历的函数，实现日历数据的准备；将数据绑定到 data 中，完成了页面的展示；签到功能，参考 index.js 中的 doSign 函数，代码和数据获取类似，都是 wx.reqeust 请求为了不打扰大家学习的思路，这里将主要的代码贴出来，== 完整的代码大家可以从附件中下载。== index.js /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //先获取openid，openid会被保存在全局变量globalData中 app.jscode2session(res=>{ var nowDate = new Date();//当前日期 this.initCalendar(nowDate);//加载日历 }); }, /** * 初始化日历， * signDates ： 已经签到的日期，一般在月份切换的时候从后台获取日期， * 然后在获取日历数据时，进行数据比对处理； * */ initCalendar: function (paramDate, signDates) { //从服务器端获取signDates var paramMonth = paramDate.getMonth(); if (paramMonth + 1 > 12){//后台保存的月份数据是 1-12 paramMonth = 1; }else{ paramMonth += 1; } var paramYear = paramDate.getFullYear(); wx.request({ url: app.HTTP_SERVER + 'xcx/rest/getSignDates.htm', data: { openid: app.globalData.openid, year: paramYear, month: paramMonth }, header: { 'content-type': 'application/json' // 默认值 }, success: res => { //后台返回的日期 var signDates = res.data; //当前年月日 var now = new Date();//当前时间 var nowMonth = now.getMonth(); var nowYear = now.getFullYear(); var showSign = false;//是否显示签到按钮 if (nowMonth === paramDate.getMonth() && nowYear === paramDate.getFullYear()) { showSign = true; } //未来签到日期设置为空 if (nowMonth < paramDate.getMonth() && nowYear |
【本文地址】