请使用Internet Explorer 10以上浏览器,或Chrome、Firefox、Safari访问本站,以获得最佳浏览体验。
免费咨询电话:
4000-117-087
电话咨询 在线咨询 在线顾问 在线顾问

.Net Core API 小程序零基础开发系列(一) 登录功能实现

2019-12-23

开发工具:
微信开发者工具
Visual Studio 2017

一、前台页面
1、打开微信开发者工具,新建一个login目录,然后新建下面几个文件:

2、然后打开根目录下面的app.json,在pages下面的最前面添加:pages/login/index,把我们添加的目录的index页面设置为小程序的起始页面。

3、打开login目录下面的index.wxml,编写代码:
<view class='containerCommon'>
    <form bindsubmit="formSubmit">
        <view class='txtItem'>
        <input placeholder="请输入您的用户名"  class='txt'  name="txtname" value="" focus='true' maxlength='16'/>
    </view>
      <view class='txtItem pwd'>
              <input placeholder="请输入您的密码"  class='txt'  name="txtpwd"  password="true" maxlength="16" type="text" />
              </view>
      <button form-type="submit" type="submit" class="button">登录</button>
</form>
</view>

代码说明:
1、添加了一个View容器标签,类似Html里面的Div
2、添加了一个From表单,绑定了一个formSubmit的提交方法
3、添加了一个用户名输入框和一个密码输入框
4、添加了一个提交按钮,用于提交表单。
然后打开login下面的index.js,编写js代码,写法和传统的jquery的写法基本类似,用于提交填写的账号和密码,并根据webapi返回的结果来判断是否登录成功:

var app = getApp()
Page({
  formSubmit: function (e) {
    var that = this;
    wx.request({
      url: app.globalData.apiurl + 'login',
      data: {
        Name: e.detail.value.txtname,

  Password: e.detail.value.txtpwd

      },

      header: {

        'content-type': 'application/json'

      },

      method: "POST",

      success: function (res) {

        console.log(res.data.code);

        if (res.data.code == 0) {

          that.setData({

            txtname: res.data.name

          })

          wx.showToast({

            title: '登录成功!',//这里打印出登录成功

            icon: 'success',

            duration: 1000

          })

        } else {

          wx.showToast({

            title: '登录失败!',

            icon: 'loading',

            duration: 1500

          })

        }

      

      }

    })

  }

})

 

代码说明:

1、 定义了一个方法名 formSubmit 和上面页面的form表单绑定的方法名一致。

2、 提交的url网址在根目录下面的app.js里面配置

3、 如果提交成功,对返回的结果进行判断是否提交成功。

     东八区成立于中国品牌推广和设计行业崛起的二十一世纪初,致力为企业深入挖掘发展潜力,追求更高品牌价值,打造独一无二的品牌产业。东八区为客户提供

站建设一站式服务,PC站、手机站、微信站 三站合一;东八区结合用户及行业特性,个性化定制线上端口。通过“网络与数字化服务平台”,实现从网站到互动的体

验,打造数字品牌托管到用户体验设计的全程一站式服务。东八区拥有强大的售后服务支持,包括网络技术支持、网络安全、站点信息的更新服务。同时高速的网络

带宽接入,保证网站有良好的访问速度;另外将定期或不定期对网站的数据进行备份,使数据不会因为网站的意外故障而丢失,7*24小时不间断技术人员值班,随时

有技术工程师提供咨询和解决问题。