1.首先是wxml文件布局设计
<!--pages/login/login.wxml--><view class='page'> <form bindsubmit='formSubmit' bindreset='formReset' report-submit='true'> <view class='set1'> <view> <text>账号：</text> </view> <view class='input'> <input placeholder='请输入账号' name='username'></input> </view> </view> <view class='set1'> <view> <text>密码：</text> </view> <view class='input'> <input placeholder='请输入密码' password='true' name='password'></input> </view> </view> <view class='btn'> <button form-type='submit' type='primary'>提交</button> <button form-type='reset'>重置</button> </view> </form></view>样式
/* pages/login/login.wxss */.page{ margin: 0rpx,50rpx,50rpx,50rpx;}.set1{ margin: 0rpx,0rpx,50rpx,0rpx; width: 100%; display: flex; flex-direction: row; align-items: center;}.btn{ width: 100%}2.既然是登录，就需要对用户名密码进行校验
用户名或密码为空时发出提示信息，参考API：https://developers.weixin.qq.com/miniprogram/dev/api/wx.showModal.html
//校验 if(username == "" || password == ""){ wx.showModal({ title: '提示', content: '不能为空', }) }输入的用户名需要发送给后台做校验，用户名密码正确则跳转到下一个页面pages/welecome/welecome。用户名密码错误则后台返回错误信息并提示用户名或密码错误。
用户名密码输入错误时
具体实现代码如下：
我的后台用的是Java，只是作为测试。
刚刚接触微信小程序，开始写登录时花了点时间，因为刚刚开始不太熟悉微信小程序的语法，不过参考API很快就写出来了。
