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

开发环境：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="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.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>

最后的实现效果：

从零开始自学微信小程序（一）相关推荐

微信小程序-计算器小程序《从零开始学微信小程序》
主界面的代码块  <view class="container" ...
从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
从零开始的微信小程序入门教程
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
《从零开始学微信小程序开发》.pdf
关注"Java后端技术全栈" 回复"000"获取大量电子书 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关 ...
自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
自学微信小程序开发第二天-事件处理、数据流
自学微信小程序开发第二天-事件处理.数据流事件处理绑定冒泡事件阻止冒泡事件互斥事件事件传参事件对象的属性数据流实例:登录页面案例之前学习了微信小程序开发的相关环境,测试了小程序开发工 ...
前端自学路线图之自学微信小程序
文章目录自学微信小程序自学目标自学微信小程序技术要点自学微信小程序--小程序基础自学微信小程序--黑马优购自学微信小程序资源黑马程序员前端自学路线图中第六阶段的是自学微信小程序:主要介绍了 ...
从零开始：微信小程序新手入门宝典
小程序终于正式浮上水面,为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习. 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方 ...

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

从零开始自学微信小程序（一）相关推荐

最新文章

热门文章