微信小程序账号密码登录测试实现

第一步：设计登录界面

在微信小程序的.wxml文件中，创建一个登录表单，包括输入框和按钮

    <view>账号：</view>
    <view>
       <input type="text" name="username" placeholder="请输入账号"/>
   </view>
   <view>密码：</view>
   <view>
       <input type="password" name="pwd" placeholder="请输入账号" />
   </view>
   <view>
    <button type="primary" form-type="submit">账号登录</button>
   </view>
 </form>

效果如下

第二步：编写登录逻辑

在.js文件中，定义登录处理函数，收集表单数据并发送到后端

//获取账号密码
var username=e.detail.value.username;
var pwd=e.detail.value.pwd;
//如果账号密码等于 123和123 跳转登录成功的个人页面
if(username=="123"&&pwd=="123"){
   wx.redirectTo({
     url: '/pages/geren/geren',
   })
}else{
    wx.showToast({
      title: '账号或密码错误',
      icon:"error"
    })
}

输入账号密码进行测试

正确会跳转到要登录的界面

错误