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

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

/**
   * 生命周期函数--监听页面加载
   */
  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 获取、签到数据获取、实现签到功能。(源码大家可以从附件中下载)

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

原文发布于微信公众号 - GitChat精品课(CSDN_Tech)

原文发表时间:2018-05-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 开发者

像奥利奥一样的双重安全措施,尽在 Android Oreo

22630
来自专栏Java3y

图书管理系统【总结】

感想 该项目是目前为止,我写过代码量最多的项目了.....虽然清楚是没有含金量的【跟着视频来写的】,但感觉自己也在进步中...... 写的过程中,出了不少的问题...

40550
来自专栏刘望舒

Android 模块化之路 模块间通信

50520
来自专栏铭毅天下

Elasticsearch全文检索实战小结——复盘我带的第二个项目

一、项目概述 这是一个被我称之为“没有枪、没有炮,硬着头皮自己造”的项目。项目是和其它公司合作的三个核心模块开发。 使用ES的目的是: 1)、采集数据、网站...

46490
来自专栏编程

三种主流Web架构

往期精选 做WEB好几年了,各种语言和技术都稍有涉猎。今天心血来潮,突然想总结一下。其实不论什么技术,什么需求,通常WEB开发就是通过WEB前端管理一个或大或小...

73970
来自专栏Java社区

前后端数据对接的思考及总结

76730
来自专栏AI2ML人工智能to机器学习

Shiny: R语言来建立开源交互式数据分析微服务的神器

先来说个应用场景: 假设你需要快速Prototype一个数据分析的服务, 而且需要给业务客户一定的自由度来理解数据分析的强大, 例如更换数据, 更换分析手段。 ...

24330
来自专栏Golang语言社区

go语言项目优化(经验之谈)

我的课题主要分为以下三章,斗鱼在GO的应用场景,GO在业务中如何优化,我们在GO中踩过了哪些坑。

24930
来自专栏FreeBuf

Umap2 | 开源USB host安全评估工具

Umap2是一款由NCC Group和Cisco SAS小组开发的、基于python的USB host安全评估工具。 它拥有第一版所支持的所有功能: umap2...

21850
来自专栏owent

libcopp(v2) vs goroutine性能测试

本来是没想写这个对比。无奈之前和call_in_stack的作者聊了一阵,发现了一些libcopp的改进空间。然后顺便看了新的boost.context的cc部...

10910

扫码关注云+社区

领取腾讯云代金券