微信小程序任何的语言都可以做后台，现在微信小程序推出云函数，做后台也可以。但是自己感觉想要完整的后台，做后台用java和php更好点。下面以典型的例证给大家做一下讲解，注册。
1、wmxl
微信小程序的前段代码（提交数据主要以from表单实现的）
<view class="btn-submit">
<button formType="reset">请完善注册信息</button>
</view>
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="input-list">
<view class="input-item">
<text class="input-item-label">姓名</text>
<view class="input-item-content">
<input type="text" name="name" auto-focus placeholder="请输入您的姓名" bindinput="inputName"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">性别</text>
<picker class="input-item-content" bindchange="bindPickerChange" data-pickername="industry" value="{{industryindex}}" range="{{industryarr}}" mode="selector">{{industryarr[industryindex]}}
</picker>
</view>
<view class="input-item">
<text class="input-item-label">账号</text>
<view class="input-item-content">
<input type="idcard" name="tel" placeholder="请输入您的手机号码" maxlength="11" bindinput="inputPhone"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">登录密码</text>
<view class="input-item-content">
<input type="password" name="password" auto-focus placeholder="请设置登录密码" bindinput="inputName"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">邮箱</text>
<view class="input-item-content">
<input type="text" name="email" auto-focus placeholder="请输入您的邮箱" bindinput="inputName"></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">注册vip</text>
<picker class="input-item-content" bindchange="bindPickerChange" data-pickername="status" value="{{statusindex}}" range="{{statusarr}}" mode="selector">{{statusarr[statusindex]}}
</picker>
</view>
</view>
<view class="btn-submit">
<button type="primary" formType="submit">提交</button>
<button formType="reset">置空</button>
</view>
</form>
2、wxss
/**app.wxss**/
/**app.wxss**/
page{
height: 100%;
color: #333;
display: flex;
flex-direction: column;
font: normal 30rpx/1.68 -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.container-body{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.container-footer{
width: 100%;
display: flex;
height: 88rpx;
border-top: 1rpx solid #ddd;
background: #fff;
}
.container-footer text{
flex: 1;
display: block;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-size: 34rpx;
border-left: 1rpx solid #ddd;
}
.container-footer text:first-child{
border-left: none;
}
.container-footer .btn-block{
border-radius: 0;
}
.container-footer .btn-block:after{
border: none;
}
.container-gray{
background: #f9f9f9;
}
input{
height: 60rpx;
line-height: 60rpx;
font-family: inherit;
}
.input-list{
padding: 0 20rpx;
margin: 20rpx 0;
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.input-list .input-item{
padding: 20rpx;
line-height: 2;
display: flex;
font-size: 30rpx;
border-top: 1rpx solid #e8e8e8;
}
.input-list .input-item:first-child{
border-top: 0;
}
.input-item-label{
display: block;
width: 5em;
color: #666;
}
.input-item-content{
color: #333;
flex:1;
}
.input-item.input-item-full{
display: block;
}
.input-item.input-item-full .input-item-label{
width: 100%;
}
.input-item.input-item-full .input-item-content{
width: 100%;
}
.input-item.input-item-full textarea{
padding: 0;
height: 150rpx;
border: 1rpx solid #e8e8e8;
padding: 10rpx;
}
.input-item.input-item-full .img-upload{
padding: 0;
}
.input-item.input-item-adaption .input-item-label{
width: auto;
margin-right: 20rpx;
}
button{
font-size: 32rpx;
line-height: 72rpx;
}
textarea{
width: 100%;
padding: 20rpx;
box-sizing: border-box;
}
radio-group radio{
position:absolute;
left: -999em;
}
radio-group label{
margin-right: 16rpx;
}
radio-group label:before{
content: '';
display: inline-block;
width: 40rpx;
height: 40rpx;
vertical-align: -8rpx;
margin-right: 4rpx;
}
.btn-submit{
padding: 20rpx;
}
.btn-block{
width: 100%;
line-height: 88rpx;
}
.btn-orange{
background: #f7982a;
color: #fff;
}
.btn-gray{
background: #e8e8e8;
color: #333;
}
.search-flex{
display: flex;
padding: 20rpx;
border-bottom: 1rpx solid #ddd;
position: relative;
z-index: 13;
background: #f9f9f9;
/* transform: translateY(-100%); */
margin-top: 0;
transition: all 0.3s;
}
.search-flex.tophide{
margin-top: -117rpx;
}
.search-flex button{
background: #f7982a;
color: #fff;
line-height: 72rpx;
height: 72rpx;
font-size: 30rpx;
border-radius: 6rpx;
}
.search-bar{
flex: 1;
display: flex;
border: 1rpx solid #e8e8e8;
border-radius: 6rpx;
}
.search-bar input{
flex: 1;
height: 72rpx;
line-height: 72rpx;
padding: 0 10rpx;
background: #fff;
}
.search-extra-btn{
margin-left: 20rpx;
white-space: nowrap;
}
.filter-tab{
display: flex;
width: 100%;
line-height: 80rpx;
border-bottom: 1rpx solid #ddd;
position: relative;
z-index: 2;
background: #fff;
}
.filter-tab text{
flex: 1;
text-align: center;
}
.filter-tab text:after{
content: '';
display: inline-block;
vertical-align: 4rpx;
width: 0;
height: 0;
border-left: 12rpx solid transparent;
border-right: 12rpx solid transparent;
border-top: 12rpx solid #bbb;
margin-left: 8rpx;
}
.filter-tab text.active{
color: #f7982a;
}
.filter-tab:not(.sort-tab) text.active:after{
border-top: 0;
border-bottom: 12rpx solid #f7982a;
}
.filter-tab.sort-tab text.active:after{
border-top: 12rpx solid #f7982a;
}
.filter-panel{
display: flex;
background: #f5f5f5;
position: absolute;
width: 100%;
z-index: 13;
overflow: hidden;
}
.filter-panel-left,.filter-panel-right{
flex: 1;
line-height: 80rpx;
text-align: center;
max-height: 480rpx;
overflow-y: auto;
}
.filter-panel-left .active{
background: #fff;
}
.filter-panel-right .active{
color: #f7982a;
}
.filter-panel-right{
background: #fff;
}
.filter-panel-right:empty{
display: none;
}
.filter-shadow{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: 1;
background: rgba(0,0,0,.5);
}
.gototop{
width: 70rpx;
height: 70rpx;
position: fixed;
bottom: 20rpx;
right: 20rpx;
transition: all 0.3s;
opacity: 0;
transform: translateY(200rpx);
}
.gototop.active{
opacity: 1;
transform: translateY(0);
}
.group{
display: block;
width: 100%;
}
.group-header{
line-height: 70rpx;
display: flex;
padding: 0 20rpx;
background: #f9f9f9;
}
.group-body{
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
}
.group-body .input-list{
margin: 0;
border: none;
}
.img-upload{
padding: 20rpx;
font-size: 0;
overflow: hidden;
}
.img-upload .img-item,
.img-upload .img-add{
width: 100rpx;
height: 100rpx;
float: left;
margin: 10rpx;
border: 1rpx solid transparent;
}
.img-upload .img-add{
border: 1rpx dashed #ddd;
}
.img-upload .img-item image{
width: 100rpx;
height: 100rpx;
}
.img-upload .img-item{
position: relative;
}
.img-upload .img-item icon{
position: absolute;
right: -12rpx;
top: -12rpx;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
3、js
js是重点，他是一个中间桥梁，获取微信小程序前端的数值和传导ssm的后台。
wx.request这是微信的接口，也就是发起请求。
url: ‘http://localhost:8080/lg/wechat/add’,这就是你的项目的地址，也就是controller。
dada就是你要传到后台的数据。
wx.request({
url: 'http://localhost:8080/lg/wechat/add',
data: {
openid: openid,
userpassword: userpassword,
name: name,
sex: app.sex,
tel: tel,
email: email,
vip: app.vip,
},
接下来是完整的js代码（获取表单的数据，这里的js包括获取openid，如果你使用，直接删除就可以）
Page({
data: {
industryarr: [],
industryindex: 0,
statusarr: [],
statusindex: 0,
jobarr: [],
jobindex: 0,
},
onLoad: function () {
this.fetchData()
},
fetchData: function () {
this.setData({
industryarr: ["请选择","男", "女"],
statusarr: ["是否注册vip会员","是", "否"],
})
},
// bindPickerChange1: function (e){
// var sex = e.detail.value;
// console.log(sex)
// if(sex==1){
// var app=getApp()
// app.sex='男'
// }else{
// var app = getApp()
// app.sex = '女'
// }
// },
// bindPickerChange2: function (e) {
// var vip = e.detail.value;
// console.log(vip)
// if(vip==1){
// var app=getApp()
// app.vip='是'
// }else{
// var app = getApp()
// app.vip = '否'
// }
// },
bindPickerChange: function (e) { //下拉选择
const eindex = e.detail.value;
//onsole.log(industryarr[e.detail.value])
const name = e.currentTarget.dataset.pickername;
console.log(name)
// this.setData(Object.assign({},this.data,{name:eindex}))
switch (name) {
case 'industry':
var app=getApp()
app.sex = this.data.industryarr[eindex]
console.log(app.sex)
this.setData({
industryindex: eindex
})
case 'status':
var app = getApp()
app.vip = this.data.statusarr[eindex]
console.log(app.vip)
this.setData({
statusindex: eindex
})
break;
case 'job':
this.setData({
jobindex: eindex
})
break;
default:
return
}
},
formSubmit(e) {
var name = e.detail.value.name;
var tel = e.detail.value.tel;
var email = e.detail.value.email;
var userpassword = e.detail.value.password;
console.log('form发生了submit事件，携带数据为：', name, tel, email)
wx.login({
success: function (res) {
var code1 = res.code
var app = getApp()
var appid1 = app.globalData.appid
var secret1 = app.globalData.secret
console.log('获取的code', code1, appid1, secret1)
var ul = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid1 + '&secret=' + secret1 + '&js_code=' + code1 + '&grant_type=authorization_code'
wx.request({
url: ul,
method: 'GET',
success: function (e) {
var openid = e.data.openid
console.log('获取登录身份的唯一openid', openid)
// wx.setStorageSync('openid', openid)
//wx.setStorageSync('name', name)
wx.request({
url: 'http://localhost:8080/lg/wechat/add',
data: {
openid: openid,
userpassword: userpassword,
name: name,
sex: app.sex,
tel: tel,
email: email,
vip: app.vip,
},
//method:'POST',
success: function (res) {
const mess=res.data
if (res.data){
console.log("fhgdshxcbxcbxcbcxbxcbxcfj")
wx.showToast({
title: '注册成功',
icon:'success',
})
}else{
wx.showModal({
title: '温馨提示',
content: '您已注册过，请不要重复注册',
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: '../../pages/login/login',
})
} else if (res.cancel) {
wx.navigateTo({
url: '../../pages/hotel/hotel'
})
}
}
})
}
}
})
}
})
}
})
},
})
4ssm的后端实现
因为小程序的数据格式都是json格式，所以我们的ssm后台也必须是就json的格式，Java要实现json的格式，需要对应的jar包，打下自行下载。
package org.lg.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.lg.entity.user;
import org.lg.entity.wcuser;
import org.lg.service.roomlistService;
import org.lg.service.roomtypesService;
import org.lg.service.wcuserService;
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.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.fasterxml.jackson.databind.util.JSONPObject;
import net.sf.json.JSON;
import net.sf.json.JSONObject;
@Controller
@RequestMapping("wechat")
public class wechatController {
@Autowired
public wcuserService wcservice;
@Autowired
public roomlistService roomlistservice;
@Autowired
public roomtypesService roomtypesservice;
//用户注册
@RequestMapping("add")
@ResponseBody
public JSONObject adduser(@RequestParam("openid") String openid,@RequestParam("name") String name,@RequestParam("sex") String sex,@RequestParam("tel") String tel,
@RequestParam("email") String email,@RequestParam("vip") String vip,HttpServletRequest request,
HttpServletResponse response,@RequestParam("userpassword") String userpassword) {
System.out.println(openid+name+sex+tel+email+vip);
Map<String, String> map = new HashMap<String, String>();
if(openid!=null) {
//判断openid在注册的列表中是否存在
wcuser queryopenid = wcservice.queryopenid(openid);
//String openid2 = queryopenid.getOpenid();
if(queryopenid!=null) {
map.put("msg","您已经注册过，请不要重复注册");
JSONObject json = JSONObject.fromObject(map);
return json;
}else{
wcservice.adduc(openid,name, sex, tel, email, vip,userpassword);
//map.put("status","succ");
map.put("msg","注册成功");
JSONObject json = JSONObject.fromObject(map);
return json;
}
}else {
wcuser wcuser1 = wcservice.queryopenid(openid);
String openid2 = wcuser1.getOpenid();
if(openid2!=null) {
map.put("msg","请不要重复注册");
JSONObject json = JSONObject.fromObject(map);
return json;
}else {
map.put("msg","完善信息");
JSONObject json = JSONObject.fromObject(map);
return json;
}
}
}
}
5、数据库的那些方法和接口就不写了，重点是小程序的前段和后端的交互。
承接毕业设计：微信小程序、ssm和树莓派硬件
有开发好的毕业设计可直接购买，价格便宜。
扫描下面二维码加微信（非诚勿扰）：
