微信小程序开发之小程序框架&表单

一、新建pages

Ⅰ、手动

1、手动新建文件夹（pages）

2、在login文件新建page

就会自动生成对应的js以及json，wxml，wxss文件

Ⅱ自动

在app.json文件中

 实例：

login.js

Page({

  data: {

      phone: '',

      password: '',

      success: false,

      text: ''

  },

  // 获取输入账号

  phoneInput: function (e) {

      this.setData({

          phone: e.detail.value

      })

  },

  // 获取输入密码

  passwordInput: function (e) {

      this.setData({

          password: e.detail.value

      })

  },

  // 登录

  login: function () {

      var that = this;

      var warn = null;

      //warn为当手机号为空或格式不正确时提示用户的文字，默认为空

      if (that.data.phone.length === 0) {

          wx.showToast({

              title: '用户名不能为空',

              icon: 'loading',

              duration: 1000

          })

      } else if (that.data.password.length === 0) {

          wx.showToast({

              title: '密码不能为空',

              icon: 'loading',

              duration: 1000

          })

      } else {

          wx.request({

              url: 'http://192.168.41.40:8002/login',

              method: "POST",

              data: {

                  cardNo: that.data.phone,

                  password: that.data.password

              },

              header: {

                  'content-type': 'application/x-www-form-urlencoded'

              },

              success: function (res) {

                  if (res.data.state === 1) {  //判断是否能正常登录

                      warn = "卡号密码不匹配";

                      wx.showModal({

                          title: '提示',

                          content: warn

                      })

                      return;

                  }

                  that.setData({

                      success: true,

                      text: res.data.url

                  })

              }

          })

      }

  },

  // 注册

  register: function () {

      wx.navigateTo({

          url: '/pages/register/register',

      })

  }

})

login.json

{

  "usingComponents": {}

}

login.wxml

<view class="container">

 <view class="login-icon">

   <image class="login-img" src="/images/key.jpg"></image>

 </view>

 <view class="login-from">

   <!--账号-->

   <view class="inputView">

     <image class="nameImage" src="/images/home.png"></image> 

     <label class="loginLab">账号</label> 

     <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" /> 

   </view> 

   <view class="line"></view> 

   <!--密码-->

   <view class="inputView">

     <image class="keyImage" src="/images/my.png"></image> 

     <label class="loginLab">密码</label> 

     <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> 

   </view> 

   <!--按钮-->

   <view class="loginBtnView">

     <button class="loginBtn" type="primary" size="{{primarySize}}" 

         loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> 

   </view>

    <!--注册-->

   <view class="registerBtnView"> 

     <button class="registerBtn" type="primary" size="{{primarySize}}" 

         loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="register">注册</button> 

   </view> 

 </view> 

</view>

<view class = 'success' wx:if="{{success}}">

 <web-view src="{{text}}"></web-view>

</view>

login.wxss

/* pages/login/login.wxss */

page{ 

  height: 100%; 

 } 

   

 .container { 

  height: 100%; 

  display: flex; 

  flex-direction: column; 

  padding: 0; 

  box-sizing: border-box; 

  background-color: #f2f2f2

 } 

   

 /*登录图片*/

 .login-icon{ 

  flex: none; 

 } 

 .login-img{ 

  width: 750rpx; 

 } 

   

 /*表单内容*/

 .login-from { 

  margin-top: 20px; 

  flex: auto; 

  height:100%; 

 } 

   

 .inputView { 

  background-color: #fff; 

  line-height: 44px; 

 } 

 /*输入框*/

 .nameImage, .keyImage { 

  margin-left: 22px; 

  width: 14px; 

  height: 14px

 } 

   

 .loginLab { 

  margin: 15px 15px 15px 10px; 

  color: #545454; 

  font-size: 14px

 } 

 .inputText { 

  flex: block; 

  float: right; 

  text-align: left; 

  margin-right: 22px; 

  margin-top: 11px; 

  color: #cccccc; 

  font-size: 14px

 } 

   

 .line { 

  width: 100%; 

  height: 1px; 

  background-color: #cccccc; 

  margin-top: 1px; 

 } 

 /*按钮*/

 .loginBtnView { 

  width: 100%; 

  height: auto; 

  background-color: #f2f2f2; 

  margin-top: 0px; 

  margin-bottom: 0px; 

  padding-bottom: 0px; 

 } 

   

 .loginBtn { 

  width: 100%; 

  margin-top: 35px; 

 }

  

 .registerBtn { 

  width: 100%; 

  margin-top: 5px; 

 }

注意修改app.json 

把login提前，不然会被覆盖