微信小程序页面交互

目录

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

登陆流程

一、前端页面标签

二、收集前端页面数据

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

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

1.请求工具

2.请求调用

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

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

1.声明存储变量

2.进入页面后加载数据

六、前端展示

总结：

---

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

登陆流程

        1.收集表单数据项

        2.前端验证

        3.后端验

一、前端页面标签

    
      
        手机号码
        
      
      
        密码
        
      
    

提醒：因为都是用的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)
      })
    }
  },

六、前端展示

 

 
      
        
      
      
        {{userInfo.nickname?userInfo.nickname:'游客'}}
      
    

总结：

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

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