由于视频教程(https://developers.weixin.qq.com/community/business/doc/00008c2f9d83a040de5ad3a945b80d)中仅仅是布置了编写登录页面的作业，在下一节并没有代码呈现，所以我把我编写好的代码发出来，供大家交流使用：

• login.json文件

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "洞主登录",
  "navigationBarTextStyle":"black"
}

• login.wxml文件

<!--pages/login/login.wxml-->
<view class="background">
    <view class="first">
        <input id='account' placeholder="用户名/邮箱/手机号" placeholder-class="plas" type="text" class="inputs" bindinput="accountInput" />
    </view>
    <view class="second">
        <input id='pwd' placeholder="登录密码" placeholder-class="plas" type="password" class="inputs" bindinput=passwordInput" />
    </view>
    <view id='btn' class="click" bindtap='signin'>注册</view>
    <view class="cha">
        <text class="no" bindtap="regist">还没有账号？点我注册</text>
    </view>
</view>

• login.wxss

/* pages/login/login.wxss */
pages {
    left: 0rpx;
    right: 0rpx;
    background-color: white;
}


.first {
    width: 90%;
    height: 100rpx;
    margin-top: 80rpx;
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    /*Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性*/
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
}


.second {
    width: 90%;
    height: 100rpx;
    margin-top: 30rpx;
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    /*Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性*/
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
}


.flas {
    font-size: 30rpx;
    color: #CCCCCC;
}


.inputs {
    line-height: 100rpx;
    font-size: 30rpx;
    color: #000000;
    margin: auto;
    margin-left: 20rpx;
    width: 100%;
}


.click {
    width: 90%;
    height: 100rpx;
    line-height: 100rpx;
    margin: auto;
    margin-top: 80rpx;
    margin-left: 5%;
    margin-right: 5%;
    background-color: #F76968;
    text-align: center;
    color: white;
    font-size: 33rpx;
}


.cha {
    width: 90%;
    height: 50rpx;
    margin: auto;
    margin-top: 30rpx;
    margin-left: 5%;
    margin-right: 5%;
}


.no {
    color: black;
    font-size: 28rpx;
    margin-left: 15rpx;
    font-family: PingFangSC-regular;
}

• login.js

// pages/login/login.js
Page({


    /**
     * 页面的初始数据
     */
    data: {
        account:'',
        password:''
    },


    accountInput:function (e) {
        this.data.account = e.detail.value
    },


    passwordInput:function (e) {
        this.data.password = e.detail.value
    },


    regist:function (e) {
        wx.navigateTo({
          url: '../enroll/enroll',
        })
    },


    signin:function (e) {
        var that = this
        if(that.data.account==''){
            wx.showModal({
              title:"提示",
              content:"请输入用户名/邮箱/手机号",
              showCancel:false,
              success(res){}
              })
        }else if(that.data.password==''){
            wx.showModal({
                title:"提示",
                content:"请输入密码",
                showCancel:false,
                success(res){}
                })
        }else{
            console.log('success')
        }
    },


    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {


    },


    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {


    },


    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {


    },


    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {


    },


    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {


    },


    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {


    },


    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {


    },


    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {


    }
})

代码如上。希望我的代码能给你们带来帮助。

如果觉得对你们有帮助，可以给文章点个赞哦~