微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)

现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,我也是因为新鲜感学习了一下,写了一个登录demo

前言:
微信小程序开发者注册API等乱起八糟的东西我这里就不写了,是SpringBoot框架不会搭建的可以看我上一篇文章,SpringBoot整合Mybatis这一章我会讲一些。

技术栈:
前端:小程序原生API
后端:SpringBoot+Mybatis+MySQL+JDK1.8

小程序端
打开微信开发者工具选择小程序项目
微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第1张图片

创建项目,这里没有AppID的可以选择体验小程序/小游戏,有AppID的就不用选择,

项目目录,项目名称自行填写,我们这里选择建立普通快速启动模板

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第2张图片

创建好后是这样的一个结构

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第3张图片

下面我们看一下项目结构区

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第4张图片

我们在Pages上右键新建个文件存放目录

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第5张图片

建好文件夹后,我们在新建的文件夹上新建一个Page

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第6张图片

创建好之后是这样的

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第7张图片

创建完后我们需要改一些配置让右面的模拟器来显示我们新建的当前页面

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第8张图片
这时我们就可以去画我们的登录页面了,打开.wxml文件

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第9张图片

页面画好后,我们需要去监听登录按钮和获取input的值,这些动作要去.js文件里写

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第10张图片

最后一步请求java后台,也是在.js文件里做,在点击登录按钮的时候去请求后台,所以我们还是在监听按钮的函数里面去写代码

微信小程序+SpringBoot+Mybatis登录demo(一、小程序端)_第11张图片

好了,小程序端的准备已经完成了,因为后台还没有搭建,所以现在是不能发送请求的哦!

如有需要改正的地方还请大家多多指出!

后端的搭建我下一章会讲解

你可能感兴趣的:(前端,小程序)