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

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

上一篇 下一篇
制作好以后效果图如下:
一、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
        })
      }
    })
  }
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 16,109次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-21
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 企业网站 自适应 微信公众平台 单页式简历模板 响应式 微信素材 微信文章 微信图片 微信模板
您可能会喜欢的其他模板