草庐IT

微信小程序登录注册页面

StockQuant 2023-07-27 原文
// login.js
// 获取应用实例
var app = getApp()
var api = require("../../utils/api.js")

Page({
  data: {
    motto: '@zhenbei V1.0.0',
    userInfo: {},
    hasUserInfo: false,
    disabled: true,
    btnstate: 'default',
    username: '',
    password: '',
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  accountInput: function (e) {
      var username = e.detail.value
    if (username !== '') {
      this.setData({
        disabled: false, 
        btnstate: 'primary', 
        username: e.detail.value
      });
    } else {
      this.setData({
        disabled: true,
        btnstate: 'default'
      });
    }
  },

  pwdBlur: function(e) {
    var password = e.detail.value
    if (password != '') {
      this.setData({password: e.detail.value});
    }
  },

  onClickSubmit:function(e){
    wx.request({
      url: api.LoginAPI,
      data: { 
        username: this.data.username, 
        password: this.data.password, 
        // nickname: e.detail.userInfo.nickName,
        // avatar: e.detail.userInfo.avatarUrl
      },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
          console.log(res)
        if (res.data.code) {
          // 初始化用户信息
          app.initUserInfo(res.data.data, e.detail.userInfo);
          // 跳转会上一级页面
          wx.redirectTo({
            url: '../index/index',
          });
        } else {
          wx.showToast({ title: "登录失败", icon: 'none' });
        }
      }
    })
  },
  bindViewTap() {
      
  },
  onLoad() {
  },

})

// login.json
{
    "usingComponents": {}
}```

帐号 密码
</view>
<view class="hr"></view>

<!-- <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bind:tap="login">登录</button> -->
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" open-type="getUserInfo"  bindgetuserinfo="onClickSubmit">登录</button>
<view class="operate">
	<view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
	<view>找回密码</view>
</view>
<!-- <view class="login">
	<view><image src="..//images/wxlogin.png" /></view>
	<view><image src="../images/qqlogin.png" /></view>	
</view> -->
{{motto}}


/* pages/login/login.wxss */
/index.wxss/
.content {
margin-top: 60px;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}

.userinfo-avatar {
overflow: hidden;
width: 200rpx;
height: 200rpx;
margin: 0rpx;
border-radius: 50%;
}

.account {
display: flex;
flex-direction: row;
padding-left: 0px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}

.title {
margin-right: 30px;
font-weight: bold;
}

.hr {
border: 1px solid #ccc;
opacity: 0.2;
width: 90%;
margin: 0 auto;
}

.see {
position: absolute;
right: 20px;
}

.btn {
width: 90%;
margin-top: 40px;
color: #999;
}

.operate {
display: flex;
flex-direction: row;
}

.operate view {
margin: 0 auto;
margin-top: 40px;
font-size: 14px;
color: #333;
}

.login {
display: flex;
flex-direction: row;
margin-top: 60px;
}

.login view {
margin: 0 auto;
}

.login image {
width: 70px;
height: 98px;
}

.usermotto {
margin-top: 140px;
font-size: 15px;
}


有关微信小程序登录注册页面的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. 阿里云国际版免费试用:如何注册以及注意事项 - 2

    作为新的阿里云用户,您可以50免费试用多种优惠,价值高达1,700美元(或8,500美元)。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用,您将获得价值1,700美元的优惠。但是,如果您是注册公司,您可以选择企业免费试用,提交基本信息通过企业实名注册验证,即可开始价值$8,500的免费试用!本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前,您还必须遵守以下条款和条件才能访问您的免费试用:只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠,用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  5. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中,我没有任何确认。在我的用户模型中,我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  6. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  7. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行,我想让它们一个接一个地显示,但如果表格不适合当前页面,请将其放在下一页,然后继续。我已将表格放入事务中,以便我可以回滚然后打印它(如果高度适合当前页面),但我如何获得表格高度?我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  8. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知,Jekyll默认分页仅支持index.html,我想创建blog.html并在那里包含分页。有什么解决办法吗? 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件,那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板,而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  9. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem?或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面,我们在StackOverflow上找到一个类似的问题: https:/

  10. ruby - 使用 Ruby 和 Mechanize 登录网站 - 2

    我需要从站点抓取数据,但它需要我先登录。我一直在使用hpricot成功地抓取其他网站,但我是使用mechanize的新手,我真的对如何使用它感到困惑。我看到这个例子经常被引用:require'rubygems'require'mechanize'a=Mechanize.newa.get('http://rubyforge.org/')do|page|#Clicktheloginlinklogin_page=a.click(page.link_with(:text=>/LogIn/))#Submittheloginformmy_page=login_page.form_with(:act

随机推荐