『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题


『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
介绍一个可运行的微信小程序登录+支付的demo 。 接触了小程序简易教程的 , 想必都知道我们必然有自己的后台应用服务器 , 来处理我们自己的业务逻辑、请求微信服务完成一定的功能 。 在此 , 我们的后台采用java环境 , 本文将首先介绍环境搭建的过程 , 随后介绍登录+支付的流程及代码 。
一、后台web服务环境搭建
1. 安装jdk、tomcat , ICP备案的域名准备 。
Linux安装jdk:https://blog.csdn.net/zhang918784312/article/details/79751283
Linux 安装tomcat:https://www.cnblogs.com/EasonJim/p/7202844.html
经过icp备案的域名 , 请自行准备 。
2.配置https , 由于小程序请求url必须是https , 故而必须配置支持https请求 。 本人采用的是在阿里云购买的域名 , 故而采用的证书也是阿里云生成的ssl证书 , 可参考如下两篇博文进行配置 。 当然 , 你也可以通过别的方式生成证书 , 更或者通过nginx作反向代理到你的服务器 。
https://blog.csdn.net/qq_28189091/article/details/75078164
https://blog.csdn.net/z_xuewen/article/details/78176509
同时 , 务必将您的小程序域名绑定在小程序后端 。 登入小程序后台 , 【设置】-【开发设置】-【服务器域名】

  1. 部署web服务
如上两步完成后 , 请务必确认通过你的域名(https://...)可以展示tomcat的默认页之后 , 开始部署我们的web服务 。 在此 , 就简单粗暴的在webapps下建立小程序的根目录 , 我命名为wechatserver , 在此目录下 , 创建WEB-INFO , 下面的目录结构如下:
『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
classes存放自己写的类的classes文件 , lib存放我们项目依赖的jar包 , logs用于存放我们的日志输出 , web.xml是我们这个项目的配置 。 demo中 , 我们只有一个servlet接收小程序前端请求 , web.xml中增加配置如下:
『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
4. log4j 应用在开发调试中 , 我们免不了需要通过打印日志进行调试 , 因此在此增加了日志的使用 。 web.xml中增加配置:
『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
在classes增加文件 , log4j.properties , 内容如下:
『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
log4j 在java中的引用、使用:public static Logger logger = Logger.getLogger(WechatServlet.class);logger.info(“打印信息”);
二、微信小程序登录+支付 1. 小程序前端目录准备 基于微信小程序工具生成的默认hello world程序 , pages下先建立目录order , 随后在order目录生成一个新的page , 命名为order , 结构如下图:
『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
image
在index中增加按钮 , 进入order 。 index.wxml
『微信』大神教你搞定微信小程序登录+支付Demo实战(环境搭建+源码)问题
本文插图
order.xml中描述商品信息 , 增加支付按钮 , order.js 支付事件处理 。
2. 登录+支付 code
流程大概分为几步:
1)登录 , 获取code(一个code只能用一次)
2)通过code获取openid(通过请求服务器 , 由服务器请求微信获取并返回小程序) 。 微信登录+获取openid接口 。