2018-06-14  2,561 views 3

小程序开发使用ASP.NET Web Api做服务端快速实现用户登录功能 实例

由于有朋友评论为什么不是微信登录?博主再此声明,本文为较为基础的 讲授小程序如何与后台交互 实现用户登录的文章

微信登录的文章传送门:

1、ASP.NET WEBAPI作服务端开发小程序实现微信授权用户登录实例(一)

2、ASP.NET WEBAPI作服务端开发小程序实现微信授权用户登录实例——后台API编写(二)

3、ASP.NET WEBAPI作服务端开发小程序实现微信授权用户登录实例——实现登录逻辑(三)

微信小程序的开发可以总结如下:

1、微信小程序开发跟Web开发非常类似,只不过借助微信的平台,搭建了腾讯自己的解析器,因此微信小程序也是支持DOM的

2、微信小程序前端很多写法跟Html都是类似的,比如View标签,是一个容器,这相当于我们平常所用到的DIV(PS:如果你之前开发HTML前端页面就大量使用DIV进行布局,那转到小程序可谓是如鱼得水的)

3、微信小程序的样式 wxss,与传统的CSS也是如出一辙,基无变化

4、JS的操作,除了没有传统的DOM操作外,语法也是基本类似,如果你之前习惯使用jQuery的话更是如此

废话不多说,今天就以一个实际的案例来讲解下小程序的开发

下面的案例实现的功能是用户登录的功能:

实现效果如下:

默认登录UI

登录成功

 

登录失败

单击登录请求API 调试的结果

 

开发步骤:

Step1:注册微信小程序账号,可以用一个新的邮箱注册

Step2:注册成功后可以拿到AppID

Step3:打开微信小程序开发工具,创建项目

Step4:开始敲代码啦

 

登录UI前端代码如下:

wxml:

<view class="containerCommon">
  <view class='loginTopContainer'>
    <view class='loginBottom'></view>
  </view>
  <!--<view class='headpanel'>
  </view>-->
  <view class='formPanel'>
    <form bindsubmit="formSubmit" bindreset="formReset">
      <view class='txtItem name'>
        <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" class="button">登录</button>
    </form>
  </view>
</view>

wxss:全局样式写在根目录的app.xcss下,比如这个案例中的containerCommon样式

page {
  background: #fff;
  height: 100%;
}

.loginTopContainer {
  width: 100%;
  background: #0bf;
  height: 25%;
  content: '';
}

/*
.headpanel{
  box-sizing: border-box;
  width: 20%;
  height: 15%;
  border:2px solid #7ADEF5;
  margin: 0 auto;
  position: absolute;
  top:5%;
  left:40%;
  border-radius: 100rpx; 
}*/

.loginAvatarText {
  color: #ecfeff;
  top: 16%;
  left: 32%;
}

.loginBottom {
  width: 100%;
  background: #0bf;
  border-radius: 50%;
  height: 100rpx;
  position: absolute;
  top: calc(25% - 52rpx);
}

.formPanel {
  width: 100%;
  height: 40%;
  position: absolute;
  top: 30%;
  padding: 10px;
  box-sizing: border-box;
}

.txtItem {
  display: flex;
  border: 2rpx solid #eaeaea;
  border-radius: 8rpx;
  padding: 10rpx;
  font-size: 30rpx;
  background: #fff;
}
.txt{padding:10rpx 0;}
.pwd{
  margin-top: 30rpx;
}
.button{
  margin-top:30rpx;
}

js: 其中var app = getApp() 是获取应用实例

var app = getApp()
Page({
  formSubmit: function (e) {
    var that = this;
    wx.request({
      url: app.globalData.api + 'login',
      data:{
        Name: e.detail.value.txtname,
        Password: e.detail.value.txtpwd
      },
      header: {
        'content-type': 'application/json'
      },
      method: "POST", 
      success: function (res) {
        if(res.data.Code==0){
          that.setData({
            txtname: res.data.Result.Name
          })
          wx.showToast({
            title: '登录成功!',//这里打印出登录成功
            icon: 'success',
            duration: 1000
          })
        } else {
          wx.showToast({
            title: '登录失败!',
            icon: 'loading',
            duration: 1500
          })
        }
      }
    })
  }
})

