1.前言
uniapp是一个使用html5标准的,一次开发,可以发布到安卓,ios,小程序的多端框架。非常方便。
这是一个非常基础的demo,面向于近乎无经验的朋友们。更重要的是指导按什么顺序看这篇demo文件。字有点多,比较乱,只能抱歉一条条看了。本来想做一个完全手把手教程,也就是视频。但发现自己的表达过于贫瘠,只能做一个文字版的了。文字版过程将简单一点。
本demo分为前端和后端两部分,
前端部分为简单登录模板,没有引用任何外部css,较为简单,并做了简单合法性校验。您可以拿去用,来少写几个输入框。登录保持用的是传统web的session(cookies)机制。符合传统开发习惯。本demo不含微信等的快捷登录,为传统手机号登录。
后端采用c#.net,结构较为简单。数据库为mysql,使用了预处理,保证了数据库安全,您可以放心使用。在下面的部分会有详细讲解,包括POST传值,接口,session。
2.uniapp前端
首先,务必看一下官方视频教程,在官方文档首页如何学习里有链接。
本demo制作时的流程:
1.先制作界面,先不写js逻辑。新建“indexme”界面,在pages.json文件中,配置tabbar。其中图标可在阿里云图标库(https://www.iconfont.cn/)下载,下载png格式时,可直接指定颜色,大小为81。json与效果如下:
2.新建login/register/logot界面,来绘制登录、注册、退出页面。绘制输入框,并在js中对输入框的合法性进行简单验证。(先不写网络交互逻辑。)之后补全页面跳转逻辑。
以上截图分别为界面,合法性校验,页面跳转。
3.后端接口
4.uniapp与后端交互
5.结果
登录后,会显示JSON数据,