微信小程序表单提交获取传值

发布时间：2019-01-31 16:35:08 修改时间：2019-01-31 16:35:08 阅读：7007 评论：0 0

表单提交事件

全局变量存储在app.js

App({

  onLaunch: function () {

    // 展示本地存储能力

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

    // 登录

    wx.login({

      success: res => {

        // 发送 res.code 到后台换取 openId, sessionKey, unionId

      }

    })




    // 获取用户信息

    wx.getSetting({

      success: res => {

        if (res.authSetting['scope.userInfo']) {

          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

          wx.getUserInfo({

            success: res => {

              // 可以将 res 发送给后台解码出 unionId

              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

              // 所以此处加入 callback 以防止这种情况

              if (this.userInfoReadyCallback) {

                this.userInfoReadyCallback(res)

              }

            }

          })

        }

      }

    })

  },

  globalData: {

    userInfo: null  

  }    //全局变量

})




登录页面:index.wxml

<view>

<form bindsubmit="formSubmit">  //绑定事件

<view>

<label for="username">用户名:</label>

<input name="username" placeholder="请输入用户名"/>

</view>

<view>

<label for="password">密码:</label>

<input name="password" placeholder="请输入密码"/>

</view>

<button class="btn_login" formType="submit">登录</button>//登录按钮

</form>

</view>




登录页面js:  index.js

//获取应用实例

const app = getApp()

Page({

  data: {

  },

  formSubmit: function (e) {  //表单提交绑定事件

    if (e.detail.value.username.length == 0 || e.detail.value.password.length == 0) {

      wx.showToast({

        title: '用户名或密码不得为空!',

        icon: 'loading',

        duration: 1500

      })

      setTimeout(function () {

        wx.hideToast()

      }, 2000)

    }  else {

      wx.request({  //后台交互

        url: 'http://localhost/xxxx/zzzz/user_login',

        //指向方法, 本地用http:\\...   线上必须是https:\\...

        header: {

          "Content-Type": "application/x-www-form-urlencoded"

        },   //标明格式, 必不可少

        method: "POST",   //传递数据类型

        data: { login_info: e.detail.value.username, password: e.detail.value.password },   //传输数据

        success: function (res) {   //返回信息,类似于ajax-json交互

          if (res.data.status == 1) {

            wx.showToast({

              title: 'success',

              icon: 'success',

              duration: 1500

            }),

              getApp().globalData.userInfo = res.data.username;

              //将信息存储到app.js的全局变量里,方便以后调用,

              wx.navigateTo({

              url: '../reg/reg'

              })   //跳转下一页面

          } else {

            wx.showToast({

              title:'failed',

              icon: 'success',

              duration: 1000

            })

          }

        }

      })

    }

  },

})




登录后台逻辑:simple.php里的user_login

function user_login(){

    $login_info = IFilter::act(IReq::get('login_info','post'));

    $password   = IReq::get('password','post');

    $pwd=md5($password);

    $sellerObj = new IModel('user');

    $swhere   = ' username = "'.$login_info.'" and password = "'.$pwd.'"';

    $checkCount = $sellerObj->query($swhere,"id",false,'',1);

    if(!empty($checkCount)){

        echo json_encode(array('status'=>1,'username'=>$login_info));

    }else{

        echo json_encode(array('status'=>0));

        //必须返回json格式

    }

}




跳转页面js逻辑处理: reg.js

//获取应用实例

const app = getApp()

Page({

  onLoad: function (options) {

    this.setData({

      username: getApp().globalData.userInfo

      //页面加载时获取userInfo变量信息赋值给username

    })

  },

})







跳转页面: reg.wxml

<view>

    <view>

      <label for="username">用户名:{{username}}</label>

    </view>

</view>

---