微信小程序手机号密码橙色登陆图标页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：


<view class="ipt">
  <input bindinput="changephone" placeholder="手机号" value="{{phone}}" />
</view>
<view class="ipt">
  <input bindinput="changepwd" placeholder="密码" value="{{pwd}}" />
</view>
<view class="btn" bindtap="submit">
  登 录
</view>

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

.body {  margin: 20px 0;  background-color: #fff;  box-shadow: 5px 0 #f7f7f7;  font-size: 15px;  font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;}.ipt{background: #eee; margin: 10px;width:95%;}.ipt input{height:40px;}.btn {  display: block;  height: 1.777em;  line-height: 1.777em;  margin: 10px auto;  width: 80%;  text-align: center;  background: #ff6000;  color: #fff;  border-radius: 8px;  border: none;  font-size: 1.333em;}

Helvetica,sans-serif;
}
.ipt{background: #eee; margin: 10px;width:95%;}
.ipt input{height:40px;}
.btn {
  display: block;
  height: 1.777em;


查找
/pages/login/login.wxss

三、js页面代码如下：

// pages/login/login.js

var base = getApp();
Page({
  data: {
    phone: "",
    pwd: ""
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数  
  },
  changephone: function (e) {
    this.setData({
      phone: e.detail.value
    });
  },
  changepwd: function (e) {
    this.setData({
      pwd: e.detail.value
    });
  },
  submit: function () {
    var _this = this;
    base.get({ c: "User", m: "Login", phone: _this.data.phone, pwd: _this.data.pwd, }, function (d) {
      var dt = d.data;
      if (dt.Status == "ok") {
        base.user.userid = dt.Tag.Uid;
        base.user.sessionid = dt.Tag.SessionId;
        base.user.jzb = dt.Tag.Money;
        base.user.exp = dt.Tag.Exp;
        base.user.phone = dt.Tag.Phone;
        base.user.levels = dt.Tag.Levels;
        base.user.headimg = dt.Tag.HeadImgPath;
        wx.switchTab({
          url: '../user/user'
        })
      }
      else {
        wx.showModal({
          showCancel: false,
          title: '',
          content: dt.Msg
        });

      }
    })

  }
})

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