微信小程序页面交互

目录

案例：登陆——>跳转到个人中心（并展示个人信息）

登陆流程

一、前端页面标签

二、收集前端页面数据

 三、前端验证账号密码是否合规

四、根据账号密码向后端发送请求

1.请求工具

2.请求调用

3.根据回调得到的状态进行处理

五.成功调转后从静态路由获取刚才得到的数据

1.声明存储变量

2.进入页面后加载数据

六、前端展示

总结：

---

案例：登陆——>跳转到个人中心（并展示个人信息）

登陆流程

        1.收集表单数据项

        2.前端验证

        3.后端验

一、前端页面标签

    <view class="input-content">
      <view class="input-item">
        <text class="tit">手机号码</text>
        <input  type="text" placeholder="请输入手机号码" id="phone" bindinput="handleInput"/>
      </view>
      <view class="input-item">
        <text class="tit">密码</text>
        <input type="password"  placeholder="请输入密码" id="password" bindinput="handleInput"/>
      </view>
    </view>

提醒：因为都是用的bindinput="handleInput"，所以要用到唯一标识符id

二、收集前端页面数据

设置变量

  data: {
    phone: "",
    password: ""
  },

收集并存储

  // 表单项内容发生改变
  handleInput(event) {
    let type = event.currentTarget.id;//取值有两种
    this.setData({
      [type]: event.detail.value
    })
  },

 三、前端验证账号密码是否合规

   if (!phone) {
      wx.showToast({
        title: '手机不能为空',
        icon: "none"
      })
      return;
    }
    //正则表示式子
    let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
    if (!phoneReg.test(phone)) {
      wx.showToast({
        title: '手机号格式错误',
        icon: "none",
      })
      return;
    }
    if (!password) {
      wx.showToast({
        title: '密码不能为空',
        icon: "none"
      })
      return;
    }

四、根据账号密码向后端发送请求

1.请求工具

import config from './config'
export default (url, data = {}, method = 'GET') => {
  return new Promise((resolve, reject) => {
    //1.new Promise 初始话Promise实例的状态为pending
    wx.request({
      url: config.host + url,
      data,
      method,
      success: (res) => {
        resolve(res.data)
        // 修改promise的状态为成功状态
      },
      fail: (err) => {
        reject(err)
        // 修改promise的状态为reject状态
      }
    })
  })
}

2.请求调用

    在由于使用await，login(方法前面应该加上async)

    //后端验证
    let result = await request('/login/cellphone', { phone, password })
    console.log("result", result)

3.根据回调得到的状态进行处理

if (result.code === 200) {
      wx.showToast({
        title: '登陆成功',
      });
      // 返回之前，将用户的存储信息返回到本地,转成json对象
      wx.setStorageSync('userInfo', JSON.stringify(result.profile))
      //跳转到个人中心
      wx.reLaunch({
        url: '/pages/personal/personal'
      })
    } else if (result.code === 400) {
      wx.showToast({
        title: '手机号错误',
        icon: "none"
      })
    } else if (result.code === 502) {
      wx.showToast({
        title: '密码错误',
        icon: "none"
      })
    } else {
      wx.showToast({
        title: '登陆失败，请重新登陆',
        icon: "none"
      })
    }

五.成功调转后从静态路由获取刚才得到的数据

1.声明存储变量

2.进入页面后加载数据

onLoad(options) {
    // 读取登陆的信息
    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        userInfo :JSON.parse(userInfo)
      })
    }
  },

六、前端展示

 

 <view class="user-info-box" bindtap="toLogin">
      <view class="portrait-box">
        <image class="portrait" src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
      </view>
      <view class="info-box">
        <text class="username">{{userInfo.nickname?userInfo.nickname:'游客'}}</text>
      </view>
    </view>

总结：

• js获取前端账号和密码时，需要设置唯一表示符号：id
• 微信提示功能：  wx.showToast({ title: '登陆成功',});可以没有icon
• 页面交互与后端请求需要使用json和js的相互转换
• 本地存储StorageSync和Storage都很重要

• 页面交互的时候，看一下怎样跳转，使用什么跳转函数合适