app.js需要新增一些全局的数据:

globalData: {
  userInfo: null,
  imgUrl: 'http://localhost:28108/img/',
  api: 'http://localhost:28108/',
}

后端代码如下:

    [Route("login")]
    public BaseRequestResponse<AccontDto> Login(AccontDto dto)
    {
        if (dto==null)
        {
            return new BaseRequestResponse<AccontDto>
            {
                Code = ResultCode.NeedsKeyParameter,
                Message = "账号和密码不能为空"
            };
        }
        if (string.IsNullOrEmpty(dto.Name))
        {
            return new BaseRequestResponse<AccontDto>
            {
                Code = ResultCode.NeedsKeyParameter,
                Message = "账号不能为空"
            };
        }
        if (string.IsNullOrEmpty(dto.Password))
        {
            return new BaseRequestResponse<AccontDto>
            {
                Code = ResultCode.NeedsKeyParameter,
                Message = "密码不能为空"
            };
        }
        if (dto.Name == "admin" && dto.Password == "admin")
        {
            return new BaseRequestResponse<AccontDto>
            {
                Message = "登录验证成功",
                Result = dto
            };
        }
        else
        {
            return new BaseRequestResponse<AccontDto>
            {
                Code = ResultCode.NotExistsValue,
                Message = "账号或密码错误"
            };
        }
    }
}
/// <summary>
/// 默认请求返回对象
/// </summary>
/// <typeparam name="T"></typeparam>
public class BaseRequestResponse<T>
{
    public int Code { get; set; } = ResultCode.NormalCode;
    public string Message { get; set; }
    public T Result { get; set; }
}
/// <summary>
/// 账号DTO
/// </summary>
public class AccontDto
{
    public string Name { get; set; }
    public string Password { get; set; }
}

public class ResultCode
{
    /// <summary>
    /// 正常code
    /// </summary>
    public const int NormalCode = 0;

    /// <summary>
    /// 未传入片键或片键非法
    /// </summary>
    public const int NeedsKeyParameter = 10001;
    /// <summary>
    /// 相关数据已经存在
    /// </summary>
    public const int IsExistsValue = 10002;

    /// <summary>
    /// 相关数据不存在
    /// </summary>
    public const int NotExistsValue = 10003;

    /// <summary>
    /// 暂不支持此操作
    /// </summary>
    public const int NotSupported = 10004;
}

本来想在项目中开启SSL,然后直接在微信小程序前端请求安全链接的,但是实际却出现NOT GET ANY RESPONSE. using POSTMAN的错误,没法请求到,因此还是使用http请求,但是需要进行如下操作:

 

 

如果下载了我提供的源码,注意APPID是错的,需要改为你自己的就可以,如何导入项目可以查看:

如何导入本地现有的微信小程序项目

源码下载(前端+服务端):https://download.csdn.net/download/lbasx/10479081

3 条留言  访客:1 条  博主:2 条

  1. 1231

    真不知道你在说些什么,要的是微信登录,你来这些代码有卵用

    • 51softs 博主

      @1231 标题中就没写是微信登录,微信登录在另外的文章会有,况且谁说小程序一定要微信登录的?官方说一定要微信登录了?用了微信登录这篇文章的内容就没用了?微信授权难道不要请求API获取用户openId?获取openId后不需要请求API进行登录?

    • 51softs 博主

      @1231 你要的微信登录解决方案:
      1、http://www.51softs.com/weixinkaifa/asp-net-webapi-xiaochengxu-weixindenglu-shouquan-1.html
      2、http://www.51softs.com/weixinkaifa/asp-net-webapi-xiaochengxu-weixin-denglu-api-bianxie-2.html
      3、http://www.51softs.com/weixinkaifa/asp-net-webapi-xiaochengxu-weixin-denglu-luoji-3.html

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: