前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >皮一下,给自己做个打卡系统

皮一下,给自己做个打卡系统

作者头像
CSDN技术头条
发布2018-07-30 11:00:54
3.6K0
发布2018-07-30 11:00:54
举报
文章被收录于专栏:CSDN技术头条

2018 年微信小程序开发者逐渐多了起来,微信平台也推出了很多红利,鼓励开发者参与到小程序开发中。

所以本篇文章通过一个实战项目为大家介绍一下微信小程序全栈开发流程。希望通过本篇文章你可以快速了解、入门微信小程序开发。

无论你是前端程序员或是后端开发者,你都可以从这个知识点大纲中找到感兴趣的内容。前方高能,干货满满,你准备好了吗?

首先概览一下本文的知识点:

  1. 简单介绍微信小程序申请和开发工具
  2. 小程序开发需要的技术和开发流程
  3. 日历打卡小程序的项目需求(也就是要实现哪些功能)
  4. 小程序端代码开发:小程序、后端开发实现(讲解开发思路和主要代码)
  5. 小程序数据如何处理?可以使用缓存
  6. 小程序的发布
  7. 小程序全栈项目下载地址

微信小程序的申请和开发工具介绍

本节目标:通过本小节的学习,希望你能够知道如何申请微信小程序,并对开发工具有一个整体的认知。

目前个人和企业都可以申请微信小程序,申请的地址和几点说明:

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN

  1. 每个身份证(或手机号)最多申请 5 个;
  2. 微信小程序的名称有唯一限制,包括了公众号的名称;
  3. 微信小程序类似于原生 app,可以在微信中找个小程序体验一下;
  4. 目前微信平台红利发放主要在小程序,比如在微信中搜索同一个名字,搜索结果中小程序会靠前;
  5. 依靠微信庞大的用户群和日活,微信小程序在整个微信生态中想象空间很大;
  6. 开发文档和开发工具下载:https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=2018428

开发工具简单截图介绍:

  1. 模拟器、编辑器、调试器是最常用的三个模块;
  2. 每次保存文件都会自动编译,在模拟器中显示最新代码结果;预览会生成一个二维码,通过手机微信扫码实现手机预览小程序;远程调试和预览类似,只是会将日志打印在 IDE 中;
  3. 上传就是将代码上传到小程序管理后台,可以设置为体验版或者提交审核发布;
  4. 如果和后端服务器有交互,服务器要求域名,https 必须支持 TLS1.2,所以在开发过程中本地调试的时候,要勾选上不校验 TLS 等。

小程序开发需要的技术和开发流程

本节目标:了解小程序开发需要的技术,对于不同编程语言的程序员怎么学习小程序开发;了解小程序开发的流程。

单从技术角度来讲,微信小程序的开发主要在前端。也就是说比较适合前端工程师,因为小程序的开发包括页面设计、css 样式、javascript 的编写、与后端 API 交互等。但是对于后端程序员来说学习微信小程序也是很容易上手的。为什么呢?因为小程序的框架、组件、API 的封装已经很易用了。

所以我说,只要你有一定的开发基础,就可以轻松掌握微信小程序开发了。下面我们就正式进入微信小程序开发的学习。

微信小程序的整体结构介绍,大家可以参考官方文档。我在这里通过图解的方式为大家讲解小程序开发。

上图是小程序端的开发图解,那么一个完整的小程序肯定是需要和后端交互的,这里的后端包括微信服务器的后端和开发者服务器的后端。前后端之间的交互是通过在 js 中调用 API 的方式实现的。见下图:

我们这里举了两个场景:

  • 一个是微信小程序直接从微信服务器获取数据,比如用户的头像、昵称等;
  • 二个是如果需要保存用户的数据,那么用户就必须有一个唯一标识,openid 就是这个标识。openid 在整个小程序中是很重要的一个术语,是微信用户和小程序之间的唯一标识,每个用户对于的每个小程序的 openid 都是唯一的,所以可以将用户数据和 openid 建立唯一联系,将数据保存到数据库中。

日历打卡小程序项目需求和设计

在企业项目开发过程中,一般的流程都是先确定需求,然后再进入设计、开发阶段。所以对于实战项目来讲,我们按照企业项目开发的流程来实施。

本节目标:确定日历打卡小程序的需求,并确定简单的设计和流程

既然是日历打卡小程序,我们可以简单分析一下,正常需求哪些功能呢?

  1. 简单日历功能;包括星期、上个月、下个月翻页;
  2. 对于日历时间段要分为 今天、今天之前的日期、今天之后的日期;
  3. 实现签到功能。签到就是将年 - 月 - 日的数据保存到数据库;
  4. 如果某天已经签到了,需要在日历上体现出来;
  5. 如果小程序没有后端开发,可以将签到的数据暂存在微信缓存中,实现单机版的功能,但是真正上线的产品必须保持到数据库中;
  6. 后端接口实现 openid 的获取,从而可以保证将签到数据保存到数据库中;所以这里需要 3 个应用接口:1)获取 openid; 2)保存签到数据;3)获取签到数据

综上需求所述,我们的设计大概如下:

  1. 前端:在小程序中我们设计一个 view,实现日历的展示;
  2. 后端:建一个 java web 项目实现与微信服务器通信(openid 获取)和对数据库的操作;
  3. 需要调用的接口包括:wx.login、后端获取 openid 接口、微信小程序与后端交互接口:签到数据获取、实现签到、获取 openid
  4. 小程序 UI 设计图如下:

小程序代码开发

本节我们详细讲解一下小程序实现的前后端代码。因为代码量比较大,所以我们只讲解主要实现部分。

本节目标:了解小程序结构、后端代码的结构、功能代码流程。希望你可以跟随实现讲解思路,更深刻的了解小程序的开发过程,并且可以将源代码运行起来。

小程序代码实现

小程序的实现最重要的是日历的实现。当日历实现之后,我们将已经签到了日期和日历上的日期进行比对,如果日期已经签到,那么给一个特定的样式即可实现已签到展示功能。

我们来讲解一下微信小程序启动页面 - 加载数据 - 页面渲染展示的流程;

  1. 当 index.wxml 启动的时候,先加载 onload 函数;
  2. 我们在 onload 中调用了 app.js 中的获取用户 openid 的函数,此函数会调用后台应用(java web 项目)获取到用户 openid;因为 openid 时时刻刻都会用到,所以我们保存在全局变量 globalData 中
  3. 用户 openid 获取之后,就可以加载此用户的签到数据了;
  4. 依然需要调用后台应用,从数据库中获取 year-month 对应的签到日期;
  5. 数据获取完成之后,调用 Calendar.js 中的初始化日历的函数,实现日历数据的准备;
  6. 将数据绑定到 data 中,完成了页面的展示;
  7. 签到功能,参考 index.js 中的 doSign 函数,代码和数据获取类似,都是 wx.reqeust 请求

为了不打扰大家学习的思路,这里将主要的代码贴出来,== 完整的代码大家可以从附件中下载。==

index.js

代码语言:javascript
复制
/**
   * 生命周期函数--监听页面加载
   */
  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 <= paramDate.getFullYear()) {
          signDates = [];
        }        //星期
        var days = ["日", "一", "二", "三", "四", "五", "六"];        //签到日历数据的生成
        var calendars = Calendar.getSignCalendar(paramDate, signDates);        this.setData({          signDates: signDates,          year: paramDate.getFullYear(),          month: paramDate.getMonth() + 1,          calendars: calendars,          days: days,          preMonth: "<",   //大于、小于号不可以直接写在wxml中
          nextMonth: ">",          showSign: showSign
        });
      },      fail: function (res) {        console.log(res);
      }
    });
  },

后端应用 CalendarMvc 项目的实现

项目的构建:SpringMVC + Mybatis + MySql

后端的项目是 java 开发的,如果大家喜欢用 python、php、node 等,基本上是类似的。对于后端项目功能相对简单,主要给大家讲解开发流程。

WxApi.java 中封装了请求微信服务器的接口,具体详细内容可以参考微信开发文档。我们这里不做细述了。

对于后端项目,如果细讲的话,内容太多,所以这里简单的贴出来 Controller 中的几个方法,分别实现了:openid 获取、签到数据获取、实现签到功能。(源码大家可以从附件中下载)

代码语言:javascript
复制
package com.spring.mvc.xcx;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONArray;import net.sf.json.JSONException;import net.sf.json.JSONObject;import org.apache.commons.collections.CollectionUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.spring.mvc.xcx.dao.UserSignDate;import com.spring.mvc.xcx.dao.UserSignDateDao;import com.spring.mvc.xcx.util.CalendarUtil;/**
 * 这是小程序-小诗词的rest请求
 */@Controller@RequestMapping("/xcx/rest")public class RestController {    // dao 的注入
    @Autowired
    private UserSignDateDao userSignDateDao;    @RequestMapping("/getOpenid")    @ResponseBody
    public String getOpenid(String jscode){        //微信小程序id
        String appId = "wxb85f9dadsc8d37c6cd";  
        //微信小程序Secret
        String appSecret = "b9cae0487dsdsb1e57a5e7ebae37dec78bc5";        //获取请求的url
        String url  = WxApi.getJsCodeSessionUrl(appId, appSecret, jscode);
        JSONObject jsonObject = WxApi.httpsRequest(url, "GET", null);        //获取openid
        String openid = "";        if (null != jsonObject && !jsonObject.containsKey("errcode")) {            try {
                openid = jsonObject.getString("openid");
            } catch (JSONException e) {
            }
        }        return openid;
    }    //获取签到数据
    @RequestMapping("/getSignDates")    @ResponseBody
    public String getSignDates(String openid, Integer year, Integer month){
        UserSignDate queryEntity = new UserSignDate();
        queryEntity.setOpenid(openid);//设置用户的openid
        queryEntity.setYear(year);//设置年
        queryEntity.setMonth(month);//设置月
        //获取已经签到的数据
        List<UserSignDate> list = userSignDateDao.queryAll(queryEntity);        //将日期返回
        List<Integer> days = new ArrayList<Integer>();        if(CollectionUtils.isNotEmpty(list)){            for(UserSignDate item : list){
                days.add(item.getDay());
            }
        }        return JSONArray.fromObject(days).toString();
    }    //实现签到
    @RequestMapping("/doSign")    @ResponseBody
    public String doSign(String openid){
        UserSignDate entity = new UserSignDate();
        entity.setOpenid(openid);
        entity.setYear(CalendarUtil.getYear());
        entity.setMonth(CalendarUtil.getMonth());
        entity.setDay(CalendarUtil.getDate());        //先判断是否已经签过到
        List<UserSignDate> list = userSignDateDao.queryAll(entity);        if(CollectionUtils.isNotEmpty(list)){            //已经签过到,不做任何处理
        }else{
            userSignDateDao.create(entity);//加入今日签到数据
        }        return new JSONObject().toString();
    }

}

源码的运行

本节目标:学会运行代码! 如果你是前端程序员,可能需要先了解一下后端项目的相关软件安装、配置和运行。

  1. 小程序:直接导入到微信开发 IDE 中,在 project.config.json 中 修改 appid 运行即可;
  2. 执行 CalendarMvc/doc 中的 sql,创建表;修改 jdbc.properties,改成你的数据库连接;
  3. 安装配置 Eclipse 开发工具,配置 JDK、tomcat,然后导入项目发布到 Tomcat 中即可;
  4. 如果你的 Tomcat 端口号或者项目名称不一样,请修改 app.js 中 HTTP_SERVER 的值;
  5. 小程序开发 IDE 中,必须勾选 “不校验 HTTPS、TLS、安全域名等”。

不用后台怎么实现单机版小程序

本节目标:使用微信缓存实现单机版小程序

如果大家没有后台的话,数据可以存在本地缓存中,只不过这样的话数据会丢失。怎么实现呢?这里简单提供思路。

  1. 因为存本地缓存,所以并不需要 openid,所以 index.js 中不需要调用 jscode2session
  2. 存储 / 获取签到数据的时候,可以用 wx.setStorage 和 wx.getStorage 来实现
  3. 缓存中的数据结构要包含 年 - 月 - 日,这样才能根据年 - 月查询出已经签到的日期,从而实现数据的展示。

小程序发布

本节目标:了解小程序发布,避免发布遇到的坑

如果你的小程序开发完成了,就可以发布了。

小程序的发布过程很简单:

  1. 在 IDE 中上传代码
  2. 在小程序管理后台提交代码审核
  3. 在管理后台填写开发域名。注意:域名、服务器一定要满足微信小程序的要求,https、TLS12 等
  4. 在手机上运行的时候,如果域名不支持 https 等要求,可以打开调试模式进行调试;
  5. 一切配置完成即可发布了

附件下载

附件下载地址:

https://download.csdn.net/download/quasimodo_es/10388914

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-05-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 GitChat精品课 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档