从零开始自学微信小程序（一）

从零开始自学微信小程序（一）"/>

从零开始自学微信小程序（一）

开发环境：MyEclipse2017 + Tomcat 8.5 + MySQL 5.7.26 + 微信开发者工具

emmmmm这些环境的搭建就不写了，网上太多了

之前通过看视频已经大概了解了微信小程序，现在开始实践

今天完成了简单的登录及登录成功后的页面跳转（还不完善，后期完善了会进行更新）

数据库设计：

前端部分代码（微信开发者工具实现）：

页面结构：（其中页面 tabMembers 和页面 tabMine 只是为了实现导航栏，里面的内容只是在view组件里面写了一句话，所以下面不会写）

全局配置文件 app.json

{"pages": ["pages/index/index",            //新建页面可以直接在此处加，方便又安全"pages/tabMembers/tabMembers","pages/tabMine/tabMine","pages/test/test","pages/testfail/testfail","pages/testsuccess/testsuccess","pages/logs/logs"],"window": {"navigationBarBackgroundColor": "#1296db","navigationBarTitleText": "哦嚯","navigationBarTextStyle": "white","enablePullDownRefresh": true,               //设置下拉刷新"backgroundTextStyle": "dark"},"tabBar":{                                        // 底部导航栏"selectedColor":"#1296db","list":[{"pagePath":"pages/tabMembers/tabMembers","text":"签到","iconPath":"images/all.png","selectedIconPath":"images/all_active.png"},{"pagePath": "pages/tabMine/tabMine","text": "我的","iconPath": "images/user.png","selectedIconPath": "images/user_active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

登录页面 index.wxml

<!--index.wxml-->
<view class="container"><view class="login-form"><form bindsubmit="formSubmit" class="form"><!-- 学号 --><view class="stunum"><view class="weui-cell weui-cell_input" style=""><image class="stuNumImage" src="../../images/user.png"></image><view class="weui-cell_bd"><input class="weui-input" name="stunum" bindinput="stunuminput" value="{{stunum}}" placeholder="请输入学号" /></view></view></view><!-- 密码 --><view class="password"><view class="weui-cell weui-cell_input"><image class="stuNumImage" src="../../images/password.png"></image><view class="weui-cell_bd"><input class="weui-input" type="password" name="password" bindinput="passwordinput" value="{{password}}" placeholder="请输入密码"/></view></view></view><view class="loginBtnView"><button class="loginBtn" size="{{primarySize}}" form-type="submit" disabled="{{disabled}}">登录</button></view></form></view>
</view>

登录功能的 index.js 部分代码

const app = getApp()
Page({/*** 页面的初始数据*/data: {disabled:false,stunum:"",password:"",stunuminput:false,passwordinput:false},stunuminput:function(e){this.setData({ stunum: e.detail.value });  //将input框里面的数据赋值给页面初始数据stunumthis.setData({stunuminput:true});if (this.data.stunuminput==true && this.data.passwordinput==true){this.setData({disabled:false});}},passwordinput: function (e) {this.setData({ password: e.detail.value });this.setData({ passwordinput: true });if (this.data.stunuminput == true && this.data.passwordinput == true) {this.setData({ disabled: false });}},formSubmit:function(e){console.log(e);this.setData({disabled:true});wx.request({url: 'http://localhost:8080/wechat/TestServlet',      //后端的url地址，这里是本地地址data:{         //传给后端的数据stunum:e.detail.value.stunum,password:e.detail.value.password},method: 'GET',header:{'content-type':'application/json'},success:function(res){console.log(res);if(res.statusCode==200){      // HTTP状态码，200表示已经获取到数据if(res.data=="error"){wx.navigateTo({url: '../testfail/testfail'          //不带tabBar的页面跳转到不带tabBar的页面})}else{wx.switchTab({url: '../tabMembers/tabMembers'           //不带tabBar的页面跳转到带tabBar的页面})}}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({disabled:false});},/*** 生命周期函数--监听页面显示*/onShow: function () {if (this.data.stunum == '' || this.data.password == '') {this.setData({ disabled: true });} else {this.setData({ disabled: false });}},

登录页面的样式 index.wxss，登录页面还应用了weui的样式，可以下载了之后直接在app.wxss中导入：@import ‘weui.wxss’;

/**index.wxss**/page {height: 100%;background-size: 100%;
}.container {height: 100%;display: flex;flex-direction: column;padding: 0;box-sizing: border-box;
}/* 表单内容 */.login-form {margin-top: 50%;flex: auto;height: 100%;
}/* 输入框 */.stunum {width: 90%;height: 80rpx;margin: 0 auto;border: 1px solid #ccc;border-radius: 50rpx;
}.password {width: 90%;height: 80rpx;margin: 0 auto;border: 1px solid #ccc;border-radius: 50rpx;margin-top: 20rpx;
}/* 按钮 */.loginBtnView {margin-top: 0px;margin-bottom: 0px;padding-bottom: 0px;
}.loginBtn {width: 90%;height: 80rpx;line-height: 80rpx;margin-top: 35rpx;color: #fff;background-color: #1296db;border: 0.1rpx solid #ccc;border-radius: 40rpx;text-align: center;display: flex;justify-content: center;align-items: center;
}.stuNumImage{margin-right: 10px;width: 20px;height: 20px;
}

然后是后台，在myeclipse中新建应该web项目，目录结构如下

先建立实体 User.java

package model;public class User {private String stunum;private String password;public String getStunum() {return stunum;}public void setStunum(String stunum) {this.stunum = stunum;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}

数据库操作 DB.java （不规范又怎么样呢，又不是不能用hhhhh）

package db;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;import model.User;public class DB {Connection ct=null;Statement stmt=null;public DB(){try{	Class.forName("com.mysql.jdbc.Driver");ct=DriverManager.getConnection("jdbc:mysql://localhost:3306/aperson","root","root");}catch(Exception e){e.printStackTrace();}}public User checkUser(String stunum,String password) throws SQLException{try{stmt=ct.createStatement();String sql = "select * from user where stunum='"+stunum+"' and password='"+password+"'";ResultSet rs=stmt.executeQuery(sql);User user=new User();while(rs.next()){user.setStunum(rs.getString(1));第一个属性user.setPassword(rs.getString(2));/第二个属性return user;	///查到就返回对象}return null;}catch(Exception e){e.printStackTrace();return null;}finally{ct.close();stmt.close();}}
}

然后是 TestServlet.java 创建在默认的包下面

import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;
import java.sql.ResultSet;
import java.sql.SQLException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import model.User;
import db.DB;public class TestServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");// 设置响应头允许ajax跨域访问response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "GET,POST");// 获取微信小程序get的参数值并打印String stunum = request.getParameter("stunum");String password = request.getParameter("password");System.out.println(stunum);System.out.println(password);DB db = new DB();/// 建立完成判断对象HttpSession session = request.getSession();// 创建保存信息对象User user = (User) session.getAttribute("user");if (user == null) {// 第一次进入try {user = db.checkUser(stunum, password);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();} /// 如果账户密码正确，把返回的对象抛给user，不正确对象则为空}session.setAttribute("user", user);/// 保存对象Writer out = response.getWriter();if (user != null) {/// 有对象，用户名密码正确out.write("success");// 向小程序返回结果} else {// 对象为空out.write("error");}out.flush();}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

然后记得在 web.xml 配置 servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="" xmlns="" xsi:schemaLocation=" .xsd" id="WebApp_ID" version="3.1"><display-name></display-name><servlet><servlet-name>TestServlet</servlet-name><servlet-class>TestServlet</servlet-class></servlet><servlet-mapping><servlet-name>TestServlet</servlet-name><url-pattern>/TestServlet</url-pattern></servlet-mapping>
</web-app>

最后的实现效果：