微信小程序黑客和画家的社区登陆页样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="body wrapper">
  <form bindsubmit="login">
    <image class="logo" src="../../image/logo.png"></image>
    <view class="ft-center">黑客与画家的社区</view>
    <input name="userName" bindinput="setUserName" placeholder="用户名/邮箱"/>
    <input password name="password" bindinput="setPassword" placeholder="密码"/>
    <button type="primary" form-type="submit">登录</button>
    <button bindtap="register">注册</button>
  </form>
</view>

二、wxss样式文件代码如下：

.logo {
  width: 70vw;
  height: 70vw;
  margin: 0 auto;
  display: block;
}

button {
  margin-top: 40rpx;
  font-size: 32rpx;
}

input {
  border: 1px solid #ccc;
  background-color: #fafafa;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
  padding: 7px 8px;
  box-sizing: border-box;
  margin-bottom: 40rpx;
  height: 33px;
}

.ft-center {
  margin-bottom: 50rpx;
  color: #666;
}

三、js页面代码如下：

var calcMD5 = require('../../js/md5.js');
var Util = require('../util/util.js');
Page({
  data: {
  },
  /**
   * 初始化加载
   * options url 参数
   */
  onLoad: function (options) {
    wx.getStorage({
      key: 'cookie',
      success: function (res) {
        if (!res.data) {
          return false
        }
        wx.redirectTo({
          url: '../scan/scan'
        })
      }
    })
  },
  /**
   * 注册
   */
  register: function () {
    wx.showModal({
      content: '小程序暂不支持注册, 请前往 https://hacpai.com 进行注册',
      showCancel: false
    })
  },
  /**
   * 登录
   */
  login: function (e) {
    Util.networkStatus()
    wx.request({
      url: 'https://hacpai.com/login',
      data: {
        nameOrEmail: e.detail.value.userName,
        userPassword: calcMD5(e.detail.value.password),
        rememberLogin: true,
      },
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        if (res.errMsg !== 'request:ok') {
          wx.showToast({
            title: res.errMsg,
            icon: 'loading',
            duration: 3000
          })
          return false;
        }
        if (!res.data.sc) {
          wx.showToast({
            title: res.data.msg,
            icon: 'loading',
            duration: 3000
          })
          return false;
        }

        wx.setStorage({
          key: "cookie",
          data: res.data.token
        })

        wx.redirectTo({
          url: '../scan/scan'
        })
      },
      fail: function (res) {
        wx.showToast({
          title: res.errMsg,
          icon: 'loading',
          duration: 3000
        })
      }
    })
  }
})

模板简介：该模板名称为【微信小程序黑客和画家的社区登陆页样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。