2018 年微信小程序开发者逐渐多了起来,微信平台也推出了很多红利,鼓励开发者参与到小程序开发中。
所以本篇文章通过一个实战项目为大家介绍一下微信小程序全栈开发流程。希望通过本篇文章你可以快速了解、入门微信小程序开发。
无论你是前端程序员或是后端开发者,你都可以从这个知识点大纲中找到感兴趣的内容。前方高能,干货满满,你准备好了吗?
首先概览一下本文的知识点:
微信小程序的申请和开发工具介绍
本节目标:通过本小节的学习,希望你能够知道如何申请微信小程序,并对开发工具有一个整体的认知。
目前个人和企业都可以申请微信小程序,申请的地址和几点说明:
https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN
开发工具简单截图介绍:
小程序开发需要的技术和开发流程
本节目标:了解小程序开发需要的技术,对于不同编程语言的程序员怎么学习小程序开发;了解小程序开发的流程。
单从技术角度来讲,微信小程序的开发主要在前端。也就是说比较适合前端工程师,因为小程序的开发包括页面设计、css 样式、javascript 的编写、与后端 API 交互等。但是对于后端程序员来说学习微信小程序也是很容易上手的。为什么呢?因为小程序的框架、组件、API 的封装已经很易用了。
所以我说,只要你有一定的开发基础,就可以轻松掌握微信小程序开发了。下面我们就正式进入微信小程序开发的学习。
微信小程序的整体结构介绍,大家可以参考官方文档。我在这里通过图解的方式为大家讲解小程序开发。
上图是小程序端的开发图解,那么一个完整的小程序肯定是需要和后端交互的,这里的后端包括微信服务器的后端和开发者服务器的后端。前后端之间的交互是通过在 js 中调用 API 的方式实现的。见下图:
我们这里举了两个场景:
日历打卡小程序项目需求和设计
在企业项目开发过程中,一般的流程都是先确定需求,然后再进入设计、开发阶段。所以对于实战项目来讲,我们按照企业项目开发的流程来实施。
本节目标:确定日历打卡小程序的需求,并确定简单的设计和流程
既然是日历打卡小程序,我们可以简单分析一下,正常需求哪些功能呢?
综上需求所述,我们的设计大概如下:
小程序代码开发
本节我们详细讲解一下小程序实现的前后端代码。因为代码量比较大,所以我们只讲解主要实现部分。
本节目标:了解小程序结构、后端代码的结构、功能代码流程。希望你可以跟随实现讲解思路,更深刻的了解小程序的开发过程,并且可以将源代码运行起来。
小程序代码实现
小程序的实现最重要的是日历的实现。当日历实现之后,我们将已经签到了日期和日历上的日期进行比对,如果日期已经签到,那么给一个特定的样式即可实现已签到展示功能。
我们来讲解一下微信小程序启动页面 - 加载数据 - 页面渲染展示的流程;
为了不打扰大家学习的思路,这里将主要的代码贴出来,== 完整的代码大家可以从附件中下载。==
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();
}
}
源码的运行
本节目标:学会运行代码! 如果你是前端程序员,可能需要先了解一下后端项目的相关软件安装、配置和运行。
不用后台怎么实现单机版小程序
本节目标:使用微信缓存实现单机版小程序
如果大家没有后台的话,数据可以存在本地缓存中,只不过这样的话数据会丢失。怎么实现呢?这里简单提供思路。
小程序发布
本节目标:了解小程序发布,避免发布遇到的坑
如果你的小程序开发完成了,就可以发布了。
小程序的发布过程很简单:
附件下载
附件下载地址:
https://download.csdn.net/download/quasimodo_es/10388